Home > Article > Web Front-end > Imitation Youku picture carousel special effects code based on jquery_jquery

Imitation Youku picture carousel special effects code based on jquery_jquery

WBOYOriginal: 2016-05-16 15:20:131891browse

This article shares with you a common and relatively complex carousel effect, which is the carousel image on Youku’s main interface. The effect picture is as follows:

Before writing the code, we first analyze the structure of the rendering:

1. The left and right direction buttons can be used to switch between the previous and next pictures.

2. There is a paging indicator below to mark which picture you have scrolled to. Of course, you can also jump to the corresponding picture by clicking the corresponding button.

3. The main display area in the middle is used to display pictures that need to be rotated.

According to the above description, we can first write HTML code.

1. HTML code

<body> 
  <div id="youku"> 
    <div class="anniu"> 
      <span class="zuo"></span> 
      <span class="you"></span> 
    </div> 
    <ul class="tuul"> 
      <li class="no0"><a href="#"><img src="images/0.jpg" /></a></li> 
      <li class="no1"><a href="#"><img src="images/1.jpg" /></a></li> 
      <li class="no2"><a href="#"><img src="images/2.jpg" /></a></li> 
      <li class="no3"><a href="#"><img src="images/3.jpg" /></a></li> 
      <li class="no4"><a href="#"><img src="images/4.jpg" /></a></li> 
      <li class="waiting"><a href="#"><img src="images/5.jpg" /></a></li> 
      <li class="waiting"><a href="#"><img src="images/6.jpg" /></a></li> 
      <li class="waiting"><a href="#"><img src="images/7.jpg" /></a></li> 
      <li class="waiting"><a href="#"><img src="images/8.jpg" /></a></li> 
    </ul> 
    <div class="xiaoyuandian"> 
      <ul> 
        <li></li> 
        <li></li> 
        <li class="cur"></li> 
        <li></li> 
        <li></li> 
        <li></li> 
        <li></li> 
        <li></li> 
        <li></li> 
      </ul> 
    </div> 
  </div> 
</body>

The content of the code is clear at a glance and is consistent with what I described above; there are two points I need to explain here:
1. The ul whose class is tuul is used to store pictures that need to be rotated; the li inside mainly has two classes: packaged in the form of "no" and "waiting", where the "no" series indicates that it may currently be in the "active" state pictures, and "waiting" means that these pictures are currently hidden, which is reflected in the following CSS code.

2. The paging indicator sets the class of the third li to cur by default. Because the number of "active" pictures initially set in Tuul is 5, the third chapter is displayed in the center by default. But I don’t know if you have any doubts. In the initial state, the number of pictures displayed on the interface is 3, so why not choose the second picture as the centered picture? That's because when you click the button on the left, if you choose to display the second picture in the center, the first picture can be seen, but there is no picture in front of the first picture. When you click the left button, it is "exposed". So the overall design idea is: there are three pictures displayed on the interface, and there is one picture on the left and right of the part beyond the interface, but you can't see it. In the following explanation, I will explain this implementation process in detail.

2. CSS code

<style type="text/css"> 
    *{ 
      padding: 0; 
      margin: 0; 
    } 
    #youku{ 
      width: 1189px; 
      height: 360px; 
      margin: 100px auto; 
      position: relative; 
      overflow: hidden; 
    } 
    #youku ul{ 
      list-style: none; 
    } 
    #youku .tuul li{ 
      position: absolute; 
      background-color: black; 
    } 
    #youku li.waiting{ 
      display: none; 
    } 
    #youku li img{ 
      width: 100%; 
      height: 100%; 
    } 
   
 
    #youku .anniu .zuo{ 
      position: absolute; 
      width: 45px; 
      height: 45px; 
      background:url(images/zuo.png) no-repeat; 
      top:100px; 
      left:10px; 
      z-index: 1000; 
      cursor: pointer; 
    } 
    #youku .anniu .you{ 
      position: absolute; 
      width: 45px; 
      height: 45px; 
      background:url(images/you.png) no-repeat; 
      top:100px; 
      right:10px; 
      z-index: 1000; 
      cursor: pointer; 
    } 
 
    #youku li.no0{width: 174px;height:122px;left:-116px;top:100px;z-index: 777;} 
    #youku li.no1{width: 356px;height:223px;left:0px;top:26px;z-index: 888;} 
    #youku li.no2{width: 642px;height:273px;left:274px;top:0px;z-index: 999;} 
    #youku li.no3{width: 356px;height:223px;left:834px;top:26px;z-index: 888;} 
    #youku li.no4{width: 174px;height:122px;left:1097px;top:100px;z-index: 777;} 
 
    #youku li.no1 img , #youku li.no3 img{ 
      opacity: 0.3; 
    } 
    #youku .xiaoyuandian{ 
      width: 600px; 
      height: 20px; 
      position: absolute; 
      top: 312px; 
      left: 454px; 
    } 
    #youku .xiaoyuandian ul li{ 
      float: left; 
      width: 16px; 
      height: 16px; 
      background-color: blue; 
      margin-right: 10px; 
      border-radius: 100px; 
      cursor: pointer; 
    } 
    #youku .xiaoyuandian ul li.cur{ 
      background-color:green; 
    } 
  </style>

I won’t explain the CSS here one by one. If you want to know more specifically, please refer to the series I wrote before on JS & JQuery. Here, I will only explain two points:
1. For the CSS settings of the "active" images, that is, the settings of #youku li.no0~no4, notice that the left value of no0 is a negative number, and the left value of no1 is 0, which confirms the point I expressed above , the static state of the visual range displays three pictures, and the remaining two pictures are on the left and right sides of the visual range respectively. Pay attention to setting the z-index value of each picture so that it has a three-dimensional sense of hierarchy. The larger the value, the closer it is to display.

2. For the images on both sides of the visible range, set the opacity to make them darker.

After setting the above CSS code, the analysis diagram is as follows:

3. JQuery code

<script type="text/javascript"> 
    $(document).ready( 
      function() { 
        //定义一个初始速度 
        var sudu = 600; 
        var shangdi = false; 
 
        //定义json 
        var json0 = {"width":"174px","height":"122px","left":"-116px", "top":"100px"}; 
        var json1 = {"width":"356px","height":"223px","left":"0px", "top":"26px"}; 
        var json2 = {"width":"642px","height":"273px","left":"274px", "top":"0"}; 
        var json3 = {"width":"356px","height":"223px","left":"834px", "top":"26px"}; 
        var json4 = {"width":"174px","height":"122px","left":"1097px", "top":"100px"}; 
         
        var nowimg = 2; 
 
        var timer = setInterval(youanniuyewu,2000); 
        $("#youku").mouseenter( 
          function() { 
            clearInterval(timer); 
          } 
        ); 
 
        $("#youku").mouseleave( 
          function() { 
            clearInterval(timer); 
            timer = setInterval(youanniuyewu,2000); 
          } 
        ); 
 
 
        $(".you").click(youanniuyewu); 
        function youanniuyewu(){ 
            if(!$(".tuul li").is(":animated") || shangdi == true){ 
              if(nowimg < 8){ 
                nowimg ++; 
              }else{ 
                nowimg = 0; 
              } 
              $(".xiaoyuandian li").eq(nowimg).addClass("cur").siblings().removeClass("cur"); 
 
              //先交换位置 
              $(".no1").animate(json0,sudu); 
              $(".no2").animate(json1,sudu); 
              $(".no3").animate(json2,sudu); 
              $(".no4").animate(json3,sudu); 
              $(".no0").css(json4); 
               
              //再交换身份 
              $(".no0").attr("class","waiting"); 
              $(".no1").attr("class","no0"); 
              $(".no2").attr("class","no1"); 
              $(".no3").attr("class","no2"); 
              $(".no4").attr("class","no3"); 
              //上面的交换身份，把no0搞没了！所以，我们让no1前面那个人改名为no0 
              if($(".no3").next().length != 0){ 
                //如果no3后面有人，那么改变这个人的姓名为no4 
                $(".no3").next().attr("class","no4"); 
              }else{ 
                //no3前面没人，那么改变此时队列最开头的那个人的名字为no0 
                $(".tuul li:first").attr("class","no4"); 
              } 
               
              //发现写完上面的程序之后，no6的行内样式还是json0的位置，所以强制： 
              $(".no4").css(json4); 
            } 
              
          } 
 
        $(".zuo").click( 
          function(){ 
              
            if(!$(".tuul li").is(":animated") || shangdi == true){ 
 
              if(nowimg > 0){ 
                nowimg --; 
              }else{ 
                nowimg = 8; 
              } 
              $(".xiaoyuandian li").eq(nowimg).addClass("cur").siblings().removeClass("cur"); 
              //先交换位置: 
              $(".no0").animate(json1,sudu); 
              $(".no1").animate(json2,sudu); 
              $(".no2").animate(json3,sudu); 
              $(".no3").animate(json4,sudu); 
              $(".no4").css(json0); 
 
              //再交换身份 
              $(".no4").attr("class","waiting"); 
              $(".no3").attr("class","no4"); 
              $(".no2").attr("class","no3"); 
              $(".no1").attr("class","no2"); 
              $(".no0").attr("class","no1"); 
 
              //上面的交换身份，把no0搞没了！所以，我们让no1前面那个人改名为no0 
              if($(".no1").prev().length != 0){ 
                //如果no1前面有人，那么改变这个人的姓名为no0 
                $(".no1").prev().attr("class","no0"); 
              }else{ 
                //no1前面没人，那么改变此时队列最后的那个人的名字为no0 
                $(".tuul li:last").attr("class","no0"); 
              } 
 
              $(".no0").css(json0); 
            } 
              
          } 
        ); 
 
        $("#youku .xiaoyuandian li").click( 
          function(){ 
            sudu = 100; //临时把这个速度变化一下 
            shangdi = true; //flag 
 
            var yonghuandexuhao = $(this).index(); 
            if(yonghuandexuhao > nowimg ){ 
              var cishu = yonghuandexuhao - nowimg; 
              console.log("主人，我已经通知上帝帮你按右按钮" + cishu + "次"); 
 
              for(var i = 1 ; i<= cishu ; i++){ 
                $(".you").trigger("click"); //让上帝帮你按一次又按钮 
              } 
 
            }else{ 
              var cishu = nowimg - yonghuandexuhao; 
              console.log("主人，我已经通知上帝帮你按左按钮" + cishu + "次"); 
              for(var i = 1 ; i<= cishu ; i++){ 
                $(".zuo").trigger("click"); //让上帝帮你按一次又按钮 
              } 
            } 
            nowimg = yonghuandexuhao; 
            sudu = 600; //再把速度恢复 
            shangdi = false; 
          } 
           
        ); 
      } 
    ); 
  </script>

I won’t introduce the control of timers and clicks of paging buttons in JQuery code here. If you are interested, please refer to the content in: JS & JQuery.
Here I mainly explain two points:

1. The definition of json0, json1, json2, json3, json4 data, its initial value is consistent with the definition above in CSS. Its purpose is to conveniently switch the absolute position of each image. I will introduce it in detail below.

2. Mainly explain the right button click event, which is the youanniuyewu method.

2-1) Simple processing of nowImg index:

if(nowimg < 8){ 
  nowimg ++; 
}else{ 
  nowimg = 0; 
}

If it is not the last one, click the "right button", and the nowImg value will be increased by 1. If it is the last one, nowImg will start from 0.

2-2) Click the "right button", about the processing of paging indicator:

$(".xiaoyuandian li").eq(nowimg).addClass("cur").siblings().removeClass("cur");

Highlight the indicator button corresponding to the currently displayed image, and display the sibling nodes normally.
2-3) Swap picture positions:

//先交换位置 
$(".no1").animate(json0,sudu); 
$(".no2").animate(json1,sudu); 
$(".no3").animate(json2,sudu); 
$(".no4").animate(json3,sudu); 
$(".no0").css(json4);

前面四句话，会动画执行图片移动的效果。静止状态的时候是三张图片显示在我们眼前；运动的时候，可以想象得出最多有四张图片显示在我们眼前，上面四句代码执行过程中，剖析图如下：

即在动画执行的过程中，"no1" 的图片渐渐离开屏幕可视范围，与此同时， "no4" 的图片渐渐显示在屏幕可视范围。

而在动画执行的过程中，"no0" 的这张图片早就定位到 "no4" 的位置(此时在可视范围之外，因为这里的animate动画是异步执行的，不会延迟$(.no0).css(json4)这句代码的执行。当这一组代码执行完毕后，剖析图如下：

此时，我们再将那些处于 "waiting" 状态的图片考虑进来，则此时的剖析图如下：

2-4）以上流程执行完毕后，是完成了一次轮播效果，但是此时各个图片的牌号顺序已经被打乱，为了使得轮播继续下去，我们应该将牌号再 "恢复" 过来。所以我们可以添加以下代码：

//再交换身份 
$(".no0").attr("class","waiting"); 
$(".no1").attr("class","no0"); 
$(".no2").attr("class","no1"); 
$(".no3").attr("class","no2"); 
$(".no4").attr("class","no3");

上面的代码执行后，意味着将上图中 "no0" 这张图片拉入到 "waiting" 区域，而其他四个的编号则依次往前推算。执行完毕后，剖析图如下：

正如上图所示，"活跃"状态的5张图片，最后一张现在也变成了 "waiting" 状态，所以需要有人替补上去，才能继续动画的执行。很显然，应该拿 "waiting" 列表的第一张，也就是 "活跃" 状态的后面一张图片 "顶替" 上去；如果后面没有 "waiting" 状态的图片了，说明这些 "waiting" 状态的图片全部 "跑到" class 为 tuul所有列表的前面去了，那就抓取这些列表的第一张作为 "顶替者"。代码如下：

if($(".no3").next().length != 0){ 
  //如果no3后面有人，那么改变这个人的姓名为no4 
  $(".no3").next().attr("class","no4"); 
}else{ 
  //no3前面没人，那么改变此时队列最开头的那个人的名字为no0 
  $(".tuul li:first").attr("class","no4"); 
} 
               
//发现写完上面的程序之后，no6的行内样式还是json0的位置，所以强制： 
$(".no4").css(json4);

这里需要注意的是：虽然已经经历了很多步奏的位置信息的改变及牌号的改变，但是刚刚被拉入等待区域的那张图片在li中的与兄弟节点的位置关系并没有发生改变，只是class属性变成了 "waiting". 即此时的tuul中li的代码结构如下：

<ul class="tuul"> 
  <li class="waiting"><a href="#"><img src="images/0.jpg" /></a></li> 
  <li class="no0"><a href="#"><img src="images/1.jpg" /></a></li> 
  <li class="no1"><a href="#"><img src="images/2.jpg" /></a></li> 
  <li class="no2"><a href="#"><img src="images/3.jpg" /></a></li> 
  <li class="no3"><a href="#"><img src="images/4.jpg" /></a></li> 
  <li class="no4"><a href="#"><img src="images/5.jpg" /></a></li> 
  <li class="waiting"><a href="#"><img src="images/6.jpg" /></a></li> 
  <li class="waiting"><a href="#"><img src="images/7.jpg" /></a></li> 
  <li class="waiting"><a href="#"><img src="images/8.jpg" /></a></li> 
</ul>

执行完以上代码后，剖析图如下：

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Easily implement JavaScript image switching_javascript skillsNext article：Easily implement JavaScript image switching_javascript skills

See more

Imitation Youku picture carousel special effects code based on jquery_jquery

Related articles