网络编程 
首页 > 网络编程 > 浏览文章

js 轮播效果实例分享

(编辑:jimmy 日期: 2025/7/3 浏览:3 次 )

html

<!--图片轮播   Start-->
<div class="pics-ul">
  <div class="pics-ulleft">              
    <ul id="allImg">
      <li><img src="/UploadFiles/2021-04-02/img01.png">

js

/*图片轮播*/
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树形控件—zTree使用总结
下一篇:JS正则RegExp.test()使用注意事项(不具有重复性)
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap