这篇文章主要介绍了jquery实现的简单图片轮播效果,结合完整实例形式分析了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><p 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></p><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); //鼠标放置在图片上时停止轮播，移开时继续轮播 $("p").mouseover ( function(){ clearinterval(timer); }) $("p").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>
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
nuxt.js vue服务端渲染摸索
js中let和var定义变量的区别有哪些？
veloticy-ui实现文字动画效果
以上就是jquery如何实现图片轮播的详细内容。