Imitation Youku picture carousel special effects code based on jquery

Home

Web Front-end

JS Tutorial

Imitation Youku picture carousel special effects code based on jquery_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:20 PM

jqueryImage Carousel

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="/static/imghwm/default1.png"  data-src="images/0.jpg"  class="lazy" / alt="Imitation Youku picture carousel special effects code based on jquery_jquery" ></a></li> 
      <li class="no1"><a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/1.jpg"  class="lazy" / alt="Imitation Youku picture carousel special effects code based on jquery_jquery" ></a></li> 
      <li class="no2"><a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/2.jpg"  class="lazy" / alt="Imitation Youku picture carousel special effects code based on jquery_jquery" ></a></li> 
      <li class="no3"><a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/3.jpg"  class="lazy" / alt="Imitation Youku picture carousel special effects code based on jquery_jquery" ></a></li> 
      <li class="no4"><a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/4.jpg"  class="lazy" / alt="Imitation Youku picture carousel special effects code based on jquery_jquery" ></a></li> 
      <li class="waiting"><a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/5.jpg"  class="lazy" / alt="Imitation Youku picture carousel special effects code based on jquery_jquery" ></a></li> 
      <li class="waiting"><a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/6.jpg"  class="lazy" / alt="Imitation Youku picture carousel special effects code based on jquery_jquery" ></a></li> 
      <li class="waiting"><a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/7.jpg"  class="lazy" / alt="Imitation Youku picture carousel special effects code based on jquery_jquery" ></a></li> 
      <li class="waiting"><a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/8.jpg"  class="lazy" / alt="Imitation Youku picture carousel special effects code based on jquery_jquery" ></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="/static/imghwm/default1.png"  data-src="images/0.jpg"  class="lazy" / alt="Imitation Youku picture carousel special effects code based on jquery_jquery" ></a></li> 
  <li class="no0"><a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/1.jpg"  class="lazy" / alt="Imitation Youku picture carousel special effects code based on jquery_jquery" ></a></li> 
  <li class="no1"><a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/2.jpg"  class="lazy" / alt="Imitation Youku picture carousel special effects code based on jquery_jquery" ></a></li> 
  <li class="no2"><a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/3.jpg"  class="lazy" / alt="Imitation Youku picture carousel special effects code based on jquery_jquery" ></a></li> 
  <li class="no3"><a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/4.jpg"  class="lazy" / alt="Imitation Youku picture carousel special effects code based on jquery_jquery" ></a></li> 
  <li class="no4"><a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/5.jpg"  class="lazy" / alt="Imitation Youku picture carousel special effects code based on jquery_jquery" ></a></li> 
  <li class="waiting"><a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/6.jpg"  class="lazy" / alt="Imitation Youku picture carousel special effects code based on jquery_jquery" ></a></li> 
  <li class="waiting"><a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/7.jpg"  class="lazy" / alt="Imitation Youku picture carousel special effects code based on jquery_jquery" ></a></li> 
  <li class="waiting"><a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/8.jpg"  class="lazy" / alt="Imitation Youku picture carousel special effects code based on jquery_jquery" ></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

Javascript Data Types : Is there any difference between Browser and NodeJs?May 14, 2025 am 12:15 AM

JavaScript core data types are consistent in browsers and Node.js, but are handled differently from the extra types. 1) The global object is window in the browser and global in Node.js. 2) Node.js' unique Buffer object, used to process binary data. 3) There are also differences in performance and time processing, and the code needs to be adjusted according to the environment.

JavaScript Comments: A Guide to Using // and /* */May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript: A Comparative Analysis for DevelopersMay 09, 2025 am 12:22 AM

The main difference between Python and JavaScript is the type system and application scenarios. 1. Python uses dynamic types, suitable for scientific computing and data analysis. 2. JavaScript adopts weak types and is widely used in front-end and full-stack development. The two have their own advantages in asynchronous programming and performance optimization, and should be decided according to project requirements when choosing.

Python vs. JavaScript: Choosing the Right Tool for the JobMay 08, 2025 am 12:10 AM

Whether to choose Python or JavaScript depends on the project type: 1) Choose Python for data science and automation tasks; 2) Choose JavaScript for front-end and full-stack development. Python is favored for its powerful library in data processing and automation, while JavaScript is indispensable for its advantages in web interaction and full-stack development.

Python and JavaScript: Understanding the Strengths of EachMay 06, 2025 am 12:15 AM

Python and JavaScript each have their own advantages, and the choice depends on project needs and personal preferences. 1. Python is easy to learn, with concise syntax, suitable for data science and back-end development, but has a slow execution speed. 2. JavaScript is everywhere in front-end development and has strong asynchronous programming capabilities. Node.js makes it suitable for full-stack development, but the syntax may be complex and error-prone.

JavaScript's Core: Is It Built on C or C ?May 05, 2025 am 12:07 AM

JavaScriptisnotbuiltonCorC ;it'saninterpretedlanguagethatrunsonenginesoftenwritteninC .1)JavaScriptwasdesignedasalightweight,interpretedlanguageforwebbrowsers.2)EnginesevolvedfromsimpleinterpreterstoJITcompilers,typicallyinC ,improvingperformance.

JavaScript Applications: From Front-End to Back-EndMay 04, 2025 am 12:12 AM

JavaScript can be used for front-end and back-end development. The front-end enhances the user experience through DOM operations, and the back-end handles server tasks through Node.js. 1. Front-end example: Change the content of the web page text. 2. Backend example: Create a Node.js server.

Python vs. JavaScript: Which Language Should You Learn?May 03, 2025 am 12:10 AM

Choosing Python or JavaScript should be based on career development, learning curve and ecosystem: 1) Career development: Python is suitable for data science and back-end development, while JavaScript is suitable for front-end and full-stack development. 2) Learning curve: Python syntax is concise and suitable for beginners; JavaScript syntax is flexible. 3) Ecosystem: Python has rich scientific computing libraries, and JavaScript has a powerful front-end framework.

See all articles