jQuery实现的多张图无缝滚动效果【测试可用】

前端之家收集整理的这篇文章主要介绍了jQuery实现的多张图无缝滚动效果【测试可用】前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了jQuery实现的多张图无缝滚动效果分享给大家供大家参考,具体如下:

<Meta charset="UTF-8"> slider
  • slider.js

    属性absolute/relative $(function(){ var oul = $('.wrap ul'); var oulHtml = oul.html(); oul.html(oulHtml+oulHtml) var timeId = null; var ali = $('.wrap ul li'); var aliWidth = ali.eq(0).width(); var aliSize = ali.size(); var ulWidth = aliWidth*aliSize; oul.width(ulWidth); //1600px var speed = 2; function slider(){ if(speed<0){ if(oul.css('left')==-ulWidth/2+'px'){ oul.css('left',0); } oul.css('left','+=-2px'); } if(speed>0){ if(oul.css('left')=='0px'){ oul.css('left',-ulWidth/2+'px'); } oul.css('left','+='+speed+'px'); } } // setInterval()函数的作用是:每隔一段时间,执行该函数里的代码 timeId = setInterval(slider,30); $('.wrap').mouSEOver(function(){ // clearInterval()函数的作用是用来清除定时器 clearInterval(timeId); }); $('.wrap').mouSEOut(function(){ timeId = setInterval(slider,30); }); $('.goLeft').click(function(){ speed=-2; }); $('.goRight').click(function(){ speed=2; }); });

    效果图如下:

    更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》、《》、《》、《》及《

    希望本文所述对大家jQuery程序设计有所帮助。

    原文链接:https://www.f2er.com/jquery/45913.html

    猜你在找的jQuery相关文章