jQuery实现的简单图片轮播效果完整示例
程序员文章站
2022-06-13 09:28:46
本文实例讲述了jquery实现的简单图片轮播效果。分享给大家供大家参考,具体如下:
先来看看运行效果:
具体代码如下:
本文实例讲述了jquery实现的简单图片轮播效果。分享给大家供大家参考,具体如下:
先来看看运行效果:
具体代码如下:
<!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 style="display: inline;"><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程序设计有所帮助。
上一篇: Vue组件和Route的生命周期实例详解