<!DOCTYPE HTML>
<html>
<head>
<title>Control left and right scrolling effect based on jQuery_auto scrolling version</title>
<script src="/ajax/libs/jquery/1.4/"></script>
<style>
body{font-size:0.8em;letter-spacing:1px;font-family:"Microsoft Yahei"; 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 {left:10px; bottom:0}
.ibox {right:10px; bottom:0}
.ibox {right:45%; bottom:0; background:#ddd;line-height:18px;}
.ibox li{display:inline;margin:0 5px; padding:1px 5px; line-height:18px}
.ibox .numcur{background:#a40000; color:#fff}
</style>
<script>
$(function(){
//@***variable
var $cur = 1;//Initialize the displayed layout
var $i = 5;//Number of display per version
var $len = $('.showbox>ul>li').length;//Calculate the total length of the list (number)
var $pages = ($len / $i);//Calculate the number of display pages
var $w = $('.ibox').width();//Get the peripheral width of the display area
var $showbox = $('.showbox');
var $num = $(' li')
var $pre = $('')
var $next = $('');
var $autoFun;
//@***The call automatically scrolls
autoSlide();
//@***Scroll forward
$(function(){
if (!$(':animated')) { //Judge whether the display area is animated
if ($cur == 1) { // When in the first layout, scroll forward to the last layout
$({
left: '-=' + $w * ($pages - 1)
}, 500); //Change the left value and switch the display layout. 500(ms) is the scroll time, the same below
$cur = $pages; //The initialization page is the last page
}
else {
$({
left: '+=' + $w
}, 500); //Change the left value and switch the display layout
$cur--; //The layout is reduced
}
$($cur - 1).addClass('numcur').siblings().removeClass('numcur'); //Add highlight style to the corresponding layout number and remove highlight styles of the same level elements
}
});
//@***Scroll back
$(function(){
if (!$(':animated')) { //Judge whether the display area is animated
if ($cur == $pages) { // When the last page, scroll back to the first page
$({
left: 0
}, 500); //Change the left value and switch the display layout. 500(ms) is the scroll time, the same below
$cur = 1; //The initialization layout is the first layout
}
else {
$({
left: '-=' + $w
}, 500);//Change the left value and switch the display layout
$cur++; //Accumulate layouts
}
$($cur - 1).addClass('numcur').siblings().removeClass('numcur'); //Add highlight style to the corresponding layout number and remove highlight styles of the same level elements
}
});
//@***Number click event
$(function(){
if (!$(':animated')) { //Judge whether the display area is animated
var $index = $(this); //Index the position value of the current click in the list
$({
left: '-' + ($w * $index)
}, 500); //Change the left value and switch the display layout. 500(ms) is the scroll time
$cur = $index + 1; //Initialize the page value. This sentence can avoid clicking the backward button when scrolling to the third version and appearing in the blank version. The value of index() starts from 0, so add 1
$(this).addClass('numcur').siblings().removeClass('numcur'); //Add highlight style to the current click and remove the highlight style of the same element
}
});
//@***Stop scrolling
clearFun($showbox);
clearFun($pre);
clearFun($next);
clearFun($num);
//@***The automatic scrolling stops when the event is entered
function clearFun(elem){
(function(){
clearAuto();
}, function(){
autoSlide();
});
}
//@***Auto scroll
function autoSlide(){
$('click');
$autoFun = setTimeout(autoSlide, 4000);//SetInterval cannot be used here. SetInterval is to repeatedly execute the incoming function, which will cause the second time to stop invalidation.
}
//@***Clear automatic scrolling
function clearAuto(){
clearTimeout($autoFun);
}
});
</script>
</head>
<body>
<div class="ibox">
<div class="showbox">
<ul>
<li><img src="///demoimg/201007/f8a9dd53720bf31b5917915e8222c27370a3681c_m.jpg" alt="demo" title="demo" /></li>
<li><img src="///demoimg/201007/15a1d7982c49b0e638ae3340cf86dc4469f955cc_m.jpg" alt="demo" title="demo" /></li>
<li><img src="///demoimg/201007/68e9a7a8476e26a1022fa5e39ccdda669a5d4f08_m.jpg" alt="demo" title="demo" /></li>
<li><img src="///demoimg/201007/56d1b9aaff5b424f1cdb08b80544d5150839b4de_m.jpg" alt="demo" title="demo" /></li>
<li><img src="///demoimg/201007/56d1b9aaff5b424f1cdb08b80544d5150839b4de_m.jpg" alt="demo" title="demo" /></li>
<li><img src="///demoimg/201007/20417dfc945bae6c720a660625e9652a154c2c94_m.jpg" alt="demo" title="demo" /></li>
<li><img src="///demoimg/201007/f4a9f29299f3dba6e7af0ac3c5aff93e01f874d3_m.jpg" alt="demo" title="demo" /></li>
<li><img src="///demoimg/201007/ca6f0c9ac0c6e3bfce827cd92833e1db620b6377_m.jpg" alt="demo" title="demo" /></li>
<li><img src="///demoimg/201007/809fcfbb8a1f58d1d47a760fd4283556cce201ef_m.jpg" alt="demo" title="demo" /></li>
<li><img src="///demoimg/201007/15a1d7982c49b0e638ae3340cf86dc4469f955cc_m.jpg" alt="demo" title="demo" /></li>
<li><img src="///demoimg/201007/56d1b9aaff5b424f1cdb08b80544d5150839b4de_m.jpg" alt="demo" title="demo" /></li>
<li><img src="///demoimg/201007/15a1d7982c49b0e638ae3340cf86dc4469f955cc_m.jpg" alt="demo" title="demo" /></li>
<li><img src="///demoimg/201007/49d6ae8901500f473a2e3e58e5b5ddc0e788bc9d_m.jpg" alt="demo" title="demo" /></li>
</ul>
</div>
<span class="pre">«Scroll to the left</span>
<span class="next">Scroll right»</span>
</div>
</body>
</html>