演示地址:http://blog.zxtms.net/blog/WorkPace/Jquery/jquerySider/sider.html
演示效果:
html页面代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多张图片无缝滚动实现</title>
<link rel="stylesheet" href="sider.css"/>
<script src="../jquery-1.8.3.js"></script>
<script src="sider.js"></script>
</head>
<body>
<a href="#" id="leftmove">向左走</a>
<a href="#" id="rightmove">向右走</a>
<div class="siderImg">
<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代码:
*{
padding: 0;
margin:0;
}
body{
margin:50px;
}
li{
list-style-type: none;
}
.siderImg{
width:800px;
height: 200px;
border: 5px solid #abcdef;
position: relative;
overflow: hidden; /*内容隐藏溢出,超出部分自动隐藏*/
}
.siderImg ul{
overflow: hidden; /*清除ul浮动*/
width: 1600px;
height:200px;
left: 0px; /*相对于起点*/
position:absolute;
_height:1px; /*IE兼容清除浮动*/
}
.siderImg ul li{
float:left;
cursor: pointer; /*设置鼠标样式为手状*/
}
jquery代码:
/**
多张图片无缝滚动实现
*/
$(document).ready(function(){
var $siderImg = $(".siderImg ul");
var $siderImgHtml = $siderImg.html();
$siderImg.html($siderImgHtml+$siderImgHtml);
var $imgWidth = $siderImg.children().eq(0).css("width"); //img元素的宽度
var $size = $siderImg.children().size(); //img元素的个数
var $ulWidth = $imgWidth.split("px")[0] * $size; //获取ul中img元素的总宽度
$siderImg.css("width",$ulWidth+"px"); //设置ul中宽度
$leftVar=0;
var $temp=-8;
var $interval = null;
//图片滚动方法
var moveImg=function()
{
$leftVar=$leftVar+$temp;
//判断图片滚动方向
if($temp>0)
{
if($leftVar==0)
{
$leftVar =-$ulWidth/2; //向左走重置
}
}
if($temp<0)
{
if($leftVar==-$ulWidth/2)
{
$leftVar = 0; //向右走重置
}
}
$siderImg.css("left",$leftVar+"px");
};
//设置一定时间调用反复调用该函数
interval = setInterval(moveImg,300);
/*鼠标待在元素上面触发该事件*/
$siderImg.mouseover(function(){
clearInterval(interval);
});
/*鼠标移开触发该事件*/
$siderImg.mouseout(function(){
interval = setInterval(moveImg,300);
})
$("#leftmove").click(function(){
$temp = -8;
});
$("#rightmove").click(function(){
$temp = 8;
});
});