87,924
社区成员
发帖
与我相关
我的任务
分享
<style type="text/css">
#demo {
width:614px;
height:146px;
overflow: hidden;
white-space: nowrap;
background:#ffffff;
}
#demo1, #demo2, #demo1 ul, #demo2 ul, #demo1 ul li, #demo2 ul li {
display:inline;
}/*设置ul和li横排*/
</style>
<div id="demo">
<div id="demo1">
<ul>
<li><img src="../Upload/pic/200931763560065.gif"/><br />
<a href="Product_View.asp?id=5">1111111</a></li>
<li><img src="../Upload/pic/200931763609125.gif" /><br />
<a href="Product_View.asp?id=6">22222222222</a></li>
<li><img src="../Upload/pic/200931763720001.gif"/><br />
<a href="Product_View.asp?id=7">33333333</a></li>
<li><img src="../Upload/pic/20096662615109.jpg"/><br />
<a href="Product_View.asp?id=10">444444444</a></li>
<li><img src="../Upload/pic/20096662726125.jpg" /><br />
<a href="Product_View.asp?id=11">5555555555</a></li>
</ul>
</div>
<div id=demo2></div>
</div>
<script>
var speed3=25//速度数值越大速度越慢
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed3)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed3)}
</script>
<style type="text/css">
#demo {
width:614px;
height:246px;
overflow: hidden;
white-space: nowrap;
background:#ffffff;
}
#demo1 ul, #demo2 ul, #demo1 ul li, #demo2 ul li {float:left;padding:0;margin:0;text-align:center}/*float:left;设置ul和li横排*/
#demo1, #demo2 {width:900px;display:inline;}/*display:inline;设置div横排*/
#demo img {border:0;width:180px;height:120px;}
</style>
<div id="demo">
<div id="demo1">
<ul>
<li><img src="../Upload/pic/200931763560065.gif"/><br />
<a href="Product_View.asp?id=5">11</a></li>
<li><img src="../Upload/pic/200931763609125.gif" /><br />
<a href="Product_View.asp?id=6">22</a></li>
<li><img src="../Upload/pic/200931763720001.gif"/><br />
<a href="Product_View.asp?id=7">33</a></li>
<li><img src="../Upload/pic/20096662615109.jpg"/><br />
<a href="Product_View.asp?id=10">44</a></li>
<li><img src="../Upload/pic/20096662726125.jpg" /><br />
<a href="Product_View.asp?id=11">55</a></li>
</ul>
</div>
<div id=demo2></div>
</div>
<script>
var speed3=5//速度数值越大速度越慢
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed3)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed3)}
</script>
<style type="text/css">
#demo {
width:614px;
height:246px;
overflow: hidden;
white-space: nowrap;
background:#ffffff;
}
#demo1, #demo2, #demo1 ul, #demo2 ul, #demo1 ul li, #demo2 ul li {
display:inline;
}/*设置ul和li横排*/
#demo1 ul, #demo2 ul, #demo1 ul li, #demo2 ul li {float:left;padding:0;margin:0;text-align:center}
#demo1, #demo2 {width:900px;float:left;}
#demo2 {position:relative;left:900px;top:-138px}
#demo img {border:0;width:180px;height:120px;}
</style>
<div id="demo">
<div id="demo1">
<ul>
<li><img src="../Upload/pic/200931763560065.gif"/><br />
<a href="Product_View.asp?id=5">11</a></li>
<li><img src="../Upload/pic/200931763609125.gif" /><br />
<a href="Product_View.asp?id=6">22</a></li>
<li><img src="../Upload/pic/200931763720001.gif"/><br />
<a href="Product_View.asp?id=7">33</a></li>
<li><img src="../Upload/pic/20096662615109.jpg"/><br />
<a href="Product_View.asp?id=10">44</a></li>
<li><img src="../Upload/pic/20096662726125.jpg" /><br />
<a href="Product_View.asp?id=11">55</a></li>
</ul>
</div>
<div id=demo2></div>
</div>
<script>
var speed3=5//速度数值越大速度越慢
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed3)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed3)}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
#ss{width:130px;height:105px;margin:0 auto;overflow: hidden;white-space: nowrap;background:#ffffff; border:1px solid #000000}
#ss ul{margin:0px; padding:0px;width:650px;}
#ss ul li{margin:0px; padding:0px; list-style:none; float:left;display:block;}
</style>
<body>
<div id='ss'>
<ul>
<li><img src="http://img1.qq.com/news/pics/17522/17522502.jpg"/><br>111111111111111</li>
<li><img src="http://img1.qq.com/news/pics/17515/17515126.jpg"/><br>222222222222222</li>
<li><img src="http://img1.qq.com/news/pics/17515/17515135.jpg"/><br>333333333333333</li>
<li><img src="http://img1.qq.com/news/pics/17515/17515141.jpg"/><br>444444444444444</li>
<li><img src="http://img1.qq.com/news/pics/17522/17522502.jpg"/><br>111111111111111</li>
</ul>
</div>
<script>
var speed =10;
function $(id){return document.getElementById(id)};
function $$(obj,elm){return obj.getElementsByTagName(elm)}
setInterval(function(){$('ss').scrollLeft<$$($('ss'),'ul')[0].offsetWidth-$$($('ss'),'li')[0].offsetWidth?($('ss').scrollLeft++):($('ss').scrollLeft=0)},speed)
</script>