jquery滾動實現原理之一，自制滾動函式例項
阿新 • • 發佈：2019-01-25
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
<link rel='stylesheet' href='left.css'type='text/css' title='left'/>
<link rel='alternate stylesheet'href='right.css' type='text/css'title='right'\>
<title>dddddddd</title>
<style type='text/css' >
.content{width:500px;height:100px; border:1px solidred;}
.next,.prev{margin:5px; height:90px;width:10px;float:left;border:1px solid #5d8;}
.con {width:440px; height:90px; background:#dee;float:left;padding:0; margin:5px; overflow:hidden; position:relative}
.con ul {list-style:none; height:90px;padding:0 ;margin:0;position:absolute;left:0px;}
.con li{height: 70px; margin:10px; width:125px; border:1pxsolid #333;float:left; text-align:center;line-height:70px;}
</style>
<scriptsrc='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'type='text/javascript'></script>
<scripttype='text/javascript'>
var jq = jQuery.noConflict();
functionleft_right_scroll(conclss,outclass,inclass,num,tnum,speed,intername){//左右圖片滾動效果
if(!arguments[6]) intername = "MyMar"; //迴圈計算器的名稱，確保各個模組之間不相互干擾，這個引數是預設引數
var kWidth = jq(inclass+' li').outerWidth(true);//一個框的寬度
var width = num*tnum*kWidth; //獲取li列表總寬度
jq(inclass).css('width',width*2+'px').append(jq(inclass).html()); //複製原來的一段新增到這裡形成第二段，這裡是滾動實現的關鍵所在
jq('.next').click(function(){
zWinScorll(outclass,inclass,jq(this),tnum,width,kWidth,num,speed);//點擊向後按鈕執行向後滾動函式
});
jq('.prev').click(function(){
fWinScorll(outclass,inclass,jq(this),tnum,width,kWidth,num,speed);//點擊向前按鈕執行向滾動函式
});
intername=setInterval(function(){jq(conclss+'.next').trigger('click');},5000);//定義自動滾動函式，迴圈執行模擬當前當前下點選，其實迴圈執行正向滾動函式也行。.next 前加上了conclass變數是定義傳入不同範圍內點選，實現相互不干擾
jq(conclss).mouseover(function(){
clearInterval(intername);
}).mouseout(function(){
intername=setInterval(function(){jq(conclss+'.next').trigger('click');},5000);
});
}
functionzWinScorll(outclass,inclass,mes,tnum,width,kWidth,num,speed){ //定義正向滾動函式
var me = mes.siblings(outclass).find(inclass);
//"非同步處理"，就是點next頁面上的框不是都滾動，而是通過邏輯關係來處理是哪個滾動
if(!me.is(':animated')){ //判斷當前元素是否處於動畫狀態，不處於才追加動畫
me.stop().animate({'left':'-='+kWidth*num+'px'},speed,function(){//將元素的left -= 3個元素的寬度以顯示下三元素/可以通過改變num的值來顯示滾動的個數
if(me.css('left') == -width+'px'){me.css('left','0px');}//判斷滾動的是原來的寬度時將left設為0，實現迴圈滾動
});
};
}
functionfWinScorll(outclass,inclass,mes,tnum,width,kWidth,num,speed){ //定義反向滾動函式
var me = mes.siblings(outclass).find(inclass);
if(me.css('left') == '0px'){me.css('left','-'+width+'px');}//判斷如果現在是顯示的第一個，現在再向前滾動的情況下應該先讓他顯示第二段的頭，這樣他前面還有內容可滾動顯示。
if(!me.is(':animated')){
me.stop().animate({'left':'+='+kWidth*num+'px'},speed,function(){
});
}
}
</script>
</head>
<body id='bodyid'name='bodyid'>
<div class='content content1'style="">
<divclass='prev'></div>
<div class='concon1'><!--外部div相對定位 relative-->
<ul class='conul conul1'><!--外部div絕對定位 absolute-->
<li>111</li><li>222</li><li>333</li><li>444</li><li>555</li><li>666</li>
</ul>
</div>
<divclass='next'>ee</div>
</div>
<scripttype='text/javascript'>
left_right_scroll('.content1','.con1','.conul1',3,2,1000,'aa');
</script>
<hr>
<div class='content content2'style="">
<divclass='prev'></div>
<div class='concon2'><!--外部div相對定位 relative-->
<ul class='conul conul2'><!--外部div絕對定位 absolute-->
<li>111</li><li>222</li><li>333</li><li>444</li><li>555</li><li>666</li>
</ul>
</div>
<divclass='next'>dd</div>
</div>
<scripttype='text/javascript'>
left_right_scroll('.content2','.con2','.conul2',3,2,1000,'dd');
</script>
<hr>
<div class='content content3'style="">
<divclass='prev'></div>
<div class='concon3'><!--外部div相對定位 relative-->
<ul class='conul conul3'><!--外部div絕對定位 absolute-->
<li>111</li><li>222</li><li>333</li><li>444</li><li>555</li><li>666</li>
</ul>
</div>
<divclass='next'>dd</div>
</div>
<scripttype='text/javascript'>
left_right_scroll('.content3','.con3','.conul3',3,2,1000,'ee');
</script>
<hr>
</body>
</html>