借鉴了博客园上
http://www.cnblogs.com/blueSkys/archive/2010/03/15/1686476.html
该博主的滚动图片代码。
修改了一个div版本了,向左滚动图片代码:
<html>
<head>
<title></title>
</head>
<body>
<!--下面是向左滚动代码-->
<div );
colee_left2.innerHTML=colee_left1.innerHTML
function Marquee3(){
if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth 是对象的可见宽度
colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽,不包边线宽度
else{
colee_left.scrollLeft++
}
}
var MyMar3=setInterval(Marquee3,speed)
colee_left.onmouseover=function() {clearInterval(MyMar3)}
colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}
</script>
</body>
</html>
jquery 的代码实现:
如果你是用后台生成的代码,并且滚动的图片不只是一份,比如有一个tab标签做的切换,然后没个标签里的内容都是滚动图片
并且存在每个标签里的内容的HTML结构都一致的,这是,我们可以使用这样的jquery:
<script type="text/javascript">
$(function(){
$.each($('#tab_conbox2_foot').children('li'),function(i,obj){
marqueePredo(i,obj);
});
function marqueePredo(i,liObj)
{
//使用div时,请保证colee_left2与colee_left1是在同一行上
var speed=10//速度数值越大速度越慢
var colee_left=jQuery(liObj);
var colee_left2=colee_left.children().children(".tabimg2");//.children("tabimg2");
var colee_left1=colee_left.children().children(".tabimg");//.children("tabimg");
colee_left2.html(colee_left1.html());
var Marquee3=function(){
//alert(5);
//alert(colee_left2.width());
//alert(colee_left.scrollLeft());
if(colee_left2.width()-colee_left.scrollLeft()<=0)//offsetWidth 是对象的可见宽度
{
colee_left.scrollLeft(colee_left.scrollLeft()-=colee_left1.width())//scrollWidth 是对象的实际内容的宽,不包边线宽度
}
else{
var t=colee_left.scrollLeft()+1;
colee_left.scrollLeft(t);
//alert(t);
//alert(7)
}
}
var MyMar3=setInterval(Marquee3,speed);
colee_left.mouseover(function() {clearInterval(MyMar3)});
colee_left.mouseout(function() {MyMar3=setInterval(Marquee3,speed)});
}
});
</script>
HTML:
<UL class="tab_conbox" id=tab_conbox2_foot>
这里借用了织梦的标签,意思就是标签里面的LI会去展现类型为15和16两个滚动图片(多个LI里面的HTML内容完全一样)。
{dede:channelartlist typeid='15,16'}
<LI class="tab_con" style="float:left;width:1000px; overflow:hidden;">
<div ></div>
</div>
</LI>
{/dede:channelartlist}
</UL>