本文实例讲述了jQuery实现的简单图片轮播效果。分享给大家供大家参考,具体如下:
创新互联建站长期为上千家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为赤壁企业提供专业的网站制作、成都做网站,赤壁网站改版等技术服务。拥有十多年丰富建站经验和众多成功案例,为您定制开发。
先来看看运行效果:
具体代码如下:
<!DOCTYPE html> <html> <head> <title>jquery实现图片轮播效果</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <style> #lunbo{width: 600px;height: 300px;margin: 0 auto;overflow: hidden;} #pics{width: 600px;height: 300px;cursor: pointer;position: relative;} ul li{width: 600px;height: 300px;list-style: none;position: absolute;top: 0;left: 0;display: none;} img{width: 600px;height: 300px;} </style> </head> <body> <div id="lunbo"> <ul id="pics"> <li ><img src="http://pic.qiantucdn.com/58pic/14/60/54/32n58PICxE6_1024.jpg"></li> <li><img src="http://pic.qiantucdn.com/58pic/19/09/94/5678b76f75315_1024.jpg"></li> <li><img src="http://pic.qiantucdn.com/58pic/19/39/22/01D58PICFx7_1024.jpg"></li> <li><img src="http://pic.qiantucdn.com/58pic/19/11/08/5679490f4892d_1024.jpg"></li> <li><img src="http://pic.qiantucdn.com/58pic/18/44/26/5620690acb188_1024.jpg"></li> </ul> </div> <script type="text/javascript"> $(document).ready(function(){ var oLi = $("li"); var liWidth = oLi.eq(0).width(); var liHeight = oLi.eq(0).height(); //每隔3秒进行轮播 var timer = setInterval(change,3000); //鼠标放置在图片上时停止轮播,移开时继续轮播 $("div").mouseover ( function(){ clearInterval(timer); }) $("div").mouseout (function(){ timer = setInterval(change,3000); }) //轮播函数 var prevIndex = 0,nextIndex = 1; function change(){ if (prevIndex == oLi.length-1 ) {//若当前图片是最后一张图片,下一张出现首张图片 nextIndex = 0; } var n = Math.floor(Math.random()*3); if (n == 0) { fade(prevIndex,nextIndex); } else if (n== 2) { slide(prevIndex,nextIndex); } else{ grap(prevIndex,nextIndex); } prevIndex = nextIndex; nextIndex ++; } //淡入淡出效果, function fade(prevIndex,nextIndex){ //传入当前显示图片以及下一张图片的索引 oLi.eq(prevIndex).fadeOut(1000); oLi.eq(nextIndex).fadeIn(1000); } //向左右滑动效果 function slide(prevIndex,nextIndex){ var rand = Math.floor(Math.random()*2); oLi.eq(nextIndex).show(); oLi.eq(nextIndex).css("z-index","-1"); if (rand) { //向左滑动 oLi.eq(prevIndex).animate({left: -liWidth},1000,fun); } else{ oLi.eq(prevIndex).animate({left: liWidth},1000,fun); } function fun(){ oLi.eq(prevIndex).css({"left":"0","display":"none"}); oLi.eq(nextIndex).css("z-index","1"); } } //收缩效果 function grap(prevIndex,nextIndex){ var rand = Math.floor(Math.random()*4); oLi.eq(nextIndex).show(); oLi.eq(nextIndex).css("z-index","-1"); switch (rand){ case 0://向左上角滑动 oLi.eq(prevIndex).animate({left: -liWidth,top: -liHeight},1000,function(){ oLi.eq(prevIndex).css({"left":"0","top": "0","display":"none"}); oLi.eq(nextIndex).css("z-index","1"); });break; case 1://向右上角滑动 oLi.eq(prevIndex).animate({left: liWidth,top: -liHeight},1000,function(){ oLi.eq(prevIndex).css({"left":'0',"top":"0","display":"none"}); oLi.eq(nextIndex).css("z-index","1"); });break; case 2://向右下角滑动 oLi.eq(prevIndex).animate({left: liWidth,top: liHeight},1000,function(){ oLi.eq(prevIndex).css({"left":'0',"top":"0","display":"none"}); oLi.eq(nextIndex).css("z-index","1"); });break; case 3://向左下角滑动 oLi.eq(prevIndex).animate({left: -liWidth,top: liHeight},1000,function(){ oLi.eq(prevIndex).css({"left":'0',"top":"0","display":"none"}); oLi.eq(nextIndex).css("z-index","1"); });break; default:break; } } }); </script> </body> </html>
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery图片操作技巧大全》、《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
当前题目:jQuery实现的简单图片轮播效果完整示例
文章位置:https://www.cdcxhl.com/article38/ieessp.html
成都网站建设公司_创新互联,为您提供网站策划、Google、面包屑导航、云服务器、小程序开发、响应式网站
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联