18179202050
首页 > 九江网站设计 > 九江网站设计首页ul li向左滚动代码

九江网站设计首页ul li向左滚动代码

时间: 2017-7-3

九江网站设计首页ul li向左滚动代码

html代码:
<div class="wap">
 <div class="anli">
 <h3>工艺展示<em>+++</em></h3>
 <div class="anli_lb">
 
 <div id="demo">
 <div id="indemo">
 <div id="demo1">
 <ul id="S_LIST">
 {$set=array()}
 {$set['cid']=3}
 {$set['pagesize']=10}
 {$set['column']=id,title,pic,content}
 {$articles=alist($set)}
 {loop $articles['list'] as $a}
 <li><a href="{$a['link']}"><img src="{$a['pic']}" alt="{$a['title']}"><p>{$a['title']|text(16)}</p></a></li>
 {/loop} 
 </ul>
 </div>
 <div id="demo2"></div>
 </div>
 </div>
 
 </div>
 </div>
</div>

js代码:
<script>
<!--
var speed=20;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
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>

css代码:
/**gundong**/ 
#S_LIST LI { width:214px; height:auto; float:left; padding: 0px; margin: 0px; list-style-image: none;list-style-type: none;} 
#S_LIST A { DISPLAY: block; MARGIN: 0px; WIDTH: 154px; HEIGHT: auto; TEXT-ALIGN: center;} 
#demo { background: #FFF; overflow:hidden; width: 1200px; height:213px;} 
#demo img {border: 1px solid #F2F2F2;padding:5px;} 
#indemo {float: left;width: 800%;} 
#demo1 {float: left;} 
#demo2 {float: left;}
首页 | 网站建设 | 网站优化 | 地图

Copyright © 2017-2018 九江网站建设   赣ICP备13005967号-1 版权所有