原生js滑动轮播封装

时间:2020-07-31 Seeyoucm 人气:0

本文着重为大家仔细讲解了原生js滑动轮播封装，文中代码实例讲解的非常细致，希望能够帮助到您，欢迎大家阅读和收藏

封装滑动轮播

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>cmm无缝轮播</title>
 <style type="text/css">
 *{margin: 0 ;padding : 0}
  #container{
   height: 470px;
   width: 590px;
   border: 1px solid red;
   position: relative;
   margin: 50px auto;
  }
  #box{
   position: absolute;
   list-style: none;
   
  }
  #box li{
   float: left;
  }
  #pages {
 width: 100%;
 height: 30px;
 background: #ccc;
 position: absolute;
 bottom: 0;
 }

 #pages i {
 width: 20px;
 height: 20px;
 display: inline-block;
 border-radius: 10px;
 background: #fff;
 margin: 5px;
 }

 #pages i.current {
 background: #f00;
 }

 #prev, #next {
 width: 45px;
 height: 100px;
 position: absolute;
 top: 0;
 bottom: 0;
 margin: auto;
 background: #ccc;
 line-height: 100px;
 text-align: center;
 font-size: 40px;
 color: #fff;
 }
 #next {
 right: 0;
 }
 </style>
</head>
<body>
 <div id="container">
 <ul id="box">
 <li><img src="images/1.jpg"></li>
 <li><img src="images/2.jpg"></li>
 <li><img src="images/3.jpg"></li>
 <li><img src="images/4.jpg"></li>
 </ul>
 <div id="pages"></div>
 <div id="prev"><</div>
 <div id="next">></div>
 </div>

 <script src="js/tools.js"></script>
 <script>
  var lis = $("li"),
   length = lis.length,
   liWidth = lis[0].clientWidth,
   currentIndex = 0,
   nextIndex = 1,
   timer = null,
   move = null,
   circls = null,
   durations = 2000;

 // 动态设置ul宽度
 $("#box").style.width = length * liWidth + "px";

 // 动态设置小圆点
 var html = "";
 for(var i = 0 ;i <length ;i++){
  html += "<i></i>"
 }
 $("#pages").innerHTML= html;
 circls = $("i");
 circls[0].className = "current";

 // 切换动画
 move = function(){
  // 设置box运动终点值
  var _left = -1 * nextIndex * liWidth;

  // 开始动画
  animate($("#box"),{left:_left},200)

  // 修改小圆点样式
  circls[currentIndex].className = "";
  circls[nextIndex].className = "current";

  // 修改索引
  currentIndex = nextIndex;
  nextIndex++;
  if(nextIndex >= length){
   nextIndex = 0;
  }
 }


 // 自动动画
 timer = setInterval(move, durations)

 // container中鼠标移入，移出事件
 on($("#container"),"mouseenter",function(){
  clearInterval(timer);
 })
 on($("#container"),"mouseleaver",function(){
  timer = setInterval(move, durations);
 })

 // 点击小圆点，切换至对应的图片
 on($("#pages"),"click",function(e){
  e = e || event;
  var src = e.target || src.Element;
  if(src.nodeName === "I"){
   var _index = Array.from(circls).indexOf(src);
   if(_index === currentIndex){
    return
   }
   nextIndex = _index;
   move();
  }
 })

 // 点击翻页进行切换
 on($("#prev"),"click",function(){
  nextIndex = currentIndex - 1;
  if(nextIndex < 0){
   nextIndex = length;
  }
  move();
 })
 on($("#next"),"click",function(){
  move();
 })
 </script>
</body>
</html>

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

javascript图片轮播效果汇总

jquery图片轮播效果汇总

Bootstrap轮播特效汇总

加载全部内容