js 图片滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片滚动</title>
<link href="css/base.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" language="javascript" src="js/jquery-1.9.1.min.js"></script>
<style>
.picture-box { width: 570px; height: 100px; margin:0 auto; margin-top:300px; background:#d6d6d6; padding-top:10px; padding-bottom:10px;}
.picture-scroll { width:550px; margin:0 auto; height: 100px; overflow: hidden; }
.pic-list { display: block; height: 100px; width: 600px; position:relative; }
.pic-list li { float:left; margin-right:20px; position:absolute; left:0px; top:0px;}
</style>
</head>

<body>
<div class="picture-box" id="">
<div class="picture-scroll">
<ul class="pic-list clearfix" id="PictureList">
<li><a href="#"><img src="img/pic_01.jpg" /></a></li>
<li><a href="#"><img src="img/pic_02.jpg" /></a></li>
<li><a href="#"><img src="img/pic_03.jpg" /></a></li>
<li><a href="#"><img src="img/pic_04.jpg" /></a></li>
<li><a href="#"><img src="img/pic_05.jpg" /></a></li>
<li><a href="#"><img src="img/pic_06.jpg" /></a></li>
</ul>
</div>
</div>

<script>
var left_x=0;
var n=0;
var set;
$("#PictureList li").each(function(index, element) {
$(this).css({"left":index*190});

});

$("#PictureList").mouseenter(function(){
clearTimeout(set);
});
$("#PictureList").mouseleave(function(){
TabPic();
});

TabPic();
function TabPic()
{
$("#PictureList li").each(function(index, element) {
var left=$(this).css("left").replace("px","");
if(left<-590)
{
left=550;
}

$(this).css({"left":left-1});
});

set=setTimeout(TabPic,10);
}

</script>
</body>
</html>

posted @ 2015-06-29 18:31  luoyiming  阅读(79)  评论(0)    收藏  举报