非常平滑的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. Java并发编程原理与实战七：线程带来的风险

    在并发中有两种方式,一是多进程,二是多线程,但是线程相比进程花销更小且能共享资源.但使用多线程同时会带来相应的风险,本文将展开讨论. 一.引言 多线程将会带来几个问题: 1.安全性问题 线程安全性可能 ...

  2. asp.net后台操作javascript:confirm返回值

    在asp.net中使用confirm可以分为两种: 1.没有使用ajax,confirm会引起也面刷新 2.使用了ajax,不会刷新 A.没有使用ajax,可以用StringBuilder来完成. ( ...

  3. 如何定制Gtk版Emacs的Widget外观

    当我们使用 xlib 版的Emacs时,可以通过 XResource 定义 Emacs 的菜单 栏.工具条.滚动条的外观. 现在,在Linux上我们大多使用 gtk版的Emacs,是否还有办法定义 E ...

  4. # 20155209 2016-2017-2 《Java程序设计》第六周学习总结

    20155209 2016-2017-2 <Java程序设计>第六周学习总结 教材学习内容总结 java中I/O操作主要是指使用Java进行输入,输出操作. Java所有的I/O机制都是基 ...

  5. 20155307 2016-2017-2 《Java程序设计》第5周学习总结

    20155307 2016-2017-2 <Java程序设计>第5周学习总结 教材学习内容总结 这两章主要讲的是如何处理程序中的异常情况,对于错误,java会将其打包成对象,可以用&quo ...

  6. translate 与 相对、绝对定位

    垂直水平居中是日常前端开发当中一个常见的需求,在支持 CSS3 属性的现代浏览器当中,有一个利用 CSS3 属性的垂直水平居中方法: position absolute; :; :; :transla ...

  7. 关于runOnUiThread()与Handler两种更新UI的方法

    在Android开发过程中,常需要更新界面的UI.而更新UI是要主线程来更新的,即UI线程更新.如果在主线线程之外的线程中直接更新页面显示常会报错.抛出异常:android.view.ViewRoot ...

  8. python3之线程与进程

    1.CPU运行原理 我们都知道CPU的根本任务就是执行指令,对计算机来说最终都是一串由“0”和“1”组成的序列.CPU从逻辑上可以划分成3个模块,分别是控制单元.运算单元和存储单元,这三部分由CPU内 ...

  9. Linux移植随笔：对tslib库的ts_test测试程序代码的一点分析【转】

    转自:http://www.latelee.org/embedded-linux/porting-linux-tstest-code.html 本文是作者对tslib库的ts_test.c文件进行分析 ...

  10. pre,html转义，abbr缩写，表格table

    <pre></pre>预定义文本标签pre(保留换行和空格) <sdds>对html转义 <abbr title="sddsdsds"&g ...