Teach you step by step how to implement a carousel using jQyery

Implementation Principle

As shown in the figure, imagine if the width attribute value of

is set very wide until all your pictures can be accommodated, and each picture uses

• Then when we move ul to the left and the distance moved is the width of

• , the second
• will be moved to the window of
  , so that the picture Wasn’t it just displayed one by one?

  Next we set the overflow:hidden attribute of

  , then the pictures outside the

  window will not be displayed, and only the pictures moved to the current window will be displayed. Isn’t it more perfect? ​​It feels like It's almost ready, right?

  

  # After talking about some principles, okay, let’s go directly to the code, remember to introduce jquery.

  This is the layout made by div. Remember to add a border when making it and delete it after making it. This will make it easier to test.

  <div class="slideShow">
   <div class="nav-t">
    <ul>
     <li><a href="#" target="_blank"><img src="images/1.png" alt=""></a></li>
     <li><a href="#" target="_blank"><img src="images/2.png" alt=""></a></li>
     <li><a href="#" target="_blank"><img src="images/3.png" alt=""></a></li>
     <li><a href="#" target="_blank"><img src="images/4.png" alt=""></a></li>
     <li><a href="#" target="_blank"><img src="images/5.png" alt=""></a></li>
    </ul>
    <div class="nav-b">
     <span class="active">1</span>
     <span>2</span>
     <span>3</span>
     <span>4</span>
     <span>5</span>
    </div>
   </div>
   </div>
   <script type="text/javascript" src="jquery-min.js"></script>
   <script type="text/javascript" src="lunbo.js"></script>

  Next set the style

  <style>
   .slideShow{
    border:0px solid blue;
    width:600px;
    height:450px;
    margin:50px auto;
    position:relative;
   }
   .nav-t{
    border:0px solid red;
    width:580px;
    height:430px;
    margin:8px auto;
    position:relative;
    overflow:hidden;
   }
   .nav-t ul{
    border:0px solid green;
    list-style:none;
    width:3000px;
    height:430px;
    margin:0;
    padding:0;
    position:relative;
   }
   .nav-t li{
    height:427px;
    width:580px;
    float:left;
   }
   .nav-b{
    position:absolute;
    top:390px;
    left:220px;
    cursor:default;
   }
   .nav-b span{
    margin-right:5px;
    border:1px solid red;
    padding:0 6px;
    border-radius:12px;
    color:#fff;
    background:rgba(132,125,119,0.5);
    cursor:pointer;
   }
   .nav-b span.active{
    background:rgba(0,0,0,0.8);
   }
   </style>

  Use js implements click carousel pictures, automatic carousel pictures, and moves the mouse up to stop the carousel

  $(function(){
    
   $(function(){
   var slide=$(".slideShow"),
    navt=slide.find(".nav-t"),
    ul=navt.find("ul"),
    navbs=slide.find(".nav-b span"),
    onwidth=ul.find("li").eq(0).width(), //获取ul下的li宽度
    timer=null,
    inow=0;
   navt.hover(function(){
     clearInterval(timer); //鼠标移上去，清除掉自动轮播功能，即定时轮播
    },autoPlay); 
   navbs.on("click",function(){ //点击轮播事件
    var me=$(this);
     inow=me.index();  //此处变量用的与自动轮播函数里的相同，为的是能在随便点击后，自动轮播时按照我们点击了的继续向后轮播，这叫动态实时
    ul.animate({left:-inow*onwidth},0.01); //ul向左移动从而使得下一个li显示到div的当前窗口
    navbs.removeClass("active");   //清除掉上一个点击按钮的样式
    me.addClass("active");     //为当前被点击的按钮添加第一个按钮样式
   });
   autoPlay();     
   function autoPlay(){     //自动轮播函数
   timer=setInterval(function(){   //开定时器
    inow++;
    if(inow==navbs.length){    //判断是否到了最后一张，若是到了，返回到第一张
     inow=0
     }
    navbs.eq(inow).trigger("click"); //根据定时的时间用span的索引自动调用click事件，trigger为jQuery的自动调用函数
    },3000);
   }
   
  });
   
   
   
  });

  Let’s take a look at the rendering? Okay

  

  

  ##Summary

  Okay, the above is the entire content of using jQyery to implement the carousel. How? Like, how about you make one too? I hope that the content of this article will be of some help to everyone's study or work. If you have any questions, you can leave a message to communicate.

  For more related articles that teach you step by step how to implement a carousel using jQyery, please pay attention to the PHP Chinese website!