（轉）jquery圖片左右滾動

劍握在手發表於2013-12-28
jQuery
<!DOCTYPE HTML> 
<html> 
<head> 
<title>基於jQuery的控制左右滾動效果_自動滾動版本</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<style> 

body{font-size:0.8em;letter-spacing:1px;font-family:"微軟雅黑"; line-height:1.8em} 
div,ul,li,ol,img{margin:0;padding:0} 
h1{font-size:1em; font-weight:normal;} 
h1 a{background:#CFF; padding:2px 3px; text-decoration:none;} 
h1 a:hover{background:#eee; text-decoration:underline} 
h2,h3{font-size:1em; font-weight:normal; color:#a40000; margin:1em auto; position:relative} 
h3{color:#888; font-weight:bold} 
ul,li,ol{list-style:none} 

.ibox{width:850px; height:210px; background:#ddd; margin:1em auto; border:1em solid #ddd; position:relative; overflow:hidden} 
.ibox .showbox{position:absolute;left:0;width:2550px; height:170px; background:#fff} 
.ibox .showbox ul li{float:left;margin:7px} 
.ibox .showbox ul li img{width:150px; height:150px; border:3px solid #a40000} 
.ibox span{position:absolute;padding:2px 5px; background:#fff; cursor:pointer;} 
.ibox span.pre{left:10px; bottom:0} 
.ibox span.next{right:10px; bottom:0} 
.ibox span.num{right:45%; bottom:0; background:#ddd;line-height:18px;} 
.ibox span.num li{display:inline;margin:0 5px; padding:1px 5px; line-height:18px} 
.ibox span.num .numcur{background:#a40000; color:#fff} 
</style> 
<script> 
$(function(){ 
//@Mr.Think***變數 
var $cur = 1;//初始化顯示的版面 
var $i = 5;//每版顯示數 
var $len = $('.showbox>ul>li').length;//計算列表總長度(個數) 
var $pages = Math.ceil($len / $i);//計算展示版面數量 
var $w = $('.ibox').width();//取得展示區外圍寬度 
var $showbox = $('.showbox'); 
var $num = $('span.num li') 
var $pre = $('span.pre') 
var $next = $('span.next'); 
var $autoFun; 
//@Mr.Think***呼叫自動滾動 
autoSlide(); 
//@Mr.Think***向前滾動 
$pre.click(function(){ 
if (!$showbox.is(':animated')) { //判斷展示區是否動畫 
if ($cur == 1) { //在第一個版面時,再向前滾動到最後一個版面 
$showbox.animate({ 
left: '-=' + $w * ($pages - 1) 
}, 500); //改變left值,切換顯示版面,500(ms)為滾動時間,下同 
$cur = $pages; //初始化版面為最後一個版面 
} 
else { 
$showbox.animate({ 
left: '+=' + $w 
}, 500); //改變left值,切換顯示版面 
$cur--; //版面累減 
} 
$num.eq($cur - 1).addClass('numcur').siblings().removeClass('numcur'); //為對應的版面數字加上高亮樣式,並移除同級元素的高亮樣式 
} 
}); 
//@Mr.Think***向後滾動 
$next.click(function(){ 
if (!$showbox.is(':animated')) { //判斷展示區是否動畫 
if ($cur == $pages) { //在最後一個版面時,再向後滾動到第一個版面 
$showbox.animate({ 
left: 0 
}, 500); //改變left值,切換顯示版面,500(ms)為滾動時間,下同 
$cur = 1; //初始化版面為第一個版面 
} 
else { 
$showbox.animate({ 
left: '-=' + $w 
}, 500);//改變left值,切換顯示版面 
$cur++; //版面數累加 
} 
$num.eq($cur - 1).addClass('numcur').siblings().removeClass('numcur'); //為對應的版面數字加上高亮樣式,並移除同級元素的高亮樣式 
} 
}); 
//@Mr.Think***數字點選事件 
$num.click(function(){ 
if (!$showbox.is(':animated')) { //判斷展示區是否動畫 
var $index = $num.index(this); //索引出當前點選在列表中的位置值 
$showbox.animate({ 
left: '-' + ($w * $index) 
}, 500); //改變left值,切換顯示版面,500(ms)為滾動時間 
$cur = $index + 1; //初始化版面值,這一句可避免當滾動到第三版時,點選向後按鈕,出面空白版.index()取值是從0開始的,故加1 
$(this).addClass('numcur').siblings().removeClass('numcur'); //為當前點選加上高亮樣式,並移除同級元素的高亮樣式 
} 
}); 
//@Mr.Think***停止滾動 
clearFun($showbox); 
clearFun($pre); 
clearFun($next); 
clearFun($num); 
//@Mr.Think***事件劃入時停止自動滾動 
function clearFun(elem){ 
elem.hover(function(){ 
clearAuto(); 
}, function(){ 
autoSlide(); 
}); 
} 
//@Mr.Think***自動滾動 
function autoSlide(){ 
$next.trigger('click'); 
$autoFun = setTimeout(autoSlide, 4000);//此處不可使用setInterval,setInterval是重複執行傳入函式,這會引起第二次劃入時停止失效 
} 
//@Mr.Think***清除自動滾動 
function clearAuto(){ 
clearTimeout($autoFun); 
} 
}); 
</script> 
</head> 

<body> 
<div class="ibox"> 
<div class="showbox"> 
<ul> 
<li><img src="http://files.jb51.net/demoimg/201007/f8a9dd53720bf31b5917915e8222c27370a3681c_m.jpg" alt="demo" title="demo" /></li> 
<li><img src="http://files.jb51.net/demoimg/201007/15a1d7982c49b0e638ae3340cf86dc4469f955cc_m.jpg" alt="demo" title="demo" /></li> 
<li><img src="http://files.jb51.net/demoimg/201007/68e9a7a8476e26a1022fa5e39ccdda669a5d4f08_m.jpg" alt="demo" title="demo" /></li> 
<li><img src="http://files.jb51.net/demoimg/201007/56d1b9aaff5b424f1cdb08b80544d5150839b4de_m.jpg" alt="demo" title="demo" /></li> 
<li><img src="http://files.jb51.net/demoimg/201007/56d1b9aaff5b424f1cdb08b80544d5150839b4de_m.jpg" alt="demo" title="demo" /></li> 
<li><img src="http://files.jb51.net/demoimg/201007/20417dfc945bae6c720a660625e9652a154c2c94_m.jpg" alt="demo" title="demo" /></li> 
<li><img src="http://files.jb51.net/demoimg/201007/f4a9f29299f3dba6e7af0ac3c5aff93e01f874d3_m.jpg" alt="demo" title="demo" /></li> 
<li><img src="http://files.jb51.net/demoimg/201007/ca6f0c9ac0c6e3bfce827cd92833e1db620b6377_m.jpg" alt="demo" title="demo" /></li> 
<li><img src="http://files.jb51.net/demoimg/201007/809fcfbb8a1f58d1d47a760fd4283556cce201ef_m.jpg" alt="demo" title="demo" /></li> 
<li><img src="http://files.jb51.net/demoimg/201007/15a1d7982c49b0e638ae3340cf86dc4469f955cc_m.jpg" alt="demo" title="demo" /></li> 
<li><img src="http://files.jb51.net/demoimg/201007/56d1b9aaff5b424f1cdb08b80544d5150839b4de_m.jpg" alt="demo" title="demo" /></li> 
<li><img src="http://files.jb51.net/demoimg/201007/15a1d7982c49b0e638ae3340cf86dc4469f955cc_m.jpg" alt="demo" title="demo" /></li> 
<li><img src="http://files.jb51.net/demoimg/201007/49d6ae8901500f473a2e3e58e5b5ddc0e788bc9d_m.jpg" alt="demo" title="demo" /></li> 
</ul> 
</div> 
<span class="pre">«向左滾動</span> 
<span class="next">向右滾動»</span> 

</div> 
</body> 
</html>
詳細出處參考：http://www.jb51.net/article/41681.htm

 

相關文章