html多张图片无缝滚动播放,jQuery实现的多张图无缝滚动效果【测试可用】

本文实例讲述了jQuery实现的多张图无缝滚动效果。分享给大家供大家参考，具体如下：

slider

*{

padding: 0;

margin: 0;

}

li{

list-style-type: none;

}

body{

margin: 50px;

}

.wrap{

border: 3px solid #f00;

width: 600px;

height: 200px;

position: relative;

overflow: hidden;

}

.wrap ul{

overflow: hidden;

position:absolute;

width: 1600px;

left: 0;

top: 0;

_height:1px;

}

.wrap ul li{

float: left;

width: 200px;

}

向左走

向右走

• 
• 
• 
• 
• 

slider.js

// 如果想要使一个元素运动起来，一般情况下这个元素须要具有position属性absolute/relative

$(function(){

var oul = $('.wrap ul');

var oulHtml = oul.html();

oul.html(oulHtml+oulHtml)

var timeId = null;

var ali = $('.wrap ul li');

var aliWidth = ali.eq(0).width();

var aliSize = ali.size();

var ulWidth = aliWidth*aliSize;

oul.width(ulWidth); //1600px

var speed = 2;

function slider(){

if(speed<0){

if(oul.css('left')==-ulWidth/2+'px'){

oul.css('left',0);

}

oul.css('left','+=-2px');

}

if(speed>0){

if(oul.css('left')=='0px'){

oul.css('left',-ulWidth/2+'px');

}

oul.css('left','+='+speed+'px');

}

}

// setInterval()函数的作用是：每隔一段时间，执行该函数里的代码

timeId = setInterval(slider,30);

$('.wrap').mouseover(function(){

// clearInterval()函数的作用是用来清除定时器

clearInterval(timeId);

});

$('.wrap').mouseout(function(){

timeId = setInterval(slider,30);

});

$('.goLeft').click(function(){

speed=-2;

});

$('.goRight').click(function(){

speed=2;

});

});

效果图如下：

希望本文所述对大家jQuery程序设计有所帮助。