Jquery は、images_jquery の自動左右スクロールの例を実装します。

コードをコピー コードは次のとおりです:

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;パディング:2px 3px; text-decoration:none;}
h1 a:hover{background:#eee; text-decoration:underline}
h2,h3{font-size:1em;フォントの太さ:標準;色:#a40000;マージン:1em 自動;位置:相対}
h3{色:#888; font-weight:bold}
ul,li,ol{list-style:none}

.ibox{width:850px;高さ:210ピクセル;背景:#ddd;マージン:1em 自動;ボーダー:1em ソリッド #ddd;位置:相対; overflow:hidden}
.ibox .showbox{position:absolute;left:0;width:2550px;高さ:170ピクセル;背景:#fff}
.ibox .showbox ul li{float:left;margin:7px}
.ibox .showbox ul li img{width:150px;高さ:150ピクセル;ボーダー:3px ソリッド #a40000}
.ibox スパン{位置:絶対;パディング:2px 5px;背景:#fff;カーソル:ポインター;}
.ibox span.pre{left:10px; Bottom:0}
.ibox span.next{right:10px;底:0}
.ibox span.num{右:45%;下:0;背景:#ddd;line-height:18px;}
.ibox span.num li{display:inline;margin:0 5px;パディング:1px 5px; line-height:18px}
.ibox span.num .numcur{background:#a40000; color:#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'); autoFun;
//@Mr.Think***调用自動滚動
autoSlide();
//@Mr.Think***方向前滚動
$pre.click(function() {
if (!$showbox.is(':animated')) { // 展示区の有無判断
if ($cur == 1) { // 第一版面時, 再向前滚動へ最後の版面
$showbox.animate({
left: '-=' $w * ($pages - 1)
}, //改变左值,切换显表示版面, 500(ms) は滚動時間、下同
$cur = $pages; //初期化版面は最後のバージョン
}
else {
$showbox.animate({
left: ' =' $w
}, 500); //改变左值,切换显表示版面
$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); //変更左值、切换表示版面、500(ミリ秒)は動作時間、下同
$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); //改左值,切换表示版面,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();
} 、関数(){
autoSlide()
});
}
//@Mr.Think***自動滚動
function autoSlide(){
$next.trigger('click');
$autoFun = setTimeout(autoSlide, 4000);//此处使用不可setInterval,setInterval是重复执行传入関数,这会起第二次划入時停止失效
}
//@ Mr.Think***清除自動滚動
function clearAuto(){
clearTimeout($autoFun);
}
});

• 


• 


• 


• 


• 


• 


• 


• 


• 


• 


• 


• 


• 

«向左滚動
向右滚動»

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。