欢迎来到酱油妹!织梦模板,dede模板下载,织梦cms模板,免费网站模板下载站

酱油妹

DEDE图片无缝横向滚动

企业模板

用DEDECMS网站建设时,有时可能需要完成一排图片横向无缝滚动的成效,常常用到这种样式的有商品展示,其实做出无缝的图片横向滚动非常简单。整理一下从网上查到的一个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、把下面代码放到需要滚动的图片列表的地方,其中红色代码的部分可以替换成DEDE的图片列表代码。
<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 src="/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.offsetWidthelse{tab.scrollLeft++;}}var MyMar=setInterval(Marquee,speed);tab.onmou网站优化ver=function() {clearInterval(MyMar)};tab.onmou网站优化ut=function() {MyMar=setInterval(Marquee,speed)};--></script>
3、经过上面的设置后,图片列表就应该可以横向向左运动了。


希望以上内容可以解决您的问题!
如有其他问题欢迎大家一起交流学习!
作者:酱油妹 来源:互联网 关注: 时间:2021-01-13 08:46
版权声明:凡注明来源为www.jiangyoumei.com的均为本站原创,转载请注明来源。
本文网址:http://www.jiangyoumei.com/jiaocheng/jiqiao/20210114/10998.html
►凡本站提供教程均已验证教程的准确性。
►为提高用户在织梦后台添加栏目的灵活性(可随意添加/删除栏目),并保持(管理后台添加/删除栏目)与前端网站栏目的一致,本站模板中栏目均未固定,用户直接搜索typeid=''并替换''中的数字为所需栏目id即可。
►本站提供各种类型织梦模板!希望在这里找到喜欢的。下载本站模板,用户直接替换相关文字和图片即可。
►本站仅提供织梦模板即(DEDE模板),(除另外说明)均不带织梦安装程序及数据,用户直接覆盖默认模板即可。
►本站所有资源(包括源码、模板、插件等)仅供学习与参考,请勿用于商业用途。
►如有其他问题,请加网站客服QQ(375750496)进行交流。
相关织梦教程
在线客服

织梦模板 整站模板 新手教程 使用技巧