jquery實現簡單輪播

先上簡單的html**

在這個html的目錄下有三個同級的資料夾，img中放，css和js分別存放這個網頁的css檔案和js檔案，這裡用到了jquery，記得引入順序，jquery一定要放在其他js前面。

html**很簡單，不做過多解釋。

init2.css

*#layout#banner#banner_img li#index#index li.clearfix:after.on

$("#banner").hover(function
(),function
() },2000) 
}).trigger('mousele**e');

hover（）是一種代替mouseenter和mousele**e的方法，聽說比較好用。trigger（）來觸發當前物件的乙個狀態，這裡要先觸發一次mousele**e的狀態來初始化計時器，因為這裡的設定是當滑鼠移到$("#banner")上就銷毀定時器，鎖定當前，移開滑鼠就重新新增定時器。

再來看看jquery動畫的實現：

function
showimgs(index)
,1000);
$(".active").removeclass('active') ;
$("#banner_img li").eq(index).css('left', '100%');
$("#banner_img li").eq(index).animate(,1000);
$("#index li").removeclass('on').eq(index).addclass('on') ;
$("#banner_img li").eq(index).addclass('active') ;
}

這裡的主要思路就是把有class=active的，也就是正在顯示的進行左移，並去掉active類，同時把傳進來index的所對應的放在父元素右邊，然後也左移，這樣就造成了乙個接乙個從右往左移的假象。然後把從右邊移過來的新增上active類。

function
addindex(n)
(i)) ;
}ul.children().first().addclass('on') ;
}

基本上就是這樣，需要注意的寬度要和父元素一樣，不然會有無法連續銜接或者部分溢位的問題。

全部js：

init();
function
init()
});//toggleinterval
$("#banner").hover(function
(),function
() },2000) 
}).trigger('mousele**e');
});} //
auto add index
function
addindex(n)
(i)) ;
}ul.children().first().addclass('on') ;
}function
jumpimgs(index)
function
showimgs(index)
,1000);
$(".active").removeclass('active') ;
$("#banner_img li").eq(index).css('left', '100%');
$("#banner_img li").eq(index).animate(,1000);
$("#index li").removeclass('on').eq(index).addclass('on') ;
$("#banner_img li").eq(index).addclass('active') ;
}

view code

jquery實現簡單輪播

banner輪播的簡單實現

jQuery實現淡入淡出樣式輪播

jquery輪播事件效果

jquery實現簡單輪播

banner輪播的簡單實現

jQuery實現淡入淡出樣式輪播

jquery輪播事件效果

相關推薦