用jQuery实现优酷主页轮播

概述

看到旋转木马的想法，我想自己实践一下。一般来说，用jQuery实现要简单得多

思考

这个想法其实很简单，就是当你点击图片下面的点或者图片两边的箭头，让你想看的图片走到它的位置，然后当前的图片和你想看的图片就可以往一个方向移动

比如我们点击第五个点，让第五张图片跑到当前图片后面，然后一起向左移动

当然，如果你想看上一张图片，让图片先跑到当前图片的左边，然后和当前图片一起向右移动

基本结构和风格

div class=' lunbo ' div class=' picture ' ul liimg src=' http : img/1 . jpg '/Li liimg src=' http : img/2 . jpg '/Li liimg src=' http : img/3 . jpg '/Li liimg src=' http : img/4 . jpg '/Li liimg src=' http : img/5 . jpgpadd : 0；}.伦博{ width : 100%；height: 410px相对位置：文本对齐：中心；}.图片{ width: 1190px高度： 480 px；绝对位置：top : 0；left: 88px飞越：隐藏；}.图片li { width: 1190pxheight: 410pxmargin: 0 auto列表样式类型：无；边距-top : 70px；绝对位置：飞越：隐藏；top:left:}.图片img{ cursor:指针；}.btn { display:块；宽度： 150 px；height: 30px绝对位置：top: 460pxleft: 130px}.btn li{ display:块；宽度： 10px；height: 10px背景-颜色：白色；列表样式类型：无；绝对位置：top: 0pxleft: 0pxborder-radius : 10px；cursor:指针；} # active { background-color : # 03A 9 F4；}.BTN Li : hover { background-color : # 9e 9e 9 e；} # left { position: absolutetop: 240pxleft: 90pxcursor:指针；} # right { position: absolutetop: 240pxleft: 1220pxcursor:指针；}然后我们用jQuery设置初始图片的位置和点的位置

函数setCirPos(){ //设置点$ cir.each()函数{$ (this)的位置。CSS ({left: $(这个)。index()* 25 500 })})；//设置不在开头$ pic.slice (1)显示的图片的位置。每个(函数(){$ (this))。CSS ({left: $ picw})})}自动转盘

让我们首先看看定义的全局变量

var $cir=$('。BTN Li’；var $pic=$('。图片Li’)；var $ PiCw=$ PiC . width()；var $ oLeft=$(' # left ')；var $ Oright=$(' # right ')；//当前图片var now pic=0；//防止用户连续点击var canClick=true//timer var timer=null；设置nowPic的目的是记录当前显示的图片，因为在这个转盘中有三种方法触发图片切换，所以这个变量由三种方法共享。

设置canClick变量是为了在画面切换的动画效果没有完成时，防止用户点击。

//设置timer自动切换timer=set interval(function(){ auto()；},2000);//自动切换函数auto(){ var index=now pic 1；if(index 0){ index=4；} else if(index 4){ index=0；} $pic.eq(索引)。css('left '，$ PiCw)；$pic.eq(nowPic)。动画({left:-$picW}，400)；$pic.eq(索引)。动画({left:0}，400)；nowPic=索引；//设置当前图片$ cir.eq (nowpic)的点样式。attr ('id '，' active ')。兄弟姐妹()。attr ('id '，' ')；}点击圆点

画面切换的方法是一样的，但需要注意的是，点击圆点时自动切换画面的定时器要清晰，画面切换完成后再设置自动切换画面的定时器

函数lunbo(){ $ cir。click(function(){ clearInterval(timer))；定义变量索引=$(这个).index()；if(index nowPic){ //点击的值大于当前的值$pic.eq(索引)。css('left '，$ PiCw)；$pic.eq(nowPic).动画({left:-$picW}，400)；}else if(index nowPic){ //点击的值小于当前的值$pic.eq(索引)。css('left '，-$ PiCw)；$pic.eq(nowPic).animate({left:$picW}，400)；} $pic.eq(索引)。animate({left:0}，400，function(){ timer=setInterval(function(){ auto()；},3000);});nowPic=索引；//设置当前图片的圆点的样式$cir.eq(nowPic).attr('id '，' active ').兄弟姐妹()。attr('id '，' ')；});}点击箭头

当点击箭头时，我们为了防止用户多次连续的点击，所以设置了点击这个全局变量，当点击了箭头时，要首先判断是否有为完成的动画即点击是否为没错，如果为没错，就将canCilck设置为假的，防止再次点击箭头，然后进行图片切换的动画，同样不要忘了清楚定时器，最后当切换图片的动画完成时，动画()方法的回调函数执行，将点击设置为真实的

//点击左箭头$ oleft。click(function(){ if(canClick){ clearInterval(定时器))；canClick=falsevar索引=现在pic-1；if(index 0){ index=4；} else if(index 4){ index=0；} $pic.eq(索引)。css('left '，-$ PiCw)；$pic.eq(nowPic).animate({left:$picW}，400)；$pic.eq(索引)。animate({left:0}，400，function(){ canClick=true；timer=setInterval(function(){ auto()；},3000);});nowPic=索引；//设置当前图片的圆点的样式$cir.eq(nowPic).attr('id '，' active ').兄弟姐妹()。attr('id '，' ')；} })//点击右箭头$ originht。click(function(){ if(canClick){ clearInterval(定时器))；canClick=falsevar索引=现在pic 1；if(index 0){ index=4；} else if(index 4){ index=0；} $pic.eq(索引)。css('left '，$ PiCw)；$pic.eq(nowPic).动画({left:-$picW}，400)；$pic.eq(索引)。animate({left:0}，400，function(){ canClick=true；timer=setInterval(function(){ auto()；},3000);});nowPic=索引；//设置当前图片的圆点的样式$cir.eq(nowPic).attr('id '，' active ').兄弟姐妹()。attr('id '，' ')；} })总结

这个效果实现起来很简单，就是刚开始没有想到实现的思路。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！