UL LI P 图片加文字无缝滚动
UL LI P 图片加文字无缝滚动
代码如下:
<!-------------------------CSS代码,这里无需注意,------------------------->
<style type="text/css">
.productshow{ float:right; margin-right:10px; width:535px; height:161px; overflow:hidden;
padding-top:12px;}
.productshow ul{ margin:0px; padding:0px;}
.productshow ul li{ float:left; width:182px; height:161px; padding-left:5px; }
.product_img{ width:180px; height:127px; border:1px #c2c2c2 solid;}
.product_oen{ width: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="width: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>
以上内容为本人业余时间整理,部分内容来源网络,如有错误欢迎各位批评指正。
*/