图片的无缝滚动
一、HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="gundong.css" /><!--引入css:link:css;-->
<script src="jquery.js" type="text/javascript"></script>
<script src="gundong.js" type="text/javascript"></script>
</head>
<body>
<a href="javascript:;" class="goLeft">向左走</a><!--a.goLeft+a.goRight快捷键-->
<a href="javascript:;" class="goRight">向右走</a>
<div class="wrap">
<ul>
<li><img src="1.jpg" alt="" /></li>
<li><img src="2.jpg" alt="" /></li>
<li><img src="3.jpg" alt="" /></li>
<li><img src="4.jpg" alt="" /></li>
<li><img src="5.jpg" alt="" /></li>
</ul>
</div>
</body>
</html>二、Css
*{
margin: 0;
padding: 0;
}
img{
border:0;
}
ol, ul,li{list-style: none;} /*重置样式*/
body{
margin: 50px;
}
.wrap{
border:1px solid red;
width: 800px;
height:200px;
position: relative;
overflow:hidden;/*超过框架的部分隐藏*/
}
.wrap ul{
overflow: hidden;/*防止父元素ul脱离文档流*/
_height:1px ;
width:1600px;
position: absolute;
left: 0;
top: 0;
}
.wrap ul li{
float: left;/*左浮动会导致父元素ul脱离文档流的计算；之前需要加overflow;*/
width:200px;/*为了以后JS中改变ul宽度做铺垫*/
}三、Js
$(document).ready(function(){
var oul= $('.wrap ul');
var oulHtml= oul.html();
oul.html(oulHtml+oulHtml)/*或者用oul.append(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);
var speed= -2;
function slider(){
if(speed<0){
if(oul.css('left')==-ulWidth/2+'px'){
oul.css('left',0);
}
oul.css('left','+='+speed+'px');/*"每毫秒累加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(event) {
/* clearInterval()函数的作用是用来清除定时器的 */
clearInterval(timeId);
});
$('.wrap').mouseout(function(event) {
timeId = setInterval(slider,30);/*鼠标移除后继续开启setInterval()函数 */
});
$('.goLeft').click(function(event) {
speed = -2;/*鼠标通过点击控制图片向左走还是向右走 */
});
$('.goRight').click(function(event) {
speed = 2;
});
});