html同时显示三张图片循环轮播,JQ轮播图（多张同时显示）

HTML:

CSS:

*{

display: block;

margin: 0px;

border: 0px;

}

.clearfix:after{

display: block;

content:'';

clear: both;

height:0;

}

#carousel{

width: 1224px;

height: 144px;

margin: 50px auto;

position: relative;

}

#carousel>img{

cursor: pointer;

width: 256px;

height: 144px;

float: left;

margin: 0 20px;

}

#previous,#next{

float: left;

line-height: 50px;

margin-top: 47px;

font-size: 25px;

cursor: pointer;

}

JQ:

$(function(){

$("#carousel").append("

<

");

for(var j=0;j<4;j++)

$("#carousel").append("");

$("#carousel").append("

>

");

var i=0;

var index=i;

function start () {

i=i%5;

index=i;

change();

i++;

}

function change(){

for(var j=0;j<4;j++)

$("#carousel>img").eq(j).attr("src","img/"+((i+j)%5+1)+".jpg");

$("#dots>div").css("background","rgba(255,255,255,0.6)");

$("#dots>div").eq(i).css("background","rgba(255,0,0,0.6)");

}

var time=setInterval(start,3000);

$("#carousel>img").hover(function() {

clearInterval(time);

},function () {

time=setInterval(start,3000);

});

$("#previous").click(function () {

clearInterval(time);

index++;

i=index%5;

change();

time=setInterval(start,3000);

});

$("#next").click(function () {

clearInterval(time);

index--;

if(index<0)

index=4;

i=index;

change();

time=setInterval(start,3000);

});

});

本文来源于网络：查看 >https://blog.youkuaiyun.com/fffssso/article/details/83899052