這應該是簡單的滑動門效果。
HTML的結構估計就是妳這樣了，左邊是列表，右邊是div組。
其實，妳只要明白，左邊的列表和右邊的div組都是有索引值(index)的。然後通過壹個變量來控制就可以了，這樣這個變量即可以給左邊的列表用，也可以給右邊的按鈕用。
var?int?=?0;?//初始化壹個變量//定義壹個函數，用來隱藏顯示右側的div和控制左側的列表
function?divShow(int){
$('#right?.item').hide().eq(int).show();
$('#left?li').removeClass('current').eq(int).addClass('current');
}
我們需要給左側的列表添加事件；
$('#left?li').bind({'mouseover'?:?function(){
//獲取當前元素的索引值
int?=?$(this).index();
//執行函數,這裏會顯示右側的第壹個div元素
divShow(int);
},
'mouseout'?:?function(){
//鼠標劃開時的操作
//int?=?0;
//divShow(int);
}
});
側邊的按鈕也是壹樣
//上翻$('#prev').bind({
'click'?:?function(){
//這裏要使用判斷
if(int?<=?0){
//這裏的個數可以拿到外面定義；
int?=?($('#right?.item').length-1);
}else{
int?=?(int-1);
};
int?=?int;
}
});
//下翻
$('#next').bind({
'click'?:?function(){
//這裏要使用判斷
if(int?>=?($('#right?.item').length-1)){
//這裏的個數可以拿到外面定義；
int?=?0;
}else{
int?=?(int+1);
};
int?=?int;
}
});
如果妳打算在鼠標離開時都初始化，那麽，妳只要在每個按鈕的mouseout事件中設置int這個索引變量為0就可以了。