<머리>
基于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; 글꼴 무게:일반;}
h1 a{배경:#CFF; 패딩:2px 3px; 텍스트 장식:없음;}
h1 a:hover{배경:#eee; 텍스트 장식:밑줄}
h2,h3{글꼴 크기:1em; 글꼴 두께:일반; 색상:#a40000; 여백:1em 자동; 위치:상대}
h3{색상:#888; 글꼴 무게:bold}
ul,li,ol{list-style:none}
.ibox{width: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 범위{위치:절대;패딩:2px 5px; 배경:#fff; 커서:포인터;}
.iboxspan.pre{왼쪽:10px; 하단:0}
.iboxspan.next{오른쪽:10px; 하단:0}
.ibox 스팬.번호{오른쪽:45%; 하단:0; 배경:#ddd;라인 높이:18px;}
.ibox span.num li{display:inline;margin:0 5px; 패딩:1px 5px; line-height:18px}
.iboxspan.num .numcur{배경:#a40000; 색상:#fff}
<스크립트>
$(function(){
//@Mr.Think***变weight
var $cur = 1;//初始化显示的版face
var $i = 5;//每版显示数
var $len = $('.showbox>ul>li').length;//计算列表总长道(个数)
var $pages = Math.ceil($len / $i) | >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; //初始化版face为最后一个版face
}
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({
왼쪽: 0
}, 500); //改变left值,切换显示版face,500(ms)为滚动时间,下同
$cur = 1; //初始化版면为第一个版면
}
else {
$showbox.animate({
left: '-=' $w
}, 500);//改变left值,切换显示版면
$cur ; //면접수
}
$num.eq($cur - 1).addClass('numcur').siblings().removeClass('numcur'); //为对应的版face数字加上高亮样式,并移除同级元素的高亮样式
}
});
//@Mr.Think***数字点击事件
$num.click(function(){
if (!$showbox.is(':animated')) { //判断展示区是否动画
var $index = $num.index(this); //索引流当前点击在列表中的位置值
$showbox.animate({
왼쪽: '-' ($w * $ index)
}, 500);到第3版时,点击向后按钮,출면공백색版.index()取值是从0开始的,故加1
$(this).addClass('numcur').siblings().removeClass( 'numcur'); //为当前点击加上高亮样式,并移除同级样式
}
});
//@Mr.Think***停止滚动
clearFun($showbox);
clearFun($pre);
clearFun($next);
clearFun($num); autoSlide()
});
}
//@Mr.Think***自动滚动
function autoSlide(){
$next.trigger('click'); //@ Mr.Think***清除自动滚动
function clearAuto(){
clearTimeout($autoFun);
}
});
<본문>
