非常平滑的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. 线程中wait/notify/notifyAll的用法

    前言 多线程时,最关注的就是线程同步,线程间的同步一般用锁来实现,常见的锁就是synchronized和lock.用了synchronized,就不得不提到wait/notify/notifyAll. ...

  2. 调用weka模拟实现 “主动学习“ 算法

    主动学习: 主动学习的过程:需要分类器与标记专家进行交互.一个典型的过程: (1)基于少量已标记样本构建模型 (2)从未标记样本中选出信息量最大的样本,交给专家进行标记 (3)将这些样本与之前样本进行 ...

  3. 视差插件parallarx

    github上的demo,自己拿来改了改. <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  4. 动态引用外部的Javascript脚本文件[转]

    你可以参考下面方法,进行动态为网页引用外部的Javascript脚本文件.代码写在Page_Init方法内. VB.NET: 下图是运行时,查看HTML的源代码: C#:

  5. asp.net中GridView传多个值到其它页面的方法

    网站开发中,在页面之间的跳转,经常会用到传值,其中可能会传递多个值. 一.CommadArgument传多个值到其他页面. 像Gridview dataList repeater等数据绑定控件中,可以 ...

  6. github 新创建repositories

    1. 在github上新建repo 2. 找到改repo的地址,用命令git clone https://....,  拉取到本地 3. 打开一个单独的窗口,打开此文件夹 4. 创建自己的python ...

  7. 网络爬虫框架Heritrix中Modules的各项说明

    1)Select Crawl Scope:Crawl Scope 用于配置当前应该在什么范围内抓取网页链接.例如选择 BroadScope 则表示当前的抓取范围不受限制,选择 HostScope 则表 ...

  8. redis写定时任务获取root权限

    前提: 1.redis由root用户启动. 2.开启cron的时候,/var/spool/cron linux机器下默认的计划任务,linux会定时去执行里面的任务. 启动服务 :/sbin/serv ...

  9. Css3帧动画深入探寻，讲点项目中实际会碰到的问题

    先加个副标题XD --如何解决background-size为100%下处理@keyframes 正是在项目中遇到副标题,才引起我更深入的探寻 先略带一下基本的css3动画 css3的动画实现是通过属 ...

  10. vue-cli环境搭建初探！

    1.先安装nodejs环境 https://npm.taobao.org/mirrors/node (选择版本) 下一步 下一步 默认安装就行 2.检查node和npm的是否成功安装 node -v ...