非常平滑的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. 关于Python运行代码报错：SyntaxError: Non-ASCII character '\xe5' in file的解决方法

    运行python文件报错如上 解决办法: # -*- coding: UTF- -*- 或者 #coding=utf- (注:此语句一定要添加在源代码的第一行) 原因:Python默认是以ASCII作 ...

  2. bzoj千题计划150：bzoj2738: 矩阵乘法

    http://www.lydsy.com/JudgeOnline/problem.php?id=2738 整体二分 二维树状数组累积 #include<cstdio> #include&l ...

  3. okhttp 简单用法

    1.gradle 依赖 github 中查找最新的 2.MyApplication oncreate 中: @Override public void onCreate () { super.onCr ...

  4. spring框架学习（八）spring管理事务方式之注解配置

    1.DAO AccountDao.java package cn.mf.dao; public interface AccountDao { //加钱 void increaseMoney(Integ ...

  5. spring-boot RestTemplate 连接池

    以前我们项目都是基于Apache HttpClient 连接池进行web 接口调用,后来用spring-boot, 发现 RestTemplate 挺好用. 简单介绍下: 什么是RestTemplat ...

  6. codeforces9D How many trees?

    传送门:http://codeforces.com/problemset/problem/9/D [题解] 树形dp,f(i,j)表示i个节点,高度为j的方案数,枚举左子树大小和哪一个子树高度为j-1 ...

  7. codeforces15E Triangles

    传送门:http://codeforces.com/problemset/problem/15/E [题解] # include <bits/stdc++.h> using namespa ...

  8. mysql修改表操作

    一: 修改表信息 1.修改表名 alter table test_a rename to sys_app; 2.修改表注释 alter table sys_application comment '系 ...

  9. Java NIO之拥抱Path和Files

    Java面试通关手册(Java学习指南)github地址(欢迎star和pull):https://github.com/Snailclimb/Java_Guide 历史回顾: Java NIO 概览 ...

  10. flask基础之请求处理核心机制(五)

    前言 总结一下flask框架的请求处理流程. 系列文章 flask基础之安装和使用入门(一) flask基础之jijia2模板使用基础(二) flask基础之jijia2模板语言进阶(三) flask ...