demo如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">
html{background:white;color:black}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}body,button,input,select,textarea{font:12px \5b8b\4f53,arial,sans-serif}input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}th{text-align:inherit}fieldset,img{border:0}iframe{display:block}abbr,acronym{border:0;font-variant:normal}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}q:before,q:after{content:‘‘}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}a:hover{text-decoration:underline}ins,a{text-decoration:none}a:focus,*:focus{outline:0}.clearfix:before,.clearfix:after{content:"";display:table}.clearfix:after{clear:both;overflow:hidden}.clearfix{zoom:1}.clear{clear:both;display:block;font-size:0;height:0;line-height:0;overflow:hidden}.hide{display:none}.block{display:block}.fl,.fr{display:inline}.fl{float:left}.fr{float:right}
.block{display:block;}
a:hover{text-decoration:none;}
.scroll_box{width:920px;position:relative;margin:0 auto;}
.prev{width:40px;height:86px;background:#000;position:absolute;top:160px;left:-40px;font-size:60px;color:#fff;text-align:center;line-height:86px;}
.next{width:40px;height:86px;background:#000;position:absolute;top:160px;right:-40px;font-size:60px;color:#fff;text-align:center;line-height:86px;}
.prev:hover{opacity:0.8;filter:alpha(opacity=80);}
.next:hover{opacity:0.8;filter:alpha(opacity=80);}
.scroll_con{width:920px;height:430px;position:absolute;top:0px;overflow:hidden;}
.scroll_con ul{height:920px;position:absolute;}
.scroll_con ul li{width:920px;height:430px;}
.scroll_con ul li img{width:100%;height:100%;}
</style>
</head>
<body>
<div class="scroll_box">
<a href="javascript:;" class="prev block"><</a>
<div class="scroll_con">
<ul class="clearfix" id="Scroll">
<li class="fl">
<img src="http://cache.tzj.iwgame.com/act/special/wsry/images/ev3/ev3_slide1.jpg"/>
</li>
<li class="fl">
<img src="http://cache.tzj.iwgame.com/act/special/wsry/images/ev3/ev3_slide2.jpg"/>
</li>
<li class="fl">
<img src="http://cache.tzj.iwgame.com/act/special/wsry/images/ev3/ev3_slide3.jpg"/>
</li>
<li class="fl">
<img src="http://cache.tzj.iwgame.com/act/special/wsry/images/ev3/ev3_slide4.jpg"/>
</li>
</ul>
</div>
<a href="javascript:;" class="next block">></a>
</div>
</body>
</html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
//box 滚动盒子 btn_prev左按钮 btn_next右按钮 speed切换速度 baseW每次滚动宽度 isAuto是否开启自动滚动 autoSpeed自动滚动速度
function switchScroll(box,btn_prev,btn_next,speed,baseW,isAuto,autoSpeed){
var obj = box;
var pr = btn_prev;
var ne = btn_next;
var _this = obj;
var s_l = obj.find(‘li‘).length;
var temp = _this.html();
_this.css(‘width‘,baseW*s_l+‘px‘).css(‘left‘,‘0px‘);
var autoTimer = null;
pr.click(function(){
if(parseInt(_this.css(‘left‘)) >= 0){
var tp = _this.find(‘li‘).eq(s_l-1).html();
_this.find(‘li‘).eq(s_l-1).remove();
_this.find(‘li‘).eq(0).before(‘<li class="fl">‘+ tp +‘</li>‘);
_this.css(‘left‘,-baseW+‘px‘);
if(!_this.is(":animated")){//如果当前不处于动画状态
_this.animate({
‘left‘:(parseInt(_this.css(‘left‘))+baseW)+‘px‘
}, speed );
}
}else{
if(!_this.is(":animated")){//如果当前不处于动画状态
_this.animate({
‘left‘:(parseInt(_this.css(‘left‘))+baseW)+‘px‘
}, speed );
}
}
});
ne.click(function(){
if(parseInt(_this.css(‘left‘)) <= -(baseW*s_l-baseW)){
var tp = _this.find(‘li‘).eq(0).html();
_this.find(‘li‘).eq(s_l-1).after(‘<li class="fl">‘+ tp +‘</li>‘);
_this.css(‘left‘,-(baseW*s_l-baseW*2)+‘px‘);
_this.find(‘li‘).eq(0).remove();
if(!_this.is(":animated")){//如果当前不处于动画状态
_this.animate({
‘left‘:(parseInt(_this.css(‘left‘))-baseW)+‘px‘
}, speed);
}
}else{
if(!_this.is(":animated")){//如果当前不处于动画状态
_this.animate({
‘left‘:(parseInt(_this.css(‘left‘))-baseW)+‘px‘
}, speed);
}
}
});
function autoScroll(){
clearInterval(autoTimer);
autoTimer = setInterval(function(){
ne.trigger(‘click‘);
},autoSpeed);
}
if(!!isAuto){
autoScroll();
_this.mouseover(function(){
clearInterval(autoTimer);
});
_this.mouseleave(function(){
autoScroll();
});
}
}
$(function(){
switchScroll($(‘#Scroll‘),$(‘.prev‘),$(‘.next‘),500,920,true,2000);
});
</script>
时间： 2024-10-13 03:19:08