JS实现轮播图效果

前端  /  管理员 发布于 7年前   167

本文实例为大家分享了JS实现轮播图展示的具体代码，供大家参考，具体内容如下

原理介绍

1.html 

布局很简单，利用一个class="swiper-container"的div，包裹图片列表，swiper-btn是按钮

2. css

 * {  margin: 0;  padding: 0; } a {  text-decoration: none; } .swiper-container {  position: relative;  width: 300px;  height: 300px;  margin: 0 auto;  border: 1px solid;  overflow: hidden; } #img-list {  position: absolute;  width: 1200px;  height: 300px; } #img-list img {  float: left; } #swiper-btn {  position: absolute;  bottom: 5%;  left: 45%; } #swiper-btn span {  display: inline-block;  width: 10px;  height: 10px;  border-radius: 5px; } .on {  background-color: goldenrod; } span {  background-color: #d7d7d7; }

3.js

var timer;  var div = document.getElementById('img-list');  var span = document.getElementById('swiper-btn').getElementsByTagName('span');  var offset = -300;  var index = 1;  function swiperImg() {   timer = setInterval(() => {    var left = parseInt(div.style.left);    var newLeft = left + offset;    if (newLeft <= -1200) {     div.style.left = '0px';    }    else {     div.style.left = newLeft + 'px';    }    showBtn(parseInt(div.style.left));   }, 3000);  }  function showBtn(left) {   if (left == 0 || left == -600) {    span[0].className = "on";    span[1].className = "";   }   else {    span[0].className = "";    span[1].className = "on";   }  }  function stopSwiper() {   clearInterval(timer);  }  for (var i = 0; i < span.length; i++) {   span[i].onclick = function () {    if (this.className == "on") {     return false;    }    var myIndex = parseInt(this.getAttribute("index"));    if (myIndex == 1)     div.style.left = 0 + 'px';    if (myIndex == 2)     div.style.left = -300 + 'px';    index = myIndex;    showButton();   }  }  function showButton() {   for (var i = 0; i < span.length; i++) { //全部取消掉on样式    if (span[i].className == "on") {     span[i].className = "";     break;    }   }   span[index - 1].className = "on";  }

效果如下所示：

更多关于轮播图效果的专题，请点击下方链接查看学习

javascript图片轮播效果汇总

jquery图片轮播效果汇总

Bootstrap轮播特效汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• JS实现纵向轮播图（初级版）
• JS实现横向轮播图（初级版）
• js实现轮播图效果 z-index实现轮播图
• 原生js实现无缝轮播图
• js实现旋转木马轮播图
• 原生js实现轮播图的示例代码
• js实现轮播图的完整代码
• js实现支持手机滑动切换的轮播图片效果实例
• js实现点击左右按钮轮播图片效果实例
• JS实现横向轮播图（中级版）