jquery无缝滚动效果实现
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); });
pr.mouseover(function(){
clearInterval(autoTimer);
});
ne.mouseover(function(){
clearInterval(autoTimer);
}); _this.mouseleave(function(){ autoScroll(); }); } } $(function(){ switchScroll($('#Scroll'),$('.prev'),$('.next'),500,920,true,2000); }); </script>
一次滚动两张图
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 Ls = Math.ceil(s_l/2); if(s_l%2 != 0){ var tmpl = obj.html(); obj.html(tmpl+tmpl); Ls = s_l; s_l = obj.find('li').length; } var temp = _this.html(); _this.css('width',baseW*Ls+'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(); var tp1 = _this.find('li').eq(s_l-2).html(); _this.find('li').eq(0).before('<li class="fl">'+ tp +'</li>'); _this.find('li').eq(s_l).remove(); _this.find('li').eq(0).before('<li class="fl">'+ tp1 +'</li>'); _this.find('li').eq(s_l).remove(); _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*Ls-baseW)){ var tp = _this.find('li').eq(0).html(); var tp1 = _this.find('li').eq(1).html(); _this.find('li').eq(s_l-1).after('<li class="fl">'+ tp +'</li>'); _this.find('li').eq(0).remove(); _this.find('li').eq(s_l-1).after('<li class="fl">'+ tp1 +'</li>'); _this.find('li').eq(0).remove(); _this.css('left',-(baseW*Ls-baseW*2)+'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); } } }); function autoScroll(){ clearInterval(autoTimer); autoTimer = setInterval(function(){ ne.trigger('click'); },autoSpeed); } if(!!isAuto){ autoScroll(); _this.mouseover(function(){ clearInterval(autoTimer); }); pr.mouseover(function(){ clearInterval(autoTimer); }); ne.mouseover(function(){ clearInterval(autoTimer); }); _this.mouseleave(function(){ autoScroll(); }); } }
