非常平滑的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图片滚动代码（无缝、平滑）的更多相关文章

  1. 常用JS图片滚动（无缝、平滑、上下左右滚动）

    常用JS图片滚动(无缝.平滑.上下左右滚动)代码大全 <head><-----></head><body> <!--向下滚动代码开始-->& ...

  2. 常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全

    innerHTML:    设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度. scrollLeft:   设置或获取位于对象左边界和窗口中目前可见内容的 ...

  3. HTML滚动字幕代码参数详解及Js间隔滚动代码

    html文字滚动代码 <marquee style="WIDTH: 388px; HEIGHT: 200px" scrollamount="2" dire ...

  4. 网站开发，推荐使用SuperSlide 插件-Tab标签切换，图片滚动，无缝滚动，焦点图

    SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新.网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解 ...

  5. HTML网页图片滚动代码

    <!--下面是向上滚动代码--> <div id=butong_net_top style=overflow:hidden;height:100;width:90;> < ...

  6. html 图片滚动代码

    我自己也在用的,网页常用!分享出来 最简单易懂源码 <!--下面是向上滚动代码--> <div id=butong_net_top style=overflow:hidden;hei ...

  7. 可以左右移动横向无缝滚动的JS图片展示代码

    在酷站网站下的,具体路径忘了,稍微改了一下,让它看起来像组滑动 1)被引用的js文件ScrollPic.js ?){){i+=l.length;)I=document.cookie.length;o= ...

  8. Js图片缩放代码 鼠标滚轮放大缩小 图片向右旋转

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Js图片滚动

    参考博文:http://blog.chinaunix.net/uid-12304670-id-2947067.html <%@ Page Title="" Language= ...

随机推荐

  1. mq使用场景、不丢不重、时序性

    mq使用场景.不丢不重.时序性.削峰 参考: http://zhuanlan.51cto.com/art/201704/536407.htm http://zhuanlan.51cto.com/art ...

  2. linux netstat查看服务和端口状态

    netstat可以查看linux系统中正在使用的服务和端口情况 常见参数 -a (all)显示所有选项,默认不显示LISTEN相关-t (tcp)仅显示tcp相关选项-u (udp)仅显示udp相关选 ...

  3. Spring IOC 容器

    <bean name="userBean" class="com.nuts.demo.spring.UserBean"> <property ...

  4. Richard Stallman：让我们关注和尊敬自由软件教父

    1953年,Richard Stallman生于美国纽约曼哈顿区.在度过了并不快乐的童年之后,他在哈佛大学找到了自己的家.在MIT人工智能实验室工作期间,展露出了自己的计算 机天赋.对他来说,开发操作 ...

  5. element-UI 表单图片判空验证问题

    本文地址:http://www.cnblogs.com/veinyin/p/8567167.html  element-UI的表单验证似乎并没有覆盖到文件上传上面,当我们需要在表单里验证图片时,就会出 ...

  6. Nginx配置location及rewrite规则

    Nginx配置location及rewrite规则 示例: location  = / {   # 精确匹配 / ,主机名后面不能带任何字符串   [ configuration A ] } loca ...

  7. python初步学习-python 模块之 sys（持续补充）

    sys sys 模块包括了一组非常实用的服务,内含很多函数方法和变量 sys 模块重要函数变量 sys.stdin 标准输出流 sys.stdout 标准输出流 sys.stderr 标准错误流 sy ...

  8. Linux input子系统学习总结（一）---- 三个重要的结构体

    一 . 总体架构 图 上层是图形界面和应用程序,通过监听设备节点,获取用户相应的输入事件,根据输入事件来做出相应的反应:eventX (X从0开始)表示 按键事件,mice 表示鼠标事件 Input ...

  9. aarch64_o2

    opensips-event_rabbitmq-2.2.3-1.fc26.aarch64.rpm 2017-03-10 01:22 42K fedora Mirroring Project opens ...

  10. aarch64_m1

    MAKEDEV-3.24-18.fc26.aarch64.rpm 2017-02-14 08:46 99K fedora Mirroring Project MUMPS-5.0.2-8.fc26.aa ...