織夢圖片無縫橫向滾動,織夢教程
導讀:織夢教程織夢教程用織夢建站時，有時可能需要完成一排圖片橫向無縫滾動的效果，經常用到這種樣式的有產品展示，其實做出無縫的圖片橫向滾動很簡單。懶鳥飛整理一下從網上查到的一個js代碼織夢手機模板dede5.7模板。
用織夢建站時，有時可能需要完成一排圖片橫向無縫滾動的效果，經常用到這種樣式的有產品展示，其實做出無縫的圖片橫向滾動很簡單。跟版網整理一下從網上查到的一個js代碼的使用方法如下：
1、把下面樣式放到css文件中，用來調整圖片大小樣式。
<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
2、把下面代碼放到需要滾動的圖片列表的位置，其中紅色代碼的部分可以替換成織夢的圖片列表代碼。
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="/jscss/demoimg/wall_s1.jpg" border="0" /></a>
<a href="#"><img src="/jscss/demoimg/wall_s2.jpg" border="0" /></a>
<a href="#"><img sr織夢首頁模板c="/jscss/demoimg/wall_s3.jpg" border="0" /></a>
</div>
<div 模板織夢id="demo2"></div>
</div>
</div>
<!--下面是js的代碼-->
<script>
<!--
var speed=10;
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>
3、經過上面的設置后，圖片列表就應該可以橫向向左運動了。相關織夢手機模板dede5.7模板。
聲明: 本文由我的SEOUC技術文章主頁發布于:2023-07-19 ，文章織夢圖片無縫橫向滾動,織夢教程主要講述橫向,標簽,織夢網站建設源碼以及服務器配置搭建相關技術文章。轉載請保留鏈接: http://www.bifwcx.com/article/web_31026.html
