JS图片无缝、平滑滚动代码

非常平滑的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>

赞 (0)

相关推荐

  • js操作滚动条事件实例

    本文实例讲述了js操作滚动条事件的方法.分享给大家供大家参考.具体分析如下: 之前一直很纳闷,如何监视滚动条的事件,今天终于有点明白了. 下边代码,是监听滚动条只要移动,下方的返回顶部的div显示与隐藏的代码 window.onscroll = function () { var t = document.documentElement.scrollTop || document.body.scrollTop; if (t > 0) { $(".cbbfixed").css(&q

  • 原生js实现类似fullpage的单页/全屏滚动

    前言 单页/全屏滚动页面越来越常见了,它多用于产品介绍.招聘等内容较少的简单页面.针对这种效果也出现了不少 jQuery 插件,本文实现的效果类似于fullpage的单屏滚动,使用原生JS实现,不依赖任何js库: css代码: html,body {height:100%;} body {margin:0px;} div {height:100%;} html代码: <div style="background:#FEE;"></div> <div sty

  • js实现的文字横向无间断滚动

    我一开始想到的标签是<marquee>,因为它可以实现横向滚动.经理说它的起始位置从最右边出来的,能不能将它改成从中间出来,或者从最左边出来也行.查了相关资料,才知道<marquee>无法指定起始位置.后来在网上找到一段代码,它是用图片来实现的,我将图片改成文字之后,顺利地实现了我所想要的功能.代码如下: #gongao{width:1000px;height:30px;overflow:hidden;line-height:30px;font-size:13px;font-fam

  • fullPage.js和CSS3实现全屏滚动效果

    fullPage.js和CSS3实现全屏滚动效果

    首先说一下fullpage,它是一个jquery的插件,用来实现鼠标向上向下滑动,就会自动切换到上一屏或者下一屏,对于要做一些高大上的效果确实是一个很好的插件.首先先展示一下基本的效果图. 总共有四屏的内容 当鼠标每次上下滑动时就会一整屏的切换. 第一屏是用一个图片,其他的三屏都是由左侧的三个图片和右侧的两个图片组成的. 这三屏左侧的图片展开方式不同,所以就更有炫酷的效果. 第二屏的三个图片是当页面显示时从下到上依次出来到正确的位置. 第三屏的三个图片是当页面显示时从左到右依次展开到正确的位置.

  • jQuery插件fullPage.js实现全屏滚动效果

    jQuery插件fullPage.js实现全屏滚动效果

    本文实例为大家分享了全屏滚动插件fullPage.js的具体使用方法,供大家参考,具体内容如下 0.01 基本演示  的HTML 布局 以及js 代码 //需要连接 连接的三个文件 <link rel="stylesheet" href="css/jquery.fullPage.css"> //css文件 <script src="js/jquery-1.8.3.min.js"></script> //jQue

  • js滚动条回到顶部的代码

    虽然平滑性处理的不好,但非常适合学习 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="tex

  • 彻底搞懂JS无缝滚动代码

    在做个东西要滚动代码 而且是无缝的 搞了半天还是不行  决心一定要把这个问题搞定 经过研究 也不难 代码如下: 程序代码 复制代码 代码如下: <div id=demo style=overflow:auto;height:180;width:200;background:#009900;color:#006600>  <table  align=top>  <tr>  <td id=demo1 valign=top> <p>aaaaaaaaaa

  • fullpage.js全屏滚动插件使用实例

    fullpage.js全屏滚动插件使用实例

    刚做好公司网站,通过全屏滚动,显著提高了官网的浏览体验.遂总结一下使用fullpage.js的方法.欢迎指正 一. fullpage.js简介 fullpage.js是一套实现浏览器全屏滚动的js插件,很多网站现在都使用了其来实现较好的浏览体验.  可以实现的功能: •支持前进后退和键盘控制  •多个回调函数  •支持手机.平板触摸事件  •支持 CSS3 动画  •支持窗口缩放  •窗口缩放时自动调整  •可设置滚动宽度.背景颜色.滚动速度.循环选项.回调.文本对齐方式等等 二.插件下载 np

  • 全屏滚动插件fullPage.js使用实例解析

    全屏滚动插件fullPage.js使用实例解析

    如今我们经常能看见到全屏网站,尤其是国外玩站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.而JQuery的一款插件fullpage.js,可以实现全屏滚动,非常流行的效果,兼容性IE8+兼容性不错,能够兼容多种浏览器. 主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个会调函数 支持手机.平板触摸事件 支持CSS3动画 支持窗口缩放 窗口缩放时自动调整 可设置滚动宽度.背景颜色.滚动速度.循环选项.回调.文本对齐方式等等 准备工作(下载jquery

  • 原生javascript实现的全屏滚动功能示例

    本文实例讲述了原生javascript实现的全屏滚动功能.分享给大家供大家参考,具体如下: 原理: 1. 计算当前浏览器屏幕高度,每次翻页显示的内容高度即为屏幕高度 2. 对鼠标滚轮事件进行监听,注意滚轮事件的浏览器兼容问题. 废话不多说,直接上代码 html代码: <div id="wrap"> <div id="main" style="top: 0;"> <div class="content num

  • Javascript 实现全屏滚动实例代码

    JS 全屏滚动 参照fullPage.js的效果,用自己的想法实现的. 实现的效果:1.全屏滚动,滚动一下齿轮就会滚动全屏. 2.自适应缩放,无论怎么改变窗口的大小,都会保证用一个元素占满全屏. 下一步计划: 1.改成react组件 2.实现更多的效果 注释写的很清楚,基本上知道函数怎么用就可以了.有想法这东西就很简单. 这里偷懒使用了我之前写过的一个运动框架(其实就是一个函数),稍加修改就可以在这上面使用.框架相关:点击这里 注释非常详细了,就不说其他的了.直接上代码: <!DOCTYPE h

随机推荐