js 轮播效果实例分享

html

<!--图片轮播   Start-->
<div class="pics-ul">
  <div class="pics-ulleft">              
    <ul id="allImg">
      <li><img src="img/img01.png"/></li>  
      <li><img src="img/img2.jpg"/></li>  
      <li><img src="img/img1.jpg"/></li>  
      <li><img src="img/img3.jpg"/></li>  
      <li><img src="img/img4.jpg"/></li>  
    </ul>
    <a name="btn" id="prev" class="prev" style="display: block;"></a>
    <a name="btn" id="next" class="next" style="display: block;"></a>
     <ul id="btn" class="pagination">
     <li class="hover"><a href="#0">1</a></li>
     <li><a href="#1">2</a></li>
     <li><a href="#2">3</a></li>
     <li><a href="#3">4</a></li>
     <li><a href="#4">5</a></li>
     </ul>
     </div>
     <div class="pics-ulright"><img src="img/imgright.png"/></div>
     </div>
<!--图片轮播   End-->

/*图片轮播*/
var but1 = document.getElementById("prev");
var abtn = document.getElementById("btn").getElementsByTagName("li"); //获取所有的按钮
var lis = document.getElementById('allImg').getElementsByTagName('li');
var but2 = document.getElementById("next");
var index = 0;
var timer = null;
but2.onclick = function() {

  index++;
  if (index > lis.length - 1) {
    index = 0;
  }
  setImg(index);

}
but1.onclick = function() {
  index--;
  if (index < 0) {
    index = lis.length - 1;
  }
  setImg(index);

}
function changeImg() {
  if (index == lis.length - 1) { //当到最后一张图片时
    index = 0
  } else {
    index++; //图片索引发生改变
  }
  setImg(index);
}
function setImg(index) {
  for (j = 0; j < lis.length; j++) {
    lis[j].style.display = "none";
  }

  lis[index].style.display = "block";
  //按钮的样式要与图片对应
  for (var i = 0; i < abtn.length; i++) {
    abtn[i].className = ""
  }
  abtn[index].className = "hover";
}
//自动切换
timer = setInterval(changeImg, 3000);
//按钮
for (var i = 0; i < abtn.length; i++) {
  (function() {
    var p = i
    abtn[p].onclick = function() {
      index = p;
      setImg(index);
    }

  })();
}

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# js # 轮播效果 # JS实现焦点图轮播效果的方法详解 # 基于vue.js实现图片轮播效果 # 用JS实现图片轮播效果代码（一） # Javascript实现图片轮播效果(一)让图片跳动起来 # 原生js和jQuery实现淡入淡出轮播效果 # 图解js图片轮播效果 # js实现图片轮播效果 # js图片轮播效果实现代码 # 基于JavaScript实现仿京东图片轮播效果 # JS实现简易图片轮播效果的方法 # 片时 # 一张图 # src # png # li # img # allImg # btn # prev # jpg # id # class # brush # xhtml # strong # html # pre # lt # pics # ul

返回目录在线咨询

上一篇：个人网站服务器租用：如何应对流量突增带来的压力？
下一篇：人人网开发平台,怎样注册人人网？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

js 轮播效果实例分享

您的项目需求