Jquery實現圖片左右自動滾動範例_jquery

;






body{font-size: 0.8em;letter-spacing:1px;font-family:"微軟雅黑";行高：1.8em}
div,ul,li,ol,img{margin:0;padding:0}
h1 {font-size:1em;字體粗細：正常；}
h1 a{背景：#CFF;內邊距：2px 3px；文字裝飾：無;}
h1 a:hover{背景:#eee;文字裝飾:底線}
h2,h3{字體大小:1em;字體粗細：正常；顏色：#a40000；保證金：1em 自動；位置：相對}
h3{顏色：#888;字體粗細：粗體}
ul,li,ol{列表樣式：無}

.ibox{寬度：850px;高度：210px；背景：#ddd；保證金：1em 自動；邊框：1em 實線#ddd ；職位：親屬；溢出：隱藏}
.ibox .showbox{位置：絕對；左：0；寬度：2550px；高度：170px；背景：#fff}
.ibox .showbox ul li{float: left;margin:7px}
.ibox .showbox ul li img{width:150px;高度：150px；邊框：3px 實心#a40000}
.ibox span{位置：絕對;填充：2px 5pxx; #fff；遊標:指針;}
.ibox span.pre{left:10px;底部:0}
.ibox span.next{right:10px;底部:0}
.ibox span.num {右:45%;底部：0；背景：#ddd;行高：18px;}
.ibox span.num li{display:inline;margin:0 5px;內邊距：1px 5px；行高： 18px}
.ibox span.num .numcur{背景：#a40000;顏色:#fff}


$(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***事件劃入時停止自動捲動
functionclearFun(elem){
elem.hover(function(){
clearAuto();
} , function() {
autoSlide();
});
}
//@Mr.Think***自動捲動
function autoSlide(){
$next.trigger('clicktion autoSlide(){
$next.trigger('click ');
$autoFun = setTimeout(autoSlide, 4000);//此處不可使用setInterval,setInterval是重複執行呼叫函數,這會引起第二次劃入時停止故障
}
/ /@ Mr.Think***清除自動捲動
functionclearAuto(){
clearTimeout($autoFun);
}
});
腳本>
頭>



身體>