jquery左右循环滚动图片代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery左右循环滚动图片代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>jquery左右循环滚动图片代码</title>
<link rel=stylesheet type=text/css href="css/lrtk.css">
<script type=text/javascript src="js/jquery.js"></script>
<script type=text/javascript charset=utf-8 src="js/lrscroll.js"></script>
</head>

<body style="text-align:center">
    <div id=featureContainer>
        <div id=feature>
            <div id=block>
                <div id=botton-scroll>
                    <ul class=featureUL>
                        <li class=featureBox>
                            <div class=box><a href="#" target="_blank"><img alt=Paracletos src="images/01.jpg" width=240 height=150 /> </a></div>
                            <!-- /box -->
                        </li>
                        <li class=featureBox>
                            <div class=box><a href="#" target="_blank"><img alt="Natural Touch Soap" src="images/02.jpg" width=240 height=150 /> </a></div>
                            <!-- /box -->
                        </li>
                        <li class=featureBox>
                            <div class=box><a href="#" target="_blank"><img alt="LRTK" src="images/03.jpg" width=240 height=150 /> </a></div>
                            <!-- /box -->
                        </li>
                        <li class=featureBox>
                            <div class=box><a href="#" target="_blank"><img alt="Natalie Reid" src="images/04.jpg" width=240 height=150 /> </a></div>
                            <!-- /box -->
                        </li>
                        <li class=featureBox>
                            <div class=box><a href="#" target="_blank"><img alt="xixi" src="images/05.jpg" width=240 height=150 /> </a></div>
                            <!-- /box -->
                        </li>
                        <li class=featureBox>
                            <div class=box><a href="#" target="_blank"><img alt="Catherine Sherwood" src="images/06.jpg" width=240 height=150 /> </a></div>
                            <!-- /box -->
                        </li>
                    </ul>
                </div><!-- /botton-scroll -->
            </div><!-- /block --><a class=prev href="javascript:void();">Previous</a><a class=next href="javascript:void();">Next</a>
        </div>
        <!-- /feature -->
    </div><!-- /featureContainer -->
    <div id=wrap><span id=load>LOADING...</span></div><!-- /wrap -->
</body>
</html>

JS代码(lrscroll.js):

(function($){
	$.fn.jCarouselLite=function(o){
	o=$.extend({
	btnPrev:null,btnNext:null,btnGo:null,mouseWheel:false,auto:null,speed:1000,easing:null,vertical:false,circular:true,visible:3,start:0,scroll:3,beforeStart:null,afterEnd:null}
,o||{
}
);
	return this.each(function(){
	var b=false,animCss=o.vertical?"top":"left",sizeCss=o.vertical?"height":"width";
	var c=$(this),ul=$("ul",c),tLi=$("li",ul),tl=tLi.size(),v=o.visible;
	if(o.circular){
	ul.prepend(tLi.slice(tl-v-1+1).clone()).append(tLi.slice(0,v).clone());
	o.start+=v}
var f=$("li",ul),itemLength=f.size(),curr=o.start;
	c.css("visibility","visible");
	f.css({
	overflow:"hidden",float:o.vertical?"none":"left"}
);
	ul.css({
	margin:"0",padding:"0",position:"relative","list-style-type":"none","z-index":"1"}
);
	c.css({
	overflow:"hidden",position:"relative","z-index":"2",left:"0px"}
);
	var g=o.vertical?height(f):width(f);
	var h=g*itemLength;
	var j=g*v;
	f.css({
	width:f.width(),height:f.height()}
);
	ul.css(sizeCss,h+"px").css(animCss,-(curr*g));
	c.css(sizeCss,j+"px");
	if(o.btnPrev)$(o.btnPrev).click(function(){
	return go(curr-o.scroll)}
);
	if(o.btnNext)$(o.btnNext).click(function(){
	return go(curr+o.scroll)}
);
	if(o.btnGo)$.each(o.btnGo,function(i,a){
	$(a).click(function(){
	return go(o.circular?o.visible+i:i)}
)}
);
	if(o.mouseWheel&&c.mousewheel)c.mousewheel(function(e,d){
	return d>0?go(curr-o.scroll):go(curr+o.scroll)}
);
	if(o.auto)setInterval(function(){
	go(curr+o.scroll)}
,o.auto+o.speed);
	function vis(){
	return f.slice(curr).slice(0,v)}
;
	function go(a){
	if(!b){
	if(o.beforeStart)o.beforeStart.call(this,vis());
	if(o.circular){
	if(a<=o.start-v-1){
	ul.css(animCss,-((itemLength-(v*2))*g)+"px");
	curr=a==o.start-v-1?itemLength-(v*2)-1:itemLength-(v*2)-o.scroll}
else if(a>=itemLength-v+1){
	ul.css(animCss,-((v)*g)+"px");
	curr=a==itemLength-v+1?v+1:v+o.scroll}
else curr=a}
else{
	if(a<0||a>itemLength-v)return;
	else curr=a}
b=true;
	ul.animate(animCss=="left"?{
	left:-(curr*g)}
:{
	top:-(curr*g)}
,o.speed,o.easing,function(){
	if(o.afterEnd)o.afterEnd.call(this,vis());
	b=false}
);
	if(!o.circular){
	$(o.btnPrev+","+o.btnNext).removeClass("disabled");
	$((curr-o.scroll<0&&o.btnPrev)||(curr+o.scroll>itemLength-v&&o.btnNext)||[]).addClass("disabled")}
}
return false}
}
)}
;
	function css(a,b){
	return parseInt($.css(a[0],b))||0}
;
	function width(a){
	return a[0].offsetWidth+css(a,'marginLeft')+css(a,'marginRight')}
;
	function height(a){
	return a[0].offsetHeight+css(a,'marginTop')+css(a,'marginBottom')}
}
)(jQuery);
	$(function(){
	$("#botton-scroll").jCarouselLite({
	btnNext:".next",btnPrev:".prev"}
);
}
);
	$(function (){
	$('#top-menu li').hover(function (){
	$('ul',this).slideDown(200);
}
,function (){
	$('ul',this).slideUp(200);
}
);
}
);
	$(function (){
	$(".click").click(function(){
	$("#panel").slideToggle("slow");
	$(this).toggleClass("active");
	return false;
}
);
}
);
	$(function (){
	$('.fade').hover(function(){
	$(this).fadeTo("slow",0.5);
}
,function(){
	$(this).fadeTo("slow",5);
}
);
}
);

CSS代码(lrtk.css):

BODY{FONT-FAMILY:"Lucida Sans Unicode","Lucida Grande",Verdana,Arial,Helvetica,sans-serif;FONT-SIZE:14px;PADDING-TOP:0px}
* A{POSITION:relative}
/*����������ʽ*/
A{FONT-SIZE:14px;COLOR:#000;CURSOR:pointer}
A:link{COLOR:#333;TEXT-DECORATION:none;OUTLINE-STYLE:none}
A:visited{COLOR:#333;TEXT-DECORATION:none;}
A:hover{COLOR:#333;TEXT-DECORATION:underline;}
A:active{COLOR:#333;TEXT-DECORATION:none;OUTLINE-STYLE:none}
A IMG{BORDER-BOTTOM-STYLE:none;BORDER-RIGHT-STYLE:none;BORDER-TOP-STYLE:none;BORDER-LEFT-STYLE:none}
#featureContainer{BORDER-BOTTOM:#999 0px dotted;BORDER-LEFT:#999 0px dotted;MARGIN:0px auto;WIDTH:923px;FONT-SIZE:80%;BORDER-TOP:#999 0px dotted;BORDER-RIGHT:#999 0px dotted}
#wrap{OVERFLOW:hidden}
#load{BACKGROUND-IMAGE:url(images/loader32x32.gif);BORDER-BOTTOM:#999 0px dotted;BORDER-LEFT:#999 0px dotted;TEXT-INDENT:-9999px;MARGIN:0px auto;WIDTH:923px;DISPLAY:none;BACKGROUND-REPEAT:no-repeat;BACKGROUND-POSITION:center 50%;HEIGHT:100px;BORDER-TOP:#999 0px dotted;BORDER-RIGHT:#999 0px dotted}
#feature{BORDER-BOTTOM:#999 0px dotted;POSITION:relative;BORDER-LEFT:#999 0px dotted;MARGIN-TOP:5px;MARGIN-BOTTOM:20px;BORDER-TOP:#999 0px dotted;BORDER-RIGHT:#999 0px dotted}
#feature .button{BORDER-BOTTOM:#999 0px dotted;POSITION:absolute;BORDER-LEFT:#999 0px dotted;WIDTH:840px;BORDER-TOP:#999 0px dotted;TOP:72px;BORDER-RIGHT:#999 0px dotted;LEFT:0px}
#feature .prev{BORDER-BOTTOM:#999 0px dotted;BORDER-LEFT:#999 0px dotted;TEXT-INDENT:-9999px;WIDTH:30px;DISPLAY:block;BACKGROUND:url(../images/feature_left.gif) center top;FLOAT:left;HEIGHT:48px;BORDER-TOP:#999 0px dotted;TOP:-125px;BORDER-RIGHT:#999 0px dotted}
#feature .next{BORDER-BOTTOM:#999 0px dotted;BORDER-LEFT:#999 0px dotted;TEXT-INDENT:-9999px;WIDTH:30px;DISPLAY:block;BACKGROUND:url(../images/feature_right.gif) center top;FLOAT:right;HEIGHT:48px;BORDER-TOP:#999 0px dotted;TOP:-125px;BORDER-RIGHT:#999 0px dotted}
#feature .prev:hover{BACKGROUND-POSITION:center bottom}
#feature .next:hover{BACKGROUND-POSITION:center bottom}
.featureUL{BORDER-BOTTOM:#000 0px dotted;POSITION:relative;BORDER-LEFT:#000 0px dotted;PADDING-BOTTOM:0px;LIST-STYLE-TYPE:none;MARGIN:0px;PADDING-LEFT:0px;WIDTH:2800px;PADDING-RIGHT:0px;FLOAT:left;BORDER-TOP:#000 0px dotted;BORDER-RIGHT:#000 0px dotted;PADDING-TOP:0px;LEFT:0px}
.featureBox{BACKGROUND-IMAGE:url(../images/bg-featurebox.jpg);BORDER-BOTTOM:#999 0px dotted;BORDER-LEFT:#999 0px dotted;WIDTH:280px;BACKGROUND-REPEAT:no-repeat;FLOAT:left;HEIGHT:230px;OVERFLOW:hidden;BORDER-TOP:#999 0px dotted;BORDER-RIGHT:#999 0px dotted;PADDING-TOP:10px}
#botton-scroll{Z-INDEX:0;BORDER-BOTTOM:#999 0px dotted;BORDER-LEFT:#999 0px dotted;MARGIN:0px auto;WIDTH:840px;FLOAT:left;HEIGHT:200px;BORDER-TOP:#999 0px dotted;BORDER-RIGHT:#999 0px dotted}
#block{Z-INDEX:0;BORDER-BOTTOM:#999 0px dotted;POSITION:relative;BORDER-LEFT:#999 0px dotted;PADDING-BOTTOM:20px;MARGIN:0px auto;PADDING-LEFT:0px;WIDTH:840px;PADDING-RIGHT:0px;HEIGHT:180px;FONT-SIZE:70%;OVERFLOW:hidden;BORDER-TOP:#999 0px dotted;BORDER-RIGHT:#999 0px dotted;PADDING-TOP:0px}
#block .box{BORDER-BOTTOM:#d8d8d8 0px solid;BORDER-LEFT:#d8d8d8 0px solid;PADDING-BOTTOM:10px;MARGIN:0px 10px;PADDING-LEFT:10px;WIDTH:240px;PADDING-RIGHT:10px;FLOAT:left;HEIGHT:150px;BORDER-TOP:#d8d8d8 0px solid;BORDER-RIGHT:#d8d8d8 0px solid;PADDING-TOP:10px}
#block .box .feature-title{FONT-SIZE:140%;FONT-WEIGHT:normal}
#block .box .feature-thumb{WIDTH:240px;MARGIN-BOTTOM:5px;FLOAT:left;HEIGHT:150px}

附件:下载该文件资源,减少时间成本(增值服务)