當前位置:首頁 > 網頁特效 > jQuery特效 >

jquery左右透明遮罩圖片切換代碼

時間:2014-10-09 08:22 來源:互聯網 作者:源碼搜藏 瀏覽:收藏 挑錯 推薦 打印

  • IDC/源碼/項目-廣告推薦
效果預覽 進入下載地址列表
jquery左右透明遮罩圖片切換代碼jquery左右透明遮罩圖片切換代碼是一款基于jquery實現的左右透明遮罩圖片按鈕控制圖片左右切換效果代碼。jQuery遮罩效果圖片切換左右箭頭

<script type="text/javascript">
$(document).ready(function(){
$(".teachers_team").css("width",$(window).width());
$(window).resize(function(e) {
$(".teachers_team").css("width",$(window).width());
});
 
//li的個數
var len=$(".teachers-cont li").length;
//向左箭頭
$("#prev").on("click",function(){
//獲取當前li的index
var cur=$(".teachers-cont li[class='on']").index();
//如果不是第一個
if(cur!=0){
$(".teachers-cont li").eq(cur-1).addClass("on").siblings().removeClass("on");
$(".teachers_box").animate({marginLeft:"-"+(cur-1)*600+"px"});
}else{
return;
}
});
 
//向右箭頭
$("#next").on("click",function(){
//獲取當前li的index
var cur=$(".teachers-cont li[class='on']").index();
//如果不是最后一個
if(cur!=(len-1)){
$(".teachers-cont li").eq(cur+1).addClass("on").siblings().removeClass("on");
$(".teachers_box").animate({marginLeft:"-"+(cur+1)*600+"px"});
}else{
return;
}
});
 
})
</script>
jquery左右透明遮罩圖片切換代碼由源碼搜藏網整理,轉載請注明出處http://www.glgbknaa.icu/tx-jq/10352.html 源碼搜藏承諾:本站所有資源無病毒,無彈窗,無干擾鏈接!

jQuery特效下載排行

最新文章

内蒙古十一选五助手下载