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" />
<title>jQuery多图横向滚动效果</title>
<link type="text/css" href="css/zzsc.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/zzsc.js"></script>
</head>

<body><br />
<!-- 代码开始 -->
<div class="box">
	<div class="picbox">
		<ul class="piclist mainlist">
			<li><a href="#" target="_blank"><img src="images/1.jpg" width="220" height="105" /></a></li>
			<li><a href="#" target="_blank"><img src="images/2.jpg" /></a></li>
			<li><a href="#" target="_blank"><img src="images/3.jpg" /></a></li>
			<li><a href="#" target="_blank"><img src="images/4.jpg" /></a></li>
			<li><a href="#" target="_blank"><img src="images/1.jpg" /></a></li>
            <li><a href="#" target="_blank"><img src="images/2.jpg" /></a></li>
			<li><a href="#" target="_blank"><img src="images/3.jpg" /></a></li>
			<li><a href="#" target="_blank"><img src="images/4.jpg" /></a></li>
		</ul>
        <ul class="piclist swaplist"></ul>
	</div>
	<div class="og_prev"></div>
	<div class="og_next"></div>
</div>
<!-- 代码结束 -->
<style type="text/css">
.footer p{font:normal 12px/2em '微软雅黑';text-align:center;}
</style>
</body>
</html>

JS代码(zzsc.js):

// JavaScript Document$(document).ready(function(e){
	/***不需要自动滚动，去掉即可***/
time = window.setInterval(function(){
	$('.og_next').click();
}
,5000);
	/***不需要自动滚动，去掉即可***/
linum = $('.mainlist li').length;
	//图片数量w = linum * 250;
	//ul宽度$('.piclist').css('width',w + 'px');
	//ul宽度$('.swaplist').html($('.mainlist').html());
	//复制内容$('.og_next').click(function(){
	if($('.swaplist,.mainlist').is(':animated')){
	$('.swaplist,.mainlist').stop(true,true);
}
if($('.mainlist li').length>4){
	//多于4张图片ml = parseInt($('.mainlist').css('left'));
	//默认图片ul位置sl = parseInt($('.swaplist').css('left'));
	//交换图片ul位置if(ml<=0 && ml>w*-1){
	//默认图片显示时$('.swaplist').css({
	left:'1000px'}
);
	//交换图片放在显示区域右侧$('.mainlist').animate({
	left:ml - 1000 + 'px'}
,'slow');
	//默认图片滚动if(ml==(w-1000)*-1){
	//默认图片最后一屏时$('.swaplist').animate({
	left:'0px'}
,'slow');
	//交换图片滚动}
}
else{
	//交换图片显示时$('.mainlist').css({
	left:'1000px'}
)//默认图片放在显示区域右$('.swaplist').animate({
	left:sl - 1000 + 'px'}
,'slow');
	//交换图片滚动if(sl==(w-1000)*-1){
	//交换图片最后一屏时$('.mainlist').animate({
	left:'0px'}
,'slow');
	//默认图片滚动}
}
}
}
)$('.og_prev').click(function(){
	if($('.swaplist,.mainlist').is(':animated')){
	$('.swaplist,.mainlist').stop(true,true);
}
if($('.mainlist li').length>4){
	ml = parseInt($('.mainlist').css('left'));
	sl = parseInt($('.swaplist').css('left'));
	if(ml<=0 && ml>w*-1){
	$('.swaplist').css({
	left:w * -1 + 'px'}
);
	$('.mainlist').animate({
	left:ml + 1000 + 'px'}
,'slow');
	if(ml==0){
	$('.swaplist').animate({
	left:(w - 1000) * -1 + 'px'}
,'slow');
}
}
else{
	$('.mainlist').css({
	left:(w - 1000) * -1 + 'px'}
);
	$('.swaplist').animate({
	left:sl + 1000 + 'px'}
,'slow');
	if(sl==0){
	$('.mainlist').animate({
	left:'0px'}
,'slow');
}
}
}
}
)}
);
	$(document).ready(function(){
	$('.og_prev,.og_next').hover(function(){
	$(this).fadeTo('fast',1);
}
,function(){
	$(this).fadeTo('fast',0.7);
}
)}
)

CSS代码(zzsc.css):

/* CSS Document */
body,ul,li{padding:0;margin:0;}
ul,li{list-style:none;}
img{border:none;}
a{color:#6cf;}
a:hover{color:#84B263;}
.box{width:980px;margin:0 auto;position:relative;overflow:hidden;_height:100%;}
.picbox{width:980px;height:115px;overflow:hidden;position:relative;}
.piclist{height:115px;position:absolute;left:0px;top:0px}
.piclist li{background:#eee;margin-right:20px;padding:5px;float:left;}
.swaplist{position:absolute;left:-3000px;top:0px}
.og_prev,.og_next{width:30px;height:50px;background:url(../images/icon.png) no-repeat;background:url(../images/icon_ie6.png) no-repeat\9;position:absolute;top:33px;z-index:99;cursor:pointer;filter:alpha(opacity=70);opacity:0.7;}
.og_prev{background-position:0 -60px;left:4px;}
.og_next{background-position:0 0;right:4px;}

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