jQuery 滚动图片
var scrollWrapW,myScroll;
var rollDirection = 0; //0为左 1为右
var speed = 500;
function __scrollBox(){
if (rollDirection == 0){
scrollWrapW = -($('ul li').eq(0).outerWidth(true) + $('ul li').eq(1).outerWidth(true)) + 'px';
$('ul').animate({left:scrollWrapW}, {
duration:200,
complete:function(){
$('ul').append($('ul li:first')).append($('ul li:first'));
$('ul').css("left","0");
}
});
}else{
var last = $('ul li').length - 1;
var last2 = $('ul li').length - 2;
scrollWrapW = -($('ul li').eq(last).outerWidth(true) + $('ul li').eq(last2).outerWidth(true)) + 'px';
$('ul').animate({left:0}, {
duration:200,
complete:function(){
$('ul').prepend($('ul li:last')).prepend($('ul li:last'));
$('ul').css("left",scrollWrapW);
}
});
}
}
$(document).ready(function(){
/* roll control */
myScroll = setInterval(__scrollBox,speed);
$('#scrool_wrap').hover(function(){
clearInterval(myScroll);
},function(){
myScroll = setInterval(__scrollBox,speed);
});
/* left control */
$('.left').click(function(){
rollDirection = 0;
});
$('.right').click(function(){
rollDirection = 1;
});
})
var rollDirection = 0; //0为左 1为右
var speed = 500;
function __scrollBox(){
if (rollDirection == 0){
scrollWrapW = -($('ul li').eq(0).outerWidth(true) + $('ul li').eq(1).outerWidth(true)) + 'px';
$('ul').animate({left:scrollWrapW}, {
duration:200,
complete:function(){
$('ul').append($('ul li:first')).append($('ul li:first'));
$('ul').css("left","0");
}
});
}else{
var last = $('ul li').length - 1;
var last2 = $('ul li').length - 2;
scrollWrapW = -($('ul li').eq(last).outerWidth(true) + $('ul li').eq(last2).outerWidth(true)) + 'px';
$('ul').animate({left:0}, {
duration:200,
complete:function(){
$('ul').prepend($('ul li:last')).prepend($('ul li:last'));
$('ul').css("left",scrollWrapW);
}
});
}
}
$(document).ready(function(){
/* roll control */
myScroll = setInterval(__scrollBox,speed);
$('#scrool_wrap').hover(function(){
clearInterval(myScroll);
},function(){
myScroll = setInterval(__scrollBox,speed);
});
/* left control */
$('.left').click(function(){
rollDirection = 0;
});
$('.right').click(function(){
rollDirection = 1;
});
})
* {
margin:0;
padding:0;
border:0;
}
div {
width:368px;
overflow:hidden;
position:relative;
height:109px;
margin:0 auto;
background:#F00;
border:5px solid #F00;
}
ul {
height:109px;
position:absolute;
width:1000px;
}
li {
float:left;
position:relative;
margin-right:5px;
}
span {
cursor:pointer;
}
margin:0;
padding:0;
border:0;
}
div {
width:368px;
overflow:hidden;
position:relative;
height:109px;
margin:0 auto;
background:#F00;
border:5px solid #F00;
}
ul {
height:109px;
position:absolute;
width:1000px;
}
li {
float:left;
position:relative;
margin-right:5px;
}
span {
cursor:pointer;
}
<span class="left">向左移动</span> <span class="right">向右边移动</span> <br />
<br />
<br />
<br />
<br />
<br />
<br />
<div>
<ul id="scrool_wrap">
<li><a href="#" target="_blank"><img src="img/01.jpg" width="184" height="109" /></a></li>
<li><a href="#" target="_blank"><img src="img/02.jpg" width="184" height="109" /></a></li>
<li><a href="#" target="_blank"><img src="img/03.jpg" width="184" height="109" /></a></li>
<li><a href="#" target="_blank"><img src="img/04.jpg" width="184" height="109" /></a></li>
</ul>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<div>
<ul id="scrool_wrap">
<li><a href="#" target="_blank"><img src="img/01.jpg" width="184" height="109" /></a></li>
<li><a href="#" target="_blank"><img src="img/02.jpg" width="184" height="109" /></a></li>
<li><a href="#" target="_blank"><img src="img/03.jpg" width="184" height="109" /></a></li>
<li><a href="#" target="_blank"><img src="img/04.jpg" width="184" height="109" /></a></li>
</ul>
</div>