Jquery左右无缝图片滚动插件

合集下载

js使用transition效果实现无缝滚动

js使⽤transition效果实现⽆缝滚动作者：李⼤雷前⾔⽆缝轮播⼀直是⾯试的热门题⽬，⽽⼤部分答案都是复制第⼀张到最后。

诚然，这种⽅法是⾮常标准，那么有没有另类⼀点的⽅法呢？第⼀种⽅法是需要把所有图⽚⼀张张摆好，然后慢慢移动的，但是我能不能直接不摆就硬移动呢？如果你使⽤过vue的transition，我们是可以通过给每⼀张图⽚来添加⼊场动画和离场动画来模拟这个移动•进场动画就是从最右侧到屏幕中央•出场动画是从屏幕中央到左侧移出这样看起来的效果就是图⽚从右边⼀直往左移动，但是这个不⼀样的地⽅是，我们每⼀个元素都有这个进场动画和离场动画，我们根本不⽤关⼼它是第⼏个元素，你只管轮播就是。

如果不⽤vue呢？很简单，我们⾃⼰实现⼀个transtition的效果就好啦，主要做的是以下两点•元素显⽰的时候，即display属性不为none的时候，添加xx-enter-active动画•元素消失的时候，先添加动画xx-leave-active, 注意要让动画播完才消失••••••••••••••functionhide( el) { el.className = el.className.replace( ' slide-enter-active', '') el.className += ' slide-leave-active' el.addEventListener( 'animationend',animationEvent) } functionanimationEvent( e) { e.target.className =e.target.className.replace( ' slide-leave-active', '') e.target.style.display = 'none' e.target.removeEventListener('animationend',animationEvent) } functionshow( el) { el.style.display = 'flex' el.className += ' slide-enter-active' }这⾥我们使⽤了animationend来监听动画结束，注意这⾥每次从新添加类的时候需要重新添加监听器，不然会⽆法监听。

【jquery插件】jq_24taobao模仿淘宝购便利首页图片切换效果

【jquery插件】jq_24taobao模仿淘宝购便利首页图片切换效果【插件功能】模仿淘宝首页的图片切换效果，那说到功能就是好看呗。

【原理】根据分析淘宝的JS，他使用的原理和普通切换的效果一样是通过控制index的大小来改变滚动层的margin 值，但是只样子做是做不出无限循环的效果，但是淘宝的前端写了一个动作特效函数传给animate从而达到了效果；由于淘宝是用自己的框架写的，以上仅为林氏智造的猜测大家可做参考。

我实现的方法是通过我以前的jq_moveXY文字上下左右无间隙滚动插件改造过来的，通过控制方向参数来实现上一个下一个的效果。

【演示地址】/qianduan/jq_24taobao.html【演示地址】/jquery_plugs/jq_24taobao/index.html【插件参数】moveClass ：移动包含元素样式,样式集合第一个元素为主移动元素,默认.L_move(此元素必须填写这些属性:移动方向data_direction="right" 移动距离data_px="239")targetObj ：移动元素内的子元素,默认div(可以是标签名或者类名)speed：移动速度,默认500autoTime ：自动播放时间,默认5000direction ：方向：1-正方向；2-负方向,默认1preBtn ：前按钮样式,默认.move_prenextBtn ：后按钮样式,默认.move_next【代码】/*** 淘宝图片滚动效果* 使用Jquery效仿其效果仅用于学习使用*/(function($) {$.fn.taobao24 = function(options) {var opts = $.extend({}, $.fn.taobao24.defaults, options);return this.each(function() {var $this=$(this),j=null;var $mainMove=$this.find(opts.moveClass+':eq(0)');var $otherMove=$this.find(opts.moveClass+':gt(0)');//自动运行主移动控制,回调运行子移动控制函数function autoHandle(){var direction=$mainMove.attr('data_direction');$.fn.taobao24.effects[direction+'_'+opts.direction]($mainMove,229,opts,otherMoveRun);}//子移动控制函数function otherMoveRun(){$otherMove.each(function(index,elem){var $this=$(elem);var direction=$this.attr('data_direction');var px=$this.attr('data_px');$.fn.taobao24.effects[direction+'_'+opts.direction]($this,px,opts);});}//自动运行接口function auto(){opts.direction=1;autoHandle();}j=setInterval(auto,opts.autoTime);$(opts.preBtn,$this).click(function(){clearInterval(j);opts.direction=0;autoHandle();});$(opts.nextBtn,$this).click(function(){clearInterval(j);opts.direction=1;autoHandle();});$this.on('mouseenter',function(){clearInterval(j);}).on('mouseleave',function(){opts.direction=1;j=setInterval(auto,opts.autoTime);});});};// 插件的defaults$.fn.taobao24.defaults = {moveClass:'.L_move',//移动包含元素样式,样式集合第一个元素为主移动元素targetObj:'div',//移动元素内的子元素speed:500,//移动速度autoTime:5000,//自动播放时间direction:1,//方向：1-正方向；2-负方向preBtn:'.move_pre',//前按钮样式nextBtn:'.move_next'//后按钮样式};//移动效果;后缀_1表示正方向动作，_0表示负方向动作$.fn.taobao24.effects={top_1:function(obj,px,opts,func){if(!obj.is(":animated")){obj.animate({marginTop: '-'+px},opts.speed,function(){var $cl =obj.find(opts.targetObj+":first");obj.append($cl);obj.css("marginTop",0);if(typeof(func)=='function')func();});}},top_0:function(obj,px,opts,func){this.bottom_1(obj,px,opts,func);},bottom_1:function(obj,px,opts,func){if(!obj.is(":animated")){var $cl =obj.find(opts.targetObj+":last").clone(true);obj.prepend($cl);obj.css("marginTop",-px);obj.animate({marginTop:0},opts.speed,function(){obj.find(opts.targetObj+":last").remove();if(typeof(func)=='function')func();});}},bottom_0:function(obj,px,opts,func){this.top_1(obj,px,opts,func);},left_1:function(obj,px,opts,func){if(!obj.is(":animated")){obj.animate({marginLeft:"-"+px},opts.speed,function(){obj.find(opts.targetObj+":first").appendTo(obj);obj.css({marginLeft:"0"});if(typeof(func)=='function')func();});}},left_0:function(obj,px,opts,func){this.right_1(obj,px,opts,func);},right_1:function(obj,px,opts,func){if(!obj.is(":animated")){obj.find(opts.targetObj+":last").prependTo(obj);obj.css({marginLeft:-px});obj.stop().animate({marginLeft:0},opts.speed,function(){if(typeof(func)=='function')func();});}},right_0:function(obj,px,opts,func){this.left_1(obj,px,opts,func);}};// 闭包结束})(jQuery);【写在最后】此插件只是模范学习淘宝的效果，图片版权归淘宝所有。

jQuery实现左右滑动的toggle方法

jQuery实现左右滑动的toggle⽅法我们知道使⽤ jQuery 来实现上下移⼊移除，可以直接使⽤ slideUp() 和 slideDown() ⽅法。

slideUp()⽅法和slideDown()⽅法只会改变元素的⾼度。

如果⼀个元素的 display 属性值为 “none”，当调⽤ slideDown() ⽅法时，这个元素将由上⾄下延伸显⽰。

slideUp()⽅法正好相反，元素将由上到下缩短隐藏。

代码如下：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>toggle-jquery1.9</title><script src="https:///jquery/1.9.0/jquery.min.js"></script><style>div.container {height: 320px;border: 1px solid #ccc;}div.left {width: 200px;height: 300px;background-color: #36f;}</style></head><body><div class="container"><div class="left"></div></div><button id="toggle">toggle</button><script>$(document).ready(function(){$('#toggle').click(function(){$('.left').slideToggle(300);});});</script></body></html>那么，要实现左右的滑⼊滑出呢？demo 如下：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>toggle-jquery1.9</title><script src="https:///jquery/1.9.0/jquery.min.js"></script><style>div.container {height: 320px;border: 1px solid #ccc;}div.left {width: 200px;height: 300px;background-color: #36f;}</style></head><body><div class="container"><div class="left"></div></div><button id="toggle">toggle</button><script>$(document).ready(function(){$('#toggle').click(function(){$('.left').animate({width:'toggle'},350);});});</script></body></html>效果如下：以上这篇jQuery实现左右滑动的toggle⽅法就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

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> //jQuery 1.8.3的版本<script src="js/jquery.fullPage.min.js"></script> //fullPage插件的压缩版本<style>.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;} //可以改动设置的是⽹页中的⽂字 <⽆关紧要></style><script>$(function(){$('#dowebok').fullpage({//fullpage ⽐较重要设置的是插件的基本设置后⾯的sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90']//sectionsColor 当没有背景图⽚的时候这个就是设置背景颜⾊的否则就是空⽩数组的形式中间以逗号隔开颜⾊不管是⼗六进制还是英⽂单词都需要⽤单引号包着 });});</script><div id="dowebok"> //绑定的⼤盒⼦设置滚动的盒⼦<div class="section"><h3>第⼀屏</h3><p>fullPage.js — 基本演⽰</p></div><div class="section"> //滚动的第⼆屏幕如果在⾥⾯添加div和slide的样式就可以增加横向点击<div class="slide"><h3>第⼆屏的第⼀屏</h3></div><div class="slide"><h3>第⼆屏的第⼆屏</h3></div><div class="slide"><h3>第⼆屏的第三屏</h3></div></div><div class="section"><h3>第三屏</h3></div><div class="section"><h3>第四屏</h3><p>这是最后⼀屏</p></div></div>0.02 插⼊背景图⽚演⽰的HTML 布局以及js 代码 <需要链接的⽂件都是⼀样的><style> //需要注意的是这⾥没有设置颜⾊⽽是在css中设置的背景图⽚0.section1 { background: url(images/1.jpg) 50%;}.section2 { background: url(images/2.jpg) 50%;}.section3 { background: url(images/3.jpg) 50%;}.section4 { background: url(images/4.jpg) 50%;}</style><script>$(function(){$('#dowebok').fullpage(); //找到⼤盒⼦设置fullpage全屏滚动});</script><div id="dowebok"><div class="section section1"></div><div class="section section2"></div><div class="section section3"></div><div class="section section4"></div></div>0.03 循环演⽰ html 布局以及js代码 <需要链接的⽂件都是⼀样的><script>$(function(){$('#dowebok').fullpage({sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'], //和上⾯⼀样 sectionsColor 是设置每⼀屏的颜⾊必须⽤逗号隔开单引号包着continuousVertical: false, //设置是否滑到底层再往下滚动是第⼀张图设置true是执⾏此操作设置false是不执⾏默认不执⾏不执⾏就不设置});});</script><div id="dowebok"><div class="section"><h3>第⼀屏</h3><p>fullPage.js — 循环演⽰</p></div><div class="section"><h3>第⼆屏</h3><div class="section"><h3>第三屏</h3></div><div class="section"><h3>第四屏</h3><p>这是最后⼀屏了，继续往下滚返回第⼀屏</p></div></div>0.04 回调函数演⽰<title>fullPage.js — 回调函数演⽰</title><link rel="stylesheet" href="css/jquery.fullPage.css"><style>.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}.section2 p { position: relative; left: -120%;}.section3 p { position: relative; bottom: -120%;}.section4 p { display: none;}</style><script src="js/jquery.min.js"></script><script src="js/jquery-ui.js"></script><script src="js/jquery.fullPage.js"></script><script>$(function(){$('#dowebok').fullpage({sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],//设置背景颜⾊afterLoad: function(anchorLink, index){//滚动到某⼀屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 是序号，从1开始计算 if(index == 2){$('.section2').find('p').delay(500).animate({//find('p') 搜索所有段落中的后代 p 元素//delay(500)其中参数为延时值，它的单位是毫秒//animate() ⽅法执⾏ CSS 属性集的⾃定义动画left: '0'}, 1500, 'easeOutExpo'); //jQuery Easing 动画效果扩展}if(index == 3){$('.section3').find('p').delay(500).animate({bottom: '0'}, 1500, 'easeOutExpo');}if(index == 4){$('.section4').find('p').fadeIn(2000);//fadeIn() ⽅法逐渐改变被选元素的不透明度，从隐藏到可见（褪⾊效果）}},onLeave: function(index, direction){//滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数：index 是离开的“页⾯”的序号，从1开始计算；//nextIndex 是滚动到的“页⾯”的序号，从1开始计算；//direction 判断往上滚动还是往下滚动，值是 up 或 down。

div实现向左右无缝滚动图片效果（跑马灯）

div实现向左右无缝滚动图片效果（跑马灯）div+css学习笔记22（用div实现向左无缝滚动图片效果）JavaScript实现走马灯效果[无缝连接、循环滚动] 无缝跑马灯效果以下代码在IE6、Firefox+Win2k环境下测试通过网页走马灯连续循环滚动废话少说，代码贴出来：<div id="imgmarquee" style="OVERFLOW: hidden; WIDTH: 580px; align: left; background-color:#0099CC;"><div style="width:1200px"><span id="marquePic1" style="width:600px; background-color:#990033;"><img src="../images/dialog/4.gif" /><img src="../images/dialog/4.gif" /><img src="../images/dialog/4.gif" /><img src="../images/dialog/4.gif" /><img src="../images/dialog/4.gif" /><img src="../images/dialog/4.gif" /><img src="../images/dialog/4.gif" /><img src="../images/dialog/4.gif" /></span><span id="marquePic2" style="width:600px;background-color:#990033;"></span></div></div><script type="text/javascript">var imgmarquee = document.getElementById('imgmarquee');var marquePic2 = document.getElementById('marquePic2');var marquePic1 = document.getElementById('marquePic1');var speed=10;//控制移动的速度,数越大越慢marquePic2.innerHTML=marquePic1.innerHTML;//把marquePic1的内容复制到marquePic2里面function Marquee(){if(imgmarquee.scrollLeft>=marquePic1.scrollWidth){imgmarquee.scrollLeft=0;}else{//demo.scrollLeft++;imgmarquee.scrollLeft++;}}var marqueetemp=setInterval(Marquee,speed);imgmarquee.onmouseover=function(){clearInterval(marqueetemp)} //鼠标移到上面停止并清除计数imgmarquee.onmouseout=function(){marqueetemp=setInterval(Marquee,speed)} //鼠标离开重新计数</script>－－－－－－－－－－－－参考资料（向右，向上，向下代码同理，只是控制的js不同而已，把下面的id改成对应的就ok了）－－－－－－－－－－－－向右－－－－－－－－－－－－<script language="javascript"type="text/javascript"></script>－－－－－－－－－－－－－向下－－－－－－－－－－－－－<script language="javascript"type="text/javascript"></script>－－－－－－－－－－－向上－－－－－－－－－－－<script language="javascript"type="text/javascript"></script><DIV id=demo_1 style="OVERFLOW: hidden; HEIGHT: 136px"><DIV id=demo1_1><div id=gleft><a href=""><img src="" border="0" width=150 height="120"/></a></div><div id=gleft><a href=""><img src="" border="0" width=150 height="120"/></a></div><div id=gleft><a href=""><img src="" border="0" width=150 height="120"/></a></div><div id=gleft><a href=""><img src="" border="0" width=150 height="120"/></a></div></DIV><DIV id=demo2_1></DIV></DIV><SCRIPT>var speed=25demo2.innerHTML=demo1.innerHTMLfunction Marquee(){if(demo2.offsetWidth-demo.scrollLeft<=0)demo.scrollLeft-=demo1.offsetWidthelse{demo.scrollLeft++}}var MyMar=setInterval(Marquee,speed)demo.onmouseover=function() {clearInterval(MyMar)}demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)} </SCRIPT>其中<div id=gleft>这里的gleft的样式你自己定义下就OK了。

owl-carousel参数

Owl Carousel 是一个基于 jQuery 的响应式轮播插件，可以用来创建漂亮的滑动图片展示和内容轮播。

作为一个非常流行的前端框架，Owl Carousel 在网页设计和开发中被广泛应用。

本文将介绍 Owl Carousel 的一些主要参数，并解释它们的作用和用法。

1. items参数名：items作用：设置轮播每页显示的图片或内容的个数用法：通过设置 items 参数来确定每个轮播页面显示的图片或内容个数。

如果设置 items: 3，则每个轮播页面将显示三个图片或内容。

2. loop参数名：loop作用：设置是否循环播放用法：通过设置loop 参数为true 或false 来确定轮播是否循环播放。

当设置为true 时，轮播将会循环播放图片或内容；当设置为false 时，轮播会在播放到最后一张图片或内容时停止。

3. margin参数名：margin作用：设置图片或内容之间的距离用法：通过设置 margin 参数来确定轮播中每张图片或内容之间的间距。

可以设置为像素值或百分比值。

4. nav参数名：nav作用：设置是否显示导航按钮用法：通过设置 nav 参数为 true 或 false 来确定是否在轮播中显示导航按钮。

当设置为 true 时，将显示左右两侧的导航按钮；当设置为false 时，将隐藏导航按钮。

5. dots参数名：dots作用：设置是否显示小圆点导航用法：通过设置 dots 参数为 true 或 false 来确定是否在轮播中显示小圆点导航。

当设置为 true 时，将显示底部的小圆点导航；当设置为false 时，将隐藏小圆点导航。

6. autoplay参数名：autoplay作用：设置是否自动播放用法：通过设置 autoplay 参数为 true 或 false 来确定轮播是否自动播放。

当设置为 true 时，轮播将会自动播放图片或内容；当设置为false 时，轮播将需要手动切换图片或内容。

jQuery图片缩放插件smartZoom使用实例详解

jQuery图⽚缩放插件smartZoom使⽤实例详解插件描述：通过将⿏标悬停在图⽚上，滚动⿏标滚轮即可实现图⽚的放⼤或者缩⼩效果。

smartZoom使⽤举个栗⼦，上代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>joannau</title><style>* {padding: 0;margin: 0;}.imgCon {width: 800px;height: 500px;margin: 40px auto;border: 2px solid #000;}.imgDiv {width: 100%;height: 100%;}.imgCon img{width: 100%;}</style></head><body><div class="imgCon"><div class="imgDiv"><img src="./assets/zoomSmall.jpg" alt=""></div></div><script src="../src/jquery-1.11.0.min.js"></script><script src="../src/e-smart-zoom-jquery.js"></script><script>$(function () {$(".imgCon img").smartZoom()})</script></body></html>直接对img对象使⽤smartZoom⽅法即可。

前端开发中的图片轮播插件推荐

前端开发中的图片轮播插件推荐随着互联网的迅猛发展，网页的交互性和美观性日益被重视。

而在网页中常见的一种元素就是图片轮播。

图片轮播不仅可以突出展示网页中的图片内容，还能够增加用户的视觉体验，提高用户的留存时间。

为了实现一个高质量、易于使用和具有丰富功能的图片轮播效果，前端开发者往往需要使用一些专业的插件。

本文将推荐几个常用的前端开发中的图片轮播插件。

1. SwiperSwiper 是一款功能强大的移动端触摸轮播插件。

它具有多种切换效果、支持无限循环轮播、自动播放等功能。

Swiper 使用简单，轻量级且高效，并且支持响应式设计，可以适应不同尺寸的屏幕。

它兼容各种主流浏览器，并提供了丰富的配置选项，可以满足开发者各种不同的需求。

2. SlickSlick 是一款简洁、易于使用的图片轮播插件。

它提供了丰富的切换效果，支持自动播放、响应式设计和无限循环轮播。

Slick 还支持多种自定义配置选项，包括循环播放、显示/隐藏箭头、添加自定义样式等。

虽然 Slick 主要用于移动端开发，但也可以很好地适应桌面端的需求。

3. Owl CarouselOwl Carousel 是一款功能全面且灵活的图片轮播插件。

它支持多种切换效果、自动播放和无限循环轮播。

Owl Carousel 还提供了丰富的配置选项，可以轻松自定义轮播效果，包括过渡动画、导航按钮、自适应布局等。

它还支持响应式设计，可以适应不同屏幕尺寸。

Owl Carousel 是一个开源项目，拥有强大的社区支持和活跃的开发团队。

4. FlickityFlickity 是一款流畅、快速和易于使用的图片轮播插件。

它提供了多种切换效果、自动播放、无限循环轮播以及触摸手势支持。

Flickity 还支持响应式设计，可以根据不同屏幕大小进行布局调整。

它的代码结构简洁，易于维护，并且具有良好的兼容性。

5. Glide.jsGlide.js 是一款轻量级、响应式和可定制的图片轮播插件。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

/*
功能：Jquery无缝滚动插件zhw.scroll-1.0.js
作者：leo
注意：暂只支持div下ul li的滚动
交流：xandchd_kane@
*/
jQuery.extend({
Scroll: function(settings) {
//初始化参数
var config = $.extend({
stepWidth: 100, // 滚动步长
waitTime: 4000, // 间歇时间
animateTime: 500, // 滚动效果时间,理论上应该比间歇时间短
inner: "", // 滚动对象
left: "", // 左点击对象
right: "" // 右点击对象
}, settings);
var flag = setInterval(AutoScroll, parseInt(config.waitTime));
//左滚
$(config.left).click(function() { AutoScroll(); });
//右滚
$(config.right).click(function() { RightScroll(); });
//悬停
$("" + config.left + "," + config.right + "," + config.inner + "").hover(function() { clearInterv al(flag) }, function() {
flag = setInterval(AutoScroll, parseInt(config.waitTime));
});
function AutoScroll() {
var marginLeft = $(config.inner).css("margin-left");
$(config.inner).stop().animate({ "margin-left": parseInt(marginLeft) - config.stepWidth }, config.animateTime, function() {
var n = $("li").toArray(); //转换为对象数组
var k = $.grep(n, function(i, j) { return j > 0; }); //筛选
var temp = $.grep(n, function(i, j) { return j > 0; }, true); //筛选
$(config.inner).children("ul").html(""); //清空
$(k).each(function(i, j) {
$(config.inner).children("ul").append(j); //重新拼装内容
});
$(config.inner).children("ul").append(temp); //拼装被筛选出去的对象
$(config.inner).css("margin-left", 0); //初始化marginleft
});
}
function RightScroll() {
//向右需要先拼装再移动
var marginLeft = $(config.inner).css("margin-left");
var n = $("li").toArray(); //转换为对象数组
var k = $.grep(n, function(i, j) { return j < n.length - 1; }); //筛选
var temp = $.grep(n, function(i, j) { return j > n.length - 1; }, true); //筛选
$(config.inner).children("ul").html("").append(temp); //拼装被筛选出去的对象
$(k).each(function(i, j) {
$(config.inner).children("ul").append(j); //重新拼装内容
});
$(config.inner).css("margin-left", -config.stepWidth);
//
$(config.inner).stop().animate({ "margin-left": parseInt(marginLeft) }, config.animateTim e);
}
}
});
<html xmlns="/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body{font-size:12px}
.left,.right{width:50px; height:40px; line-height:40px; float:left; text-align:center; cursor:poi nter}
#scroll{width:400px; height:40px; overflow:hidden; float:left}
#inner{width:800px; height:40px;}
ul{padding:0; margin:0 auto}
#inner ul{width:800px; list-style:none;height:40px}
#inner ul li{width:100px; float:left; list-style:none; line-height:40px; text-align:center}
#page a{ margin:0px 10px; text-decoration:none}
</style>
<script src="javascript/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="javascript/zhw.Scroll.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$.Scroll({
waitTime: 3000,
inner: "#inner",
left: ".left",
right: ".right"
});
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="left"><<</div>
<div id="scroll">
<div id="inner">
<ul>
<li>滚动练习—1</li>
<li>滚动练习—2</li>
<li>滚动练习—3</li>
<li>滚动练习—4</li>
<li>滚动练习—5</li>
<li>滚动练习—6</li>
<li>滚动练习—7</li>
<li>滚动练习—8</li>
</ul>
</div>
</div>
<div class="right">>></div>
</form>
</body>
</html>。