【jQuery】淘宝banner轮播

思路

通过banner下方的小圆点,控制图片的切换。

给左右箭头添加点击事件(点击时切换图片,并且下方的小圆点跟着切换)。

自动切换(2秒切换一次图片)。

当鼠标移动到banner上时,停止“自动切换”(停止第3步)。

当鼠标移开时,开始继续“自动切换”(继续开始第3步)。

原理

黑框是容器,要做无缝轮播,头和尾的图片需要一样。

所有图片都放在 ul 里面,通过移动 ul 实现图片的切换。

容器要设置 overflow: hidden,把溢出部分的图片隐藏掉。

首先是要获取页面中的元素

// 获取容器

var banner = $('.banner');

// 获取ul(装了所有图片的ul)

var bannerUl = $('.bannerAllPic');

// 获取左箭头

var aLeft = $('.aLeft');

// 获取右箭头

var aRight = $('.aRight');

// 获取小圆点的容器(ol)

var circleAll = $('.circleAll');

// 获取容器的宽度

var width = parseInt($('.banner').css('width'));

// 计数器

var index = 0;

根据上图所示,我们需要把第一张图复制到最后

// 获取第一张图,用clone()复制,并把值赋给变量 liFirst

var liFirst = $('.banner>.bannerAllPic>li:first').clone();

// 把变量 liFirst 添加到 ul后面。

bannerUl.append(liFirst);

根据图片的数量来控制ul的宽度

// 获得图片的数量,并赋给变量 imgNum

var imgNum = $('.bannerAllPic > li').length;

// 设置ul的宽度

bannerUl.css('width' , imgNum * width);

根据图片的数量来生成小圆点的个数

while(index < imgNum-1) {

circleAll.append("");

index++;

}

// 设置第一个圆点的默认样式

var firstCircle = $('.circleAll>li:first');

firstCircle.addClass('now');

通过小圆点控制图片切换

var littleCircle = $('.circleAll>li');

// 给小圆点添加 click() 事件

littleCircle.click(function() {

// 被点击的小圆点添加“now”类,其他小圆点移除“now”类

$(this).addClass('now').siblings().removeClass('now');

// 获取当前被点击的小圆点的下标值

index = $(this).index();

通过当前小圆点的下标值做参考,移动 ul

bannerUl.animate();

});

点击右侧按钮

// 给右箭头添加 click() 事件

aRight.click(function() {

/*

显示倒数第二张(即展示的最后一张)时,再按一下,划到最后一张(即复制出来的那张,和第一张一模一样)。再按一下,把index变为0,同时会瞬间切换到第一张,因为没做动画,所以用户看不出来切换效果。

*/

/*

如果计数器(index)变成所有图片的数量的值时(即已经指向了最后一张图),把计数器变回0(指向第一张图),并把ul的left设为0。

*/

if(index == imgNum-1) {

index = 0;

bannerUl.css('left' , 0);

}

index++;

bannerUl.stop().animate();

// 每点击一次右箭头,小圆点就向后指示一次。

if(index == imgNum-1){

littleCircle.eq(0).addClass('now').siblings().removeClass('now');

} else {

littleCircle.eq(index).addClass('now').siblings().removeClass('now');

}

});

点击左箭头

/*

点击左箭头的原理和点击右箭头的原理差不多

*/

aLeft.click(function() {

if(index

index = imgNum-1;

bannerUl.css('left' , -index * width);

}

index--;

bannerUl.stop().animate();

// 点击箭头时,把当前图片对应的小圆点改成now类。

littleCircle.eq(index).addClass('now').siblings().removeClass('now');

});

自动切换

var timeId = setInterval(function() {

aRight.click();

}, 2000);

鼠标经过事件

banner.hover(function() {

clearInterval(timeId);

}, function() {

timeId = setInterval(function() {

aRight.click();

}, 2000);

});

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180221G05JPT00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券