wap手机图片滑动切换特效无css3元素js脚本编写

介绍一下制作wap手机图片滑动切换特效无css3元素js脚本的完整攻略：

一、需求分析

在制作wap手机图片滑动切换特效无css3元素js脚本之前，我们需要先明确需求，包括以下问题：

1. 图片切换效果具体是什么样子？
2. 希望达到的效果是否需要支持PC和手机端？
3. 是否兼容各种浏览器？

明确了需求后，我们可以开始着手制作。

二、HTML结构搭建

我们需要在HTML文档中搭建好结构，输入以下代码：

<div class="slides">
  <div class="slide active"><img src="img/01.jpg"></div>
  <div class="slide"><img src="img/02.jpg"></div>
  <div class="slide"><img src="img/03.jpg"></div>
</div>
<div class="slider-nav">
  <span class="nav-item active"></span>
  <span class="nav-item"></span>
  <span class="nav-item"></span>
</div>

这里我们创建了一个包含三张图片和三个小按钮的幻灯片组件，其中slide表示幻灯片单元，slides是整个幻灯片组件的容器，slider-nav是用于显示小按钮的容器，nav-item表示幻灯片的小按钮。

三、CSS样式设定

我们需要为幻灯片组件定义CSS样式，使其能够具有特定的样式，包括以下内容：

.slides {
  position: relative;
  height: 250px;
  overflow: hidden;
}
.slide {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}
.slide.active {
  display: block;
  z-index: 2;
}
.slider-nav {
  margin-top: 15px;
  text-align: center;
}
.nav-item {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #999;
  margin-right: 10px;
  cursor: pointer;
}
.nav-item.active {
  background-color: #fff;
}

这里我们为幻灯片组件设定了基本的样式，包括定位、高宽等内容，在slide类中，我们将默认状态设为不显示，当active状态激活时，再将其显示出来，并且将z-index设为2，使其能够叠放在其他元素之上；在slider-nav和nav-item类中，我们定义了小按钮的样式，包括背景色、大小、圆角等内容。

四、JS脚本实现

最后，我们需要编写JS脚本，实现图片切换特效，代码如下：

var slideIndex = 0;
showSlides();

function showSlides() {
  var slides = document.getElementsByClassName("slide");
  for (var i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  slides[slideIndex-1].style.display = "block";  
  var dots = document.getElementsByClassName("nav-item");
  for (var i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, 3000); // 切换时间设为3秒
}

这里我们定义了slideIndex变量，表示当前正在展示的图片下标，然后在showSlides函数中，遍历所有幻灯片，将它们都设为不可见，并将slideIndex加1，如果slideIndex超过了幻灯片总数，就将它设为1，并且将当前下标对应的幻灯片设为显示状态。同时，在小按钮上也要进行更新，将现有的active状态去除，并将当前状态对应的小按钮设为active状态。最后使用setTimeout函数，进行循环更新图片显示状态。

五、效果展示

可以在这里查看效果：https://codepen.io/xiaoxiaoniuzi/pen/mdEQKVM

示例1：图片自动轮播

示例2：手指触摸滑动切换幻灯片

以上就是制作wap手机图片滑动切换特效无css3元素js脚本的完整攻略，希望对你有所帮助。