html多张图片组合轮播,01.html · jecson/多张图片视图一直动轮播图 - Gitee.com

*{

padding: 0;

margin: 0;

}

div{

position: relative;

margin: 0 auto;

overflow: hidden;

}

ul{

position: absolute;

left: 0;

}

li{

float: left;

list-style: none;

box-sizing: border-box;

border: 1px solid red;

}

img{

width: 155px;

height: 235px;

}

• 

• 

• 

• 

• 

• 

• 

$(function(){

// 定义变量

var l = 0; //每次左移的距离

var client_n = 4; // 能够看见client_n图片

var pictrue_n = 7; //图片的数量

var bettow = 40 //页面之间的间隔

// 轮播默认样式

$("div").css('width',$("img").innerWidth()*client_n+bettow)

$("div").css('height',$("img").innerHeight())

$("ul").css('width',$("img").innerWidth()*pictrue_n+bettow*pictrue_n-1)

$("ul").css('height',$("img").innerHeight())

$("li").css({'width':$("img").innerWidth(),'margin-right':bettow+'px'})

$("li").css('height',$("img").innerHeight())

//移动方法

function autoPlay(){

l--;

if(l

var newLi = $("ul").children('li:eq(0)').clone(true).appendTo($("ul"));

$("ul").children('li:eq(0)').remove()

l=0;

}

$("ul").css({'left':l})

}

// 定时器

var timer = setInterval(function(){

autoPlay();

},10)

// 鼠标移入

$("div").mouseover(function(event) {

clearInterval(timer)

});

//鼠标移入

$("div").mouseout(function(event) {

timer = setInterval(function(){

autoPlay()

}, 10)

});

})

一键复制

编辑

Web IDE

原始数据

按行查看

历史