您的位置：首页 > Web前端 > JQuery

jquery无缝滚动效果

2015-09-06 00:00 671 查看

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="jquery-1.7.2.min.js"></script>

<style>

*{ margin: 0; padding: 0;}

#div1{width: 712px; height: 108px; margin: 100px auto; position: relative; background: red; overflow: hidden;}

#div1 ul{position: absolute; left: 0; top: 0;}

#div1 ul li{ float:left; width: 178px; height: 108px; list-style: none;}

</style>

</head>

<body>

<a class="leftmove" href="javascript:;">向左走</a>

<a class="rightmove" href="javascript:;">向右走</a>

<div id="div1">

<ul>

<li><a href=""><img src="images/1.jpg" alt=""></a></li>

<li><a href=""><img src="images/2.jpg" alt=""></a></li>

<li><a href=""><img src="images/3.jpg" alt=""></a></li>

<li><a href=""><img src="images/4.jpg" alt=""></a></li>

</ul>

</div>

</body>

<script>

$(document).ready(function(){

var len=$(".list").find('li').length;

var objw=$(".list").width();

$(".list").css("width",len*objw*2);

var clo=$(".list").find('li').clone();

$(clo).appendTo(".list");

var speed=2;

var startMove=setInterval(move,30)

function move(){

var objl=$(".list").position().left-speed;

if(objl<-objw){

$(".list").css("left",0)

}

else if(objl>0)

{

$(".list").css("left" ,-objw)

}

else

{

$(".list").css("left" , objl)

}

}

$(".list").find('li').hover(function(){

clearInterval(startMove);

},function(){

startMove=setInterval(move,30)

});

$(".leftmove").click(function(){

speed=2;

});

$(".rightmove").click(function(){

speed=-2;

});

});

</script>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航