jquery实现图片自动轮播效果
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
本文实例为大家分享了jquery实现图片自动轮播效果的具体代码,供大家参考,具体内容如下
HTML代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | < div id = "container" > < img src = "icon1.jpg" class = "left" > < img src = "icon2.jpg" class = "right" > < div id = "scroll" > < div id = "scroll_pic" > < ul class = "count" > < li >< img src = "1.jpg" title = "1.jpg" >< span >1</ span ></ li > < li >< img src = "2.jpg" title = "2.jpg" >< span >2</ span ></ li > < li >< img src = "3.jpg" title = "3.jpg" >< span >3</ span ></ li > < li >< img src = "4.png" title = "4.png" >< span >4</ span ></ li > < li >< img src = "3.jpg" title = "3.jpg" >< span >5</ span ></ li > </ ul > < ul > < li >< img src = "1.jpg" title = "1.jpg" >< span >11</ span ></ li > < li >< img src = "2.jpg" title = "2.jpg" >< span >22</ span ></ li > < li >< img src = "3.jpg" title = "3.jpg" >< span >33</ span ></ li > < li >< img src = "4.png" title = "4.png" >< span >44</ span ></ li > < li >< img src = "3.jpg" title = "3.jpg" >< span >55</ span ></ li > </ ul > </ div > </ div > </ div > |
以上是这个图片轮播效果的css的布局样式及html代码部分(相信大家很容易实现!就不赘述了……),下面一起来看用jquery如何实现此效果吧!
jquery来实现图片自动无缝轮播的效果,步骤及代码如下:
步骤一:引入jquery文件,代码如下:
步骤二:创建两个函数,分别控制图片向左右移动 - - moveRight() 和 moveLeft(),代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 | //右移函数 function moveRight(){ var left=$( '#scroll_pic' ).position().left; //获取元素相对于左端的偏移量 $( '#scroll_pic' ).animate({ "left" : "+=" +oLiWidth+ "px" },800) //函数每被调用一次匹配元素发生水平偏移 } //左移函数 function moveLeft(){ var left=$( '#scroll_pic' ).position().left; $( '#scroll_pic' ).animate({ "left" : "-=" +oLiWidth+ "px" },800); } |
步骤三:完成对应事件的绑定,实现基本的手动播放效果,代码如下:
步骤四:实现手动轮播效果,即:分别为上述两个偏移函数【moveRight() 和 moveLeft()】添加条件判断。代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | //右移函数 function moveRight(){ $( '.left' ).off( 'click' ); //移除click事件 var left=$( '#scroll_pic' ).position().left; //轮播条件控制语句 if (left==0){ $( '#scroll_pic' ).css( 'left' ,-oLiWidth*oLi+ 'px' ); } $( '#scroll_pic' ).animate({ "left" : "+=" +oLiWidth+ "px" },800, function (){ $( '.left' ).on( 'click' ,moveRight); //动画结束,重新绑定click事件 }) } //左移函数 function moveLeft(){ $( '.right' ).off( 'click' ); var left=$( '#scroll_pic' ).position().left; if (left==-oLiWidth*oLi){ $( '#scroll_pic' ).css( 'left' ,0); } $( '#scroll_pic' ).animate({ "left" : "-=" +oLiWidth+ "px" },800, function (){ $( '.right' ).on( 'click' ,moveLeft); }) } |
步骤五:实现图片自动轮播效果,即:添加定时器。代码如下:
1 2 3 4 5 | //定时器 function autoRun(){ return setInterval(moveLeft,2000); } var timer=autoRun(); //调用定时器; |
步骤六:为最外层容器,添加鼠标移入移出事件,实现手动暂停自动轮播的效果。代码如下:
1 2 3 4 5 | $( '#container' ).hover( function (){ clearInterval(timer); }, function (){ timer=autoRun(); }) |
以上为jquery实现图片自动轮播效果的详细步骤。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的jQuery代码2010-03-03jcarousellite.js 基于Jquery的图片无缝滚动插件
基于Jquery的图片无缝滚动插件,需要的朋友可以参考下。2010-12-12jquery删除指定的html标签并保留标签内文本内容的方法
有时我们希望删除这段html代码里面的一对<p>标签,但是要保持里面的内容不被删除,本文提供的这个jquery方法就可以简单实现。2014-04-04
最新评论