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

先来看看运行效果：

具体代码如下：

jquery实现图片轮播效果

#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;}

• 
• 
• 
• 
• 

$(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;

}

}

});

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

推荐阅读：