UL LI P 图片加文字无缝滚动

UL LI P 图片加文字无缝滚动


 

代码如下：

 <!-------------------------CSS代码，这里无需注意，------------------------->

<style type="text/css">
.productshow{ float:right; margin-right:10px; 535px; height:161px; overflow:hidden;

padding-top:12px;}
.productshow ul{ margin:0px; padding:0px;}
.productshow ul li{ float:left; 182px; height:161px; padding-left:5px; }
.product_img{ 180px; height:127px; border:1px #c2c2c2 solid;}
.product_oen{ 182px; height:24px; background-color:#c2c2c2; text-align:center; padding-

top:8px; color:#000000;}
</style>


 <!-------------------------这里得看清楚了，加粗的为重点------------------------->

<div class="productshow"id="atuo_recomm_info">
  <div id="indemo" style="1400%;float:left;height:161px;"><div id="atuo_recomm_pic"

style="float:left; height:161px;">
   <ul>
    <li><p class="product_img"><a href="product_third.asp" target="_blank"><img

src="images/bt_6.jpg" border="0" /></a></p><p class="product_oen"><a href="product_third.asp"

target="_blank">BT-2556 1</a></p></li>
 <li><p class="product_img"><a href="product_third.asp" target="_blank"><img

src="images/bt_6.jpg" border="0" /></a></p><p class="product_oen"><a href="product_third.asp"

target="_blank">BT-2556 2</a></p></li>
 <li><p class="product_img"><a href="product_third.asp" target="_blank"><img

src="images/bt_6.jpg" border="0" /></a></p><p class="product_oen"><a href="product_third.asp"

target="_blank">BT-2556 3</a></p></li>
 <li><p class="product_img"><a href="product_third.asp" target="_blank"><img

src="images/bt_6.jpg" border="0" /></a></p><p class="product_oen"><a href="product_third.asp"

target="_blank">BT-2556 4</a></p></li>
 <li><p class="product_img"><a href="product_third.asp" target="_blank"><img

src="images/bt_6.jpg" border="0" /></a></p><p class="product_oen"><a href="product_third.asp"

target="_blank">BT-2556 5</a></p></li>
 <li><p class="product_img"><a href="product_third.asp" target="_blank"><img

src="images/bt_6.jpg" border="0" /></a></p><p class="product_oen"><a href="product_third.asp"

target="_blank">BT-2556 6</a></p></li>
   </ul>
  </div>
  <div id="atuo_recomm_none" style="float:left;"></div></div></div>

 

<!-------------------------JS代码，套进去就行了，如果直接放在页面的话要放在以上代码的最下面哦，

如果要放到外面，以上代码下面要加<script type="text/javascript">ScrollImgLeft();</script>  ，对

类。头部别忘加引用JS代码哦 ------------------------->
 <script>
function ScrollImgLeft(){
var speed=20;
var tab;
var tab1;
var tab2;
tab=document.getElementById("atuo_recomm_info");
tab1=document.getElementById("atuo_recomm_pic");
tab2=document.getElementById("atuo_recomm_none");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
}
</script>