javascript实现的横向图片无缝滚动代码
javascript
python
shell
powershell
python模块
php编程
php实例
asp.net
正则表达式
nginx
apache
linux
linux命令
centos
ubuntu
mysql
sql数据库
css教程
首页
脚本编程
网站编程
数据库
系统管理
服务器管理
网页教程
软件教程
电脑教程
手机教程
工具软件
电子书籍
php实例
shell脚本
jquery选择器
python模拟登录
linux命令
nginx
apache
当前位置：
首页
>
脚本特效
>
图片特效
> 正文
javascript实现的横向图片无缝滚动代码
发布时间：2020-09-02
编辑：
脚本学堂
横向图片无缝滚动代码，全兼容，文字滚动效果。滚动速度可调节(JS第一行)，Speed参数越大速度越慢。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>分享一个横向图文无缝滚动的代码，全兼容</title> </head> <body> <style type="text/css"> <!-- ul,li,div{margin:0; padding:0; font-size:12px;} #demo { width:678px; float:left; overflow:hidden;height:144px; border:none; } #indemo { float: left; width: 800%; } #demo1,#demo2{height:144px;float:left; display:inline-table;} #demo1 li,#demo2 li{ width:127px; height:144px; float:left; padding-left:8px; } #demo1 li img,#demo2 li img{ display:block; background:#ccc; padding:1px; border:1px solid #ccc;} #demo1 li span,#demo2 li span{ width:127px; height:30px; <a href=http://www.jb200.com/article/15092.html target=_blank class=infotextkey>line-height</a>:30px; text-align:center; overflow:hidden;} #demo1 { float: left; } #demo2 { float: left; .lmboxb ul { margin-left:12px; margin-top:5px; } .lmboxb ul li {} .lmboxb ul li a { line-height:24px;} } --> </style> <div id="demo"> <div id="indemo"> <div class="lmboxb" id="demo1"> <ul> <li> <div><a href="#" title="111111111111111"><img src="/source/images/201207/sz001_s1.jpg" width="140" height="106" alt="111111111111111" /></a></div> <div><a href="#">111111111111111</a></div> </li><li> <div><a href="#" title="22222222222222222222"><img src="/source/images/201207/tg001_s2.jpg" width="140" height="106" alt="22222222222222222222" /></a></div> <div><a href="#">22222222222222222222</a></div> </li><li> <div><a href="#" title="111111111111111"><img src="/source/images/201207/sz001_s1.jpg" width="140" height="106" alt="111111111111111" /></a></div> <div><a href="#">111111111111111</a></div> </li><li> <div><a href="#" title="22222222222222222222"><img src="/source/images/201207/tg002_s4.jpg" width="140" height="106" alt="22222222222222222222" /></a></div> <div><a href="#">22222222222222222222</a></div> </li><li> <div><a href="#" title="22222222222222222222"><img src="/source/images/201207/sz001_s1.jpg" width="140" height="106" alt="22222222222222222222" /></a></div> <div><a href="#">22222222222222222222</a></div> </li> </ul> </div> <div id="demo2"></div> </div> </div> <div style="width:100%;"><br /> <br /> <br /> <br /> <br /> <br /> <br /> </div> <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> </body> </html>
提示：可修改代码后再运行!
上一篇：
文本和图片无缝滚动效果，两个无缝滚动实例
下一篇：
jQuery常用的焦点图代码，可做选项卡切换
与 javascript实现的横向图片无缝滚动代码 有关的文章
文本和图片无缝滚动效果，两个无缝滚动实例
一种常风的图片滚动效果-两端带控制按钮
本文标题：
javascript实现的横向图片无缝滚动代码
本页链接：
http://www.jb200.com/tx/131.html
浏览排行
1
显示隐藏分享图标，鼠标放上后显示图标，移
2
纯javascript实现的横向滑动的图片切换容器
3
一种常风的图片滚动效果-两端带控制按钮
4
带Loading效果的图片切换
5
经典的jQuery焦点图代码，JS图片切换特效代
6
jQuery常用的焦点图代码，可做选项卡切换
7
javascript实现的横向图片无缝滚动代码
8
jquery实现的可控制滚动方向图片展示效果
9
jQuery与css实现的个性的图片幻灯片特效代码
10
文本和图片无缝滚动效果，两个无缝滚动实例
栏目分类
菜单导航
网页布局
背景特效
广告代码
图片特效
CSS相关
日期时间
文本链接
表单及按钮
表格相关
计算转换
其它
栏目导航
脚本
服务器
数据库
python
linux
linux命令
shell脚本
javascript
javascript数组
jquery
jquery选择器
jquery事件
jquery菜单
python列表
python爬虫
python模拟登录
php编程
php教程
php面试题
php随机数
php数组
php分页
php正则
php排序
asp.net
批处理
正则表达式
mysql
mysql分页
mysql存储过程
mysql日志
mysql教程
sql数据库
nginx
apache
手机教程
热点文章
1
经典的jQuery焦点图代码，JS图片切换特效代
2
jQuery与css实现的个性的图片幻灯片特效代码
3
显示隐藏分享图标，鼠标放上后显示图标，移
4
JavaScript实现的图片无缝滚动
5
一种常风的图片滚动效果-两端带控制按钮
6
jquery实现的可控制滚动方向图片展示效果
7
文本和图片无缝滚动效果，两个无缝滚动实例
8
javascript实现的横向图片无缝滚动代码
9
jQuery常用的焦点图代码，可做选项卡切换
关于本站
|
网站地图
|
联系我们
|
免责声明
|
友情链接
鄂ICP备13010364号-22
CopyRight © 2010-2021
脚本学堂
Jb200.com , All Rights Reserved.
