图片轮播效果怎么实现

这次给大家带来图片轮播效果怎么实现，实现图片轮播效果的注意事项有哪些，下面就是实战案例，一起来看一下。

先来看看运行效果：

具体代码如下：

    
    
    
    
    
  

<script> $(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":&#39;0&#39;,"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":&#39;0&#39;,"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":&#39;0&#39;,"top":"0","display":"none"}); oLi.eq(nextIndex).css("z-index","1"); });break; default:break; } } }); </script>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

怎样使用veloticy-ui生成文字动画

jquery+css3做出直播平台的导航

以上就是图片轮播效果怎么实现的详细内容，更多请关注php中文网其它相关文章！