JS图片滚动代码(无缝、平滑)
非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止。它的特点是JS和图片地址分离,这样做你就经易的从数据库动态调用每张图片的地址,方便控制,因此它非常的应用。
<!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=gb2312" />
<title>图片滚动</title>
</head>
<body>
<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>
<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>
<a href="#"><img src="/jscss/demoimg/wall_s4.jpg" border="0" /></a>
<a href="#"><img src="/jscss/demoimg/wall_s5.jpg" border="0" /></a>
<a href="#"><img src="/jscss/demoimg/wall_s6.jpg" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
<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>
</body>
</html>
JS图片滚动代码(无缝、平滑)的更多相关文章
- 常用JS图片滚动(无缝、平滑、上下左右滚动)
常用JS图片滚动(无缝.平滑.上下左右滚动)代码大全 <head><-----></head><body> <!--向下滚动代码开始-->& ...
- 常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全
innerHTML: 设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度. scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的 ...
- HTML滚动字幕代码参数详解及Js间隔滚动代码
html文字滚动代码 <marquee style="WIDTH: 388px; HEIGHT: 200px" scrollamount="2" dire ...
- 网站开发,推荐使用SuperSlide 插件-Tab标签切换,图片滚动,无缝滚动,焦点图
SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新.网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解 ...
- HTML网页图片滚动代码
<!--下面是向上滚动代码--> <div id=butong_net_top style=overflow:hidden;height:100;width:90;> < ...
- html 图片滚动代码
我自己也在用的,网页常用!分享出来 最简单易懂源码 <!--下面是向上滚动代码--> <div id=butong_net_top style=overflow:hidden;hei ...
- 可以左右移动横向无缝滚动的JS图片展示代码
在酷站网站下的,具体路径忘了,稍微改了一下,让它看起来像组滑动 1)被引用的js文件ScrollPic.js ?){){i+=l.length;)I=document.cookie.length;o= ...
- Js图片缩放代码 鼠标滚轮放大缩小 图片向右旋转
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Js图片滚动
参考博文:http://blog.chinaunix.net/uid-12304670-id-2947067.html <%@ Page Title="" Language= ...
随机推荐
- Linux清屏命令
1:clear 2:Ctrl+L 3:printf "\033c" 4:ALT+F8 By KillerLegend Ref:http://www.coolcoder.in/201 ...
- nginx配置详情(总结)
Nginx简介 Nginx是一款开源代码的高性能HTTP服务器和反向代理服务器,同时支持IMAP/POP3/SMTP代理服务 Nginx工作原理 Nginx由内核和模块组成,完成工作是通过查找配置文件 ...
- http协议POST请求头content-type主要的四种取值
介绍: 在此之前对content-type理解很肤浅,因此必须记录下来现在的理解,以便回顾 Content-Type,从名字上可以理解为内容类型,但在互联网上专业术语叫“媒体类型”,即MediaTyp ...
- IntelliJ IDEA编码格式设置
之前一直使用eclipse能够熟悉的设置工程和文件的编码格式,现在换成IntelliJ IDEA设置编码格式的地方有点变化,按照如图所示进行设置: 这里要将Transparent native-to- ...
- 给Ubuntu替换阿里的源
1. 阿里巴巴镜像源站点 有所有linux的源的镜像加速. 点击查看介绍 2. 具体配置方法在这里 copy: ubuntu 18.04(bionic) 配置如下 创建自己的配置文件,比如创建文件 / ...
- 20155330 2016-2017-2 《Java程序设计》第八周学习总结
20155330 2016-2017-2 <Java程序设计>第八周学习总结 教材学习内容总结 学习目标 了解NIO 会使用Channel.Buffer与NIO2 会使用日志API.国际化 ...
- Cookie详解、ASP.NET核心知识(7)
无状态的http协议 1.回顾http协议 Http协议是请求响应式的,有请求才有响应,是无状态的,不会记得上次和网页“发生了什么”. 关于http协议的这种特点,黑兔在前面的这三篇博文中进行了详细的 ...
- Mother's Mil 母亲的牛奶
Description 农民约翰有三个容量分别是A,B,C升的桶,A,B,C分别是三个从1到20的整数,最初,A和B桶都是空的,而C桶是装满牛奶的.有时,约翰把牛奶从一个桶倒到另一个桶中,直到被灌桶装 ...
- CentOS配置163yum源
1.下载repo文件 wget http://mirrors.163.com/.help/CentOS6-Base-163.repo 2.备份并替换系统的repo文件 [root@localhost ...
- C++ 之Boost 实用工具类及简单使用
本文将介绍几个 Boost 实用工具类,包括 tuple.static_assert.pool.random 和 program_options等等.需要对标准 STL 具备一定的了解才能充分理解本文 ...