本文实例讲述了jQuery实现的简单图片轮播效果。分享给大家供大家参考,具体如下:
<强>先来看看运行效果:
<强>具体代码如下:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt; title> jquery实现图片轮播效果& lt;/title>
& lt;元http-equiv=? type”内容=" text/html;charset=utf - 8”比;
& lt;脚本src=" http://libs.baidu.com/jquery/2.0.0/jquery.min.js "祝辞& lt;/script>
& lt; style>
# lunbo{宽度:600 px;高度:300 px;保证金:0汽车;溢出:隐藏;}
#图片{宽度:600 px;高度:300 px;游标:指针;位置:相对;}
ul李{宽度:600 px;高度:300 px; list-style:没有,位置:绝对;:0;左:0;显示:没有;}
img{宽度:600 px;高度:300 px;}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div id=發unbo”比;
& lt; ul id="图片"比;
& lt;李祝辞& lt; img src=" http://pic.qiantucdn.com/58pic/14/60/54/32n58PICxE6_1024.jpg "祝辞& lt;/li>
& lt; li> & lt; img src=" http://pic.qiantucdn.com/58pic/19/09/94/5678b76f75315_1024.jpg "祝辞& lt;/li>
& lt; li> & lt; img src=" http://pic.qiantucdn.com/58pic/19/39/22/01D58PICFx7_1024.jpg "祝辞& lt;/li>
& lt; li> & lt; img src=" http://pic.qiantucdn.com/58pic/19/11/08/5679490f4892d_1024.jpg "祝辞& lt;/li>
& lt; li> & lt; img src=" http://pic.qiantucdn.com/58pic/18/44/26/5620690acb188_1024.jpg "祝辞& lt;/li>
& lt;/ul>
& lt;/div>
& lt;脚本type=" text/javascript祝辞
$(文档)时函数(){
var奥利=$("李");
var liWidth=oLi.eq (0) .width ();
var liHeight=oLi.eq (0) .height ();//每隔3秒进行轮播
var计时器=setInterval(变化,3000);//鼠标放置在图片上时停止轮播,移开时继续轮播
$ (" div ")。mouseover(函数(){
clearInterval(计时器);
})
$ (" div ")。mouseout(函数(){
计时器=setInterval(变化,3000);
})//轮播函数
var prevIndex=0, nextIndex=1;
函数改变(){
如果(prevIndex==奥利。长度是1){//若当前图片是最后一张图片,下一张出现首张图片
nextIndex=0;
}
var n=Math.floor (math . random () * 3);
如果(n==0) {
消失(prevIndex nextIndex);
}
else if (n==2) {
幻灯片(prevIndex nextIndex);
}
其他{
柔术(prevIndex nextIndex);
}
prevIndex=nextIndex;
nextIndex + +;
}//淡入淡出效果,
功能消退(prevIndex nextIndex) {//传入当前显示图片以及下一张图片的索引
oLi.eq (prevIndex) .fadeOut (1000);
oLi.eq (nextIndex) .fadeIn (1000);
}//向左右滑动效果
函数的幻灯片(prevIndex nextIndex) {
var兰德=Math.floor (math . random () * 2);
oLi.eq (nextIndex),告诉();
oLi.eq (nextIndex) . css (“z - index”,“1”);
如果(rand) {//向左滑动
oLi.eq (prevIndex)。1000年动画({左:-liWidth},有趣的);
}
其他{
oLi.eq (prevIndex)。1000年动画({左:liWidth},有趣的);
}
函数的乐趣(){
oLi.eq (prevIndex) . css({“左”:“0”,“显示”:“没有一个”});
oLi.eq (nextIndex) . css (“z - index”,“1”);
}
}//收缩效果
函数grap (prevIndex nextIndex) {
var兰德=Math.floor (math . random () * 4);
oLi.eq (nextIndex),告诉();
oLi.eq (nextIndex) . css (“z - index”,“1”);
开关(rand) {
例0://向左上角滑动
oLi.eq (prevIndex)。动画({左:-liWidth最高:-liHeight}, 1000年,函数(){
oLi.eq (prevIndex)。css({“左”:“0”,“顶”:“0”,“显示”:“没有一个”});
oLi.eq (nextIndex) . css (“z - index”,“1”);
});断裂;
案例1://向右上角滑动
oLi.eq (prevIndex)。动画({左:liWidth最高:-liHeight}, 1000年,函数(){
oLi.eq (prevIndex) . css({“左”:“0”,“顶”:“0”,“显示”:“没有一个”});
oLi.eq (nextIndex) . css (“z - index”,“1”);
});断裂;
案例2://向右下角滑动
oLi.eq (prevIndex)。动画({左:liWidth最高:liHeight}, 1000年,函数(){
oLi.eq (prevIndex) . css({“左”:“0”,“顶”:“0”,“显示”:“没有一个”});
oLi.eq (nextIndex) . css (“z - index”,“1”);
});断裂;
案例3://向左下角滑动
oLi.eq (prevIndex)。动画({左:-liWidth最高:liHeight}, 1000年,函数(){
oLi.eq (prevIndex) . css({“左”:“0”,“顶”:“0”,“显示”:“没有一个”});
oLi.eq (nextIndex) . css (“z - index”,“1”);
});断裂;
默认值:休息;
}
}
});
& lt;/script>
& lt;/body>
& lt;/html>
