非常平滑的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. Mongodb 笔记04 特殊索引和集合、聚合、应用程序设计

    特殊索引和集合 1. 固定集合:固定集合需要事先创建好看,而且它的大小是固定的.当固定集合被占满时,如果再插入新文档,固定集合会自动将最老的文档从集合中删除. 2. 创建固定集合:db.createC ...

  2. linq的语法和案例

    本篇逐一介绍linq各个关键字的用法(from,select,group,into等),本篇所有的案例都是用linqpad来完成的(官方地址:http://www.linqpad.net/),建议想学 ...

  3. isscroll插件 实现下拉加载 上啦刷新 转

    http://www.jb51.net/article/98394.htm 下面是别人的代码 <!DOCTYPE html> <html> <head> <m ...

  4. Android 6.0 7.0 8.0 一个简单的app内更新版本-okgo app版本更新

    登陆时splash初始页调用接口检查app版本.如有更新,使用okGo的文件下载,保存到指定位置,调用Android安装apk. <!-- Android 8.0 (Android O)为了针对 ...

  5. bzoj千题计划130：bzoj1305: [CQOI2009]dance跳舞

    http://www.lydsy.com/JudgeOnline/problem.php?id=1305 每个人拆为喜欢(yes)和不喜欢(no)两个点 二分答案 1.每两个人之间只能跳一次 喜欢则 ...

  6. python学习笔记2-字符串操作

    一.字符串切片 #切片也能适合字符串 tittle='今 天 发 苹 果' for i t in enumerate(tittle): #enumerate可以同时循环下标和值 print('%s:% ...

  7. angularJS 控制输入的百分数在0%-100%之间

    想了老半天了,记录一下 app.directive("percentageCheck", function () { return { restrict: 'A', require ...

  8. 【leetcode 简单】 第八十五题 两个数组的交集 II

    给定两个数组,编写一个函数来计算它们的交集. 示例 1: 输入: nums1 = [1,2,2,1], nums2 = [2,2] 输出: [2,2] 示例 2: 输入: nums1 = [4,9,5 ...

  9. 天梯赛 L2-013. （并查集） 红色警报

    题目链接 题目描述 战争中保持各个城市间的连通性非常重要.本题要求你编写一个报警程序,当失去一个城市导致国家被分裂为多个无法连通的区域时,就发出红色警报.注意:若该国本来就不完全连通,是分裂的k个区域 ...

  10. sklearn评估模型的方法

    一.acc.recall.F1.混淆矩阵.分类综合报告 1.准确率 第一种方式:accuracy_score # 准确率import numpy as np from sklearn.metrics ...