【目標】

制作一個有5張圖片的輪播圖

?

【分析】

想要制作輪播圖，需要如下3個步驟：

1、頁面打開之后，第一個圖片顯示，其余的圖片，隱藏

2、圖片間隔5秒輪播一次

3、傳到第5個圖后回到第1張

?

【制作】

　　1、頁面打開之后，第一個圖片顯示，其余的圖片，隱藏：

　　　　$(“.bg”).not(“:eq(0)”).hide();

?

　　2、間隔5秒輪播：

Var i=0;

$(function(){

$(“.bg”).not(“:eq(0)”).hide();?? //不是第一張圖片的其余圖片都隱藏

setInterval(function(){

?????? i++;

?????? $(“.bg”).eq(i).show();?????????? //第i個圖片顯示

? ? ? ?$(“.bg”).not(“:eq(“+i+”)”).hide();???????????? //不是第i個圖片的隱藏

},5000);

})

?

　　3、傳到第5個圖后回到第1張：

if(i==5)

{

　　i=0;

}

?

【完整程序】

?

Var i=0;

$(function(){

$(“.bg”).not(“:eq(0)”).hide();?? //不是第一張圖片的其余圖片都隱藏

setInterval(function(){

?????? i++;

if(i==5)

{

　　i=0;

}

?????? $(“.bg”).eq(i).show();?????????? //第i個圖片顯示

? ? ? ?$(“.bg”).not(“:eq(“+i+”)”).hide();???????????? //不是第i個圖片隱藏

},5000);

})

轉(zhuǎn)載于:https://www.cnblogs.com/jtfdh/p/4681432.html

總結(jié)

以上是生活随笔為你收集整理的JQuery轮播图片效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。