本文实例为大家分享了jQuery实现滚动效果展示的具体代码，供大家参考，具体内容如下

1.图片轮播：

原理如下：

假设有三张图片，三张图片实际上都是存在于页面上的，但是由于设置的可视部分的大小（这里主要考虑宽度)是小于等于一张图片的大小的，想要看到其他图片的话，最直接的想法就是将需要显示的图片放在可视区域，也就是说需要改变的是整个图片区域的偏移值（左/右)

具体实现：

！DOCTYPE html html head meta charset=' utf-8 ' title/title script type=' text/JAVAScript ' src=' http : jquery。量滴js '/脚本链接rel='样式表type='text/css' href=' ./style。CSS ' rel='外部无跟随'/头体div class='转盘' div class=' Con '！-轮播（旋转木马)项目-div class=' scroll ' img src=' http :/pic/1.jpg' img src='http:/pic/2.jpg' img src='http:/pic/3.jpg' img src='http:/pic/4.jpg' img src='http:/pic/5.jpg' img src='http:/pic/6.jpg' img src='http:/pic/7.jpg' /div！-轮播（旋转木马)指标-div class=' But ' span class=' active '/span！-0 * img。宽度-跨度/跨度跨度/跨度跨度/跨度跨度跨度/跨度/跨度/div/div！-轮播（旋转木马)导航-a href=' JavaScript : void(0)' class=' prev ' data-slide=' prev '/a a href=' JavaScript : void(0)' class=' next ' data-slide=' next '/a/div/body/html $(function(){ var _ index=0；定义变量时间=0;$('.但是跨度' .单击(函数(){ _index=$(this)).index()；play(_ index)；});函数播放（索引){ $('。但是跨度' .eq(指数)。addClass('active ').兄弟姐妹(' span ').移除CLaSS(' active ')；$('.滚动')。animate({ left :-(_ index * 1024)}，500)；} function autoPlay(){ time=setInterval(function(){ _ index；if(_index 6) { $(').滚动')。css('left '，0)；_ index=0；} play(_ index)；}, 3000);} autoPlay()；$('.prev ').单击(function(){ if(_ index=0){ return；} clearInterval(时间);播放(-_ index)；autoPlay()；});$('.下一个')。click(function(){ if(_ index=6){ return；} clearInterval(时间);play(_ index)；autoPlay()；});});2.上下滚动

这里以文字滚动为示例：就是利用定时器，在一定的时间间隔后不断的将保险商实验所中的最后一个里元素插入到保险商实验所的第一个里元素中

！DOCTYPE html html head meta charset=' utf-8 ' title/title script type=' text/JAVAScript ' src=' http : jquery。量滴js '/脚本样式类型=' text/CSS ' .ul-list li { text-decoration:无；列表样式：无；}/style/head body ul class=' ul-list ' lia href=' # '本地数据正反查询的实现例子/阿/李莉娅星寻路算法/a/li lia href='#'node.js的querystring.stringify的使用/a/li lia href='# '利用事件委托写一个简易扫雷游戏/a/li lia href='# '懒加载（延迟加载)/a/li lia中可扩展置标语言的解析/a/li /ul脚本类型=' text/JavaScript ' SetInterval(function(){ $(').ul-list Li : last ').css({'height':'0px '，'不透明度' :'0'})。在(')之前插入.ul-list li:first ').animate({'height':'25px '，' opacity': '1'}，' slow '，function() { $(this).移除attr(' style ')；}) }, 3000);/脚本/正文/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。