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

无缝滚动图片的js和jquery两种写法

2012-06-12 16:05 609 查看

<!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=gb2312" />
<script language="JavaScript" type="text/javascript" src="js/jquery-1.4.2.js"></script>
<title>无缝滚动图片js和jquery</title>
<style>
*{ margin:0; padding:0;}
.wrap{ margin:100px auto; width:600px; border:1px solid #ccc; height:200px; overflow:hidden;}
.siler{ float:left; width:3000px;}
ul{ list-style:none;}
.siler li{ float:left;}
</style>

</head>

<body>
<div class="wrap" id="wrap">
<ul class="siler" id="siler">
<li class="s1" id="s1">
<ul>
<li><img src="images/01.jpg" /></li>
<li><img src="images/02.jpg" /></li>
<li><img src="images/03.jpg" /></li>
<li><img src="images/04.jpg" /></li>
</ul>
</li>
<li class="s2" id="s2"></li>
</ul>
</div>
<script>
/*var wrap=$(".wrap");
var s1=$(".s1");
var s2=$(".s2");
var time=30;
s2.html(s1.html());
function marquee(){
if(wrap.scrollLeft()>=s1.width())
{
wrap.scrollLeft(0);
}
else{
wrap.scrollLeft(wrap.scrollLeft()+1);
}
}
$(function(){
var s=setInterval(marquee,time);
wrap.hover(function(){
clearInterval(s);
},function(){
s=setInterval(marquee,time);
})

}) //jquery写法
*/
</script>
<script>
function $(id){return document.getElementById(id);}

var time=30;
var wrap=$("wrap");
var s1=$("s1");
var s2=$("s2");

s2.innerHTML=s1.innerHTML;
function marquee(){
if(wrap.scrollLeft>=s1.offsetWidth){
wrap.scrollLeft-=s1.offsetWidth;
}
else{
wrap.scrollLeft++;
}
}

var siling=setInterval(marquee,time);
wrap.onmouseover=function(){
clearInterval(siling);
}
wrap.onmouseout=function(){
siling=setInterval(marquee,time);
}

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

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

标签：

相关文章推荐

新的分享

章节导航