Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use jQuery to achieve Youku home broadcast map". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use jQuery to achieve Youku home broadcast map".

Train of thought

The idea is actually very simple, that is, when you click the dot below the picture or the arrows on both sides of the picture, let the picture you want to see go to its position, and then the current picture and the picture you want to see move in the same direction.

For example, let's click on the fifth dot, let the fifth picture run behind the current picture, and then move to the left together.

Of course, if you want to see the previous picture, let the picture run to the left of the current picture, and then move to the right with the current picture.

Basic structure and style

* {margin: 0; padding: 0;} .lunbo {width: 100%; height: 410px; position: relative; text-align: center;} .picture {width: 1190px; height: 480px; position: absolute; top: 0; left: 88px; overflow: hidden;}. Picture li {width: 1190px; height: 410px; margin: 0 auto; list-style-type: none; margin-top: 70px; position: absolute; overflow: hidden; top:; left:;} .picture img {cursor: pointer;} .btn {display: block; width: 150px Height: 30px; position: absolute; top: 460px; left: 130px;}. Btn li {display: block; width: 10px; height: 10px; background-color:white; list-style-type: none; position: absolute; top: 0px; left: 0px; border-radius: 10px; cursor: pointer;} # active {background-color:# 03A9F4;}. Btn li:hover {background-color:#9e9e9e;} # left {position: absolute; top: 240px; left: 90px; cursor: pointer;} # right {position: absolute; top: 240px; left: 1220px Cursor: pointer;}

Then we use jQuery to set the position of the initial picture and the position of the dots

Function setCirPos () {/ / sets the position of the dot $cir.each (function () {$(this). Css ({left:$ (this). Index () * 25 + 500})}); / / sets the position of the picture that is not displayed at first $pic.slice (1) .each (function () {$(this). Css ({left:$picW})})}

Automatic rotation

Let's first take a look at the defined global variables.

Var $cir = $('. Btn li'); var $pic = $('. Picture li'); var $picW = $pic.width (); var $oLeft = $('# left'); var $oRight = $('# right'); / / current picture var nowPic = 0; / / prevent users from continuously clicking var canClick = true; / / timer var timer = null

NowPic is set to record the currently displayed picture. Because there are three ways to trigger the picture switch in this broadcast picture, this variable is shared by the three methods.

The canClick variable is set to prevent users from clicking when the animation effect of the picture switch is not finished.

/ / set timer to automatically switch timer = setInterval (function () {auto ();}, 2000); / / automatically switch function auto () {var index = nowPic + 1; if (index)

< 0){ index = 4; }else if(index >

4) {index = 0;} $pic.eq (index) .css ('left',$picW); $pic.eq (nowPic). Animate ({left:-$picW}, 400); $pic.eq (index). Animate ({left:0}, 400); nowPic = index; / / set the style of the dots of the current picture $cir.eq (nowPic) .attr (' id','active'). Siblings (). Attr ('id','');}

Click on the little dot

The method of picture switching is the same, but it should be noted that when you click on the dots, you should be aware of the timer for automatic picture switching. After the picture switching is complete, set the timer for automatic switching.

Function lunbo () {$cir.click (function () {clearInterval (timer); var index = $(this). Index (); if (index > nowPic) {/ / the value clicked is greater than the current value $pic.eq (index) .css ('left',$picW); $pic.eq (nowPic). Animate ({left:-$picW}, 400);} else if (index)

< nowPic){ // 点击的值小于当前的值 $pic.eq(index).css('left',-$picW); $pic.eq(nowPic).animate({left:$picW},400); } $pic.eq(index).animate({left:0},400,function(){ timer = setInterval(function(){ auto(); },3000); }); nowPic = index; // 设置当前图片的圆点的样式 $cir.eq(nowPic).attr('id','active').siblings().attr('id',''); }); } 点击箭头 当点击箭头时，我们为了防止用户多次连续的点击，所以设置了canClick这个全局变量，当点击了箭头时，要首先判断是否有为完成的动画即canClick是否为true,如果为true,就将canCilck设置为false，防止再次点击箭头，然后进行图片切换的动画，同样不要忘了清楚定时器，最后当切换图片的动画完成时，animate()方法的回调函数执行，将canClick设置为true // 点击左箭头 $oLeft.click(function(){ if(canClick){ clearInterval(timer); canClick = false; var index = nowPic - 1; if(index < 0){ index = 4; }else if(index >

4) {index = 0;} $pic.eq (index) .css ('left',-$picW); $pic.eq (nowPic). Animate ({left:$picW}, 400); $pic.eq (index). Animate ({left:0}, 400 animate () {canClick = true; timer = setInterval (function () {auto ();}, 3000);}); nowPic = index / / set the style of the dots of the current picture $cir.eq (nowPic) .attr ('id','active'). Siblings (). Attr (' id','');}) / / Click the right arrow $oRight.click (function () {if (canClick) {clearInterval (timer); canClick = false; var index = nowPic + 1; if (index)

< 0){ index = 4; }else if(index >

4) {index = 0;} $pic.eq (index) .css ('left',$picW); $pic.eq (nowPic). Animate ({left:-$picW}, 400); $pic.eq (index). Animate ({left:0}, 400 animate () {canClick = true; timer = setInterval (function () {auto ();}, 3000);}); nowPic = index / / sets the style of the dots of the current picture $cir.eq (nowPic) .attr ('id','active'). Siblings () .attr (' id','') }}) Thank you for your reading. The above is the content of "how to use jQuery to achieve Youku home broadcast map". After the study of this article, I believe you have a deeper understanding of how to use jQuery to achieve Youku home broadcast map, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.