左右无缝轮播html,JS实现左右无缝轮播图代码

痛定思痛。 2022-10-10 02:09 487阅读 0赞

废话不多说了，直接给大家贴代码了。

无缝轮播图：

无缝轮播图

\*\{margin: 0;padding:0; \}

ul\{list-style: none;\}

.banner\{width: 600px;height: 300px;border: 2px solid \#ccc;margin: 100px auto;position: relative;overflow: hidden;\}

.img\{position: absolute;top: 0;left: 0\}

.img li\{float: left;\}

.num\{position: absolute;bottom: 10px;width: 100%;text-align: center;font-size: 0;\}

.num li\{width: 10px;height: 10px;background:rgba(0,0,0,0.5);display: block;border-radius: 100%;display: inline-block;margin: 0 5px;cursor: pointer;\}

.btn\{display: none;\}

.btn span\{display: block;width: 50px;height: 100px;background: rgba(0,0,0,0.6);color: \#fff;font-size: 40px;line-height: 100px;text-align: center;cursor:pointer;\}

.btn .prev\{position: absolute;left: 0;top: 50%;margin-top: -50px;\}

.btn .next\{position: absolute;right: 0;top: 50%;margin-top: -50px;\}

.num .active\{background-color: \#fff;\}

*  ![第1张图片][1]
 *  ![第2张图片][1]
 *  ![第3张图片][1]
 *  ![第4张图片][1]
 *  ![第5张图片][1]

$(function()\{

var i=0;

var timer=null;

for (var j = 0; j < $('.img li').length; j++) \{ //创建圆点

$('.num').append('

$('.num li').first().addClass('active'); //给第一个圆点添加样式

var firstimg=$('.img li').first().clone(); //复制第一张图片

$('.img').append(firstimg).width($('.img li').length\*($('.img img').width())); //将第一张图片放到最后一张图片后，设置ul的宽度为图片张数\*图片宽度

// 下一个按钮

$('.next').click(function()\{

i++;

if (i==$('.img li').length) \{

i=1; //这里不是i=0

$('.img').css(\{left:0\}); //保证无缝轮播，设置left值

\};

$('.img').stop().animate(\{left:-i\*600\},300);

if (i==$('.img li').length-1) \{ //设置小圆点指示

$('.num li').eq(0).addClass('active').siblings().removeClass('active');

\}else\{

$('.num li').eq(i).addClass('active').siblings().removeClass('active');

\})

// 上一个按钮

$('.prev').click(function()\{

i--;

if (i==-1) \{

i=$('.img li').length-2;

$('.img').css(\{left:-($('.img li').length-1)\*600\});

$('.img').stop().animate(\{left:-i\*600\},300);

$('.num li').eq(i).addClass('active').siblings().removeClass('active');

\})

//设置按钮的显示和隐藏

$('.banner').hover(function()\{

$('.btn').show();

\},function()\{

$('.btn').hide();

\})

//鼠标划入圆点

$('.num li').mouseover(function()\{

var \_index=$(this).index();

$('.img').stop().animate(\{left:-\_index\*600\},150);

$('.num li').eq(\_index).addClass('active').siblings().removeClass('active');

\})

//定时器自动播放

timer=setInterval(function()\{

i++;

if (i==$('.img li').length) \{

i=1;

$('.img').css(\{left:0\});

\};

$('.img').stop().animate(\{left:-i\*600\},300);

if (i==$('.img li').length-1) \{

$('.num li').eq(0).addClass('active').siblings().removeClass('active');

\}else\{

$('.num li').eq(i).addClass('active').siblings().removeClass('active');

\},1000)

//鼠标移入，暂停自动播放，移出，开始自动播放

$('.banner').hover(function()\{

clearInterval(timer);

\},function()\{

timer=setInterval(function()\{

i++;

if (i==$('.img li').length) \{

i=1;

$('.img').css(\{left:0\});

\};

$('.img').stop().animate(\{left:-i\*600\},300);

if (i==$('.img li').length-1) \{

$('.num li').eq(0).addClass('active').siblings().removeClass('active');

\}else\{

$('.num li').eq(i).addClass('active').siblings().removeClass('active');

\},1000)

\})

以上代码是使用js实现的无缝轮播效果，代码比较简单，所以没有给大家注释，如果有疑问欢迎给我留言。

[1]:

左右无缝轮播html,JS实现左右无缝轮播图代码

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 js实现无缝轮播图

相关 js常用代码之左右轮播图（无缝轮播）

相关无缝轮播/自动轮播

相关左右无缝轮播html,JS实现左右无缝轮播图代码

相关无缝轮播滚动html模板,js轮播图无缝滚动效果

相关 JQuery无缝轮播图

相关 jQuery实现的无缝轮播图

相关 js无缝轮播效果实现，自动轮播

相关无缝轮播图切换

相关无缝轮播图