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=utf-8" />
<title>jQuery左右图片自动滚动特效</title>
<link href="css/zzsc.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="device">
<h2><a href="javascript:;" class="pre">上一组</a><a href="javascript:;" class="next">下一组</a></h2>
<div class="scroll">
<ul>
<li><a href="#"><img src="images/1.jpg" /></a><a href="#" class="link">内容</a></li>
<li><a href="#"><img src="images/2.jpg" /></a><a href="#" class="link">内容</a></li>
<li><a href="#"><img src="images/3.jpg" /></a><a href="#" class="link">内容</a></li>
<li><a href="#"><img src="images/4.jpg" /></a><a href="#" class="link">内容</a></li>
<li><a href="#"><img src="images/5.jpg" /></a><a href="#" class="link">内容</a></li>
<li><a href="#"><img src="images/1.jpg" /></a><a href="#" class="link">内容</a></li>
<li><a href="#"><img src="images/2.jpg" /></a><a href="#" class="link">内容</a></li>
<li><a href="#"><img src="images/3.jpg" /></a><a href="#" class="link">内容</a></li>
<li><a href="#"><img src="images/4.jpg" /></a><a href="#" class="link">内容</a></li>
<li><a href="#"><img src="images/5.jpg" /></a><a href="#" class="link">内容</a></li>
<li><a href="#"><img src="images/1.jpg" /></a><a href="#" class="link">内容</a></li>
<li><a href="#"><img src="images/2.jpg" /></a><a href="#" class="link">内容</a></li>
<li><a href="#"><img src="images/3.jpg" /></a><a href="#" class="link">内容</a></li>
<li><a href="#"><img src="images/4.jpg" /></a><a href="#" class="link">内容</a></li>
<li><a href="#"><img src="images/5.jpg" /></a><a href="#" class="link">内容</a></li>
<li><a href="#"><img src="images/1.jpg" /></a><a href="#" class="link">内容</a></li>
<li><a href="#"><img src="images/2.jpg" /></a><a href="#" class="link">内容</a></li>
<li><a href="#"><img src="images/3.jpg" /></a><a href="#" class="link">内容</a></li>
<li><a href="#"><img src="images/4.jpg" /></a><a href="#" class="link">内容</a></li>
<li><a href="#"><img src="images/5.jpg" /></a><a href="#" class="link">内容</a></li>
</ul>
</div>
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(function(){
	var $number = Math.ceil($('.scroll ul li').length/4); //获取滚动几屏个数
	var margin = 10; //设置图片间距
	var $w = $('.scroll li').width() + margin; // 一屏图片的宽度
	var $width = $w*$number*2; //设置ul宽度
	var pre = $('.device .pre');
	var next = $('.device .next');
	if($number ==1){pre.hide();next.hide();}
	$('.scroll ul').width($width);
	var num = 0;
	function autoscroll(){
		num++;
		if($number ==1){return false}
		if(num ==$number){
			num = 0;	
		}
		var distance = -2*$w * num;
		$('.scroll ul').stop().animate({left:distance});
	}
	var scrollChange = setInterval(autoscroll,8000);
	//鼠标悬停，暂停滚动
	$(".scroll ul,.pre,.next").mouseover(function(){ 
		$('.scroll ul').stop()
		clearInterval(scrollChange);
	});
	// 鼠标移走，滚动继续
	$('.scroll ul,.pre,.next').mouseout(function(){ 
		scrollChange = setInterval(autoscroll,8000);
	});
	
	//下一组
	next.click(function(){
		num++;
		if(num >= $number){num = 0}
		var leftdis = -2*$w * num;
		$('.scroll ul').stop().animate({left:leftdis});
	});
	//上一组
	pre.click(function(){
		num--;
		if(num < 0){num = $number-1}
		var rightdis = -2*$w * num;
		$('.scroll ul').stop().animate({left:rightdis});
	});
	
});
</script>
</body>
</html>

CSS代码(zzsc.css):

@charset "utf-8";*{margin:0;padding:0;list-style:none;}
img{border:0;}
a{color:#2e2e2e;text-decoration:none;}
a:hover{text-decoration:underline;color:#000;}
body{font-size:12px;color:#2E2E2E;background:#333;text-align:left;font-family:'MS Mincho';}
/* 本案例使用css样式 */
.left{float:left;}
.right{float:right;}
.device{width:330px;height:auto;overflow:hidden;margin:100px auto;background:#fff;padding:10px;}
.device .scroll{width:100%;height:210px;overflow:hidden;position:relative;}
.device .scroll ul{position:absolute;left:0;top:0;height:220px;overflow:hidden;}
.device h2{height:18px;line-height:18px;text-align:left;font-family:'MS Mincho';font-size:12px;padding:5px 5px 10px 5px;}
.device h2 a{display:block;float:left;padding-right:10px;color:#686363;}
.device ul{overflow:hidden;}
.device ul li{width:160px;height:100px;margin-right:10px;margin-bottom:10px;overflow:hidden;position:relative;float:left;}
.device ul li img{width:160px;height:100px;position:absolute;left:0;top:0;z-index:10;background:url(http://www.lanrenzhijia.com/demo/images/loading.gif) no-repeat center center;}
.device ul li:hover img{opacity:0.8;filter:alpha(opacity=80);}
.device ul li a.link{display:block;width:160px;height:24px;line-height:24px;text-align:center;color:#fff;font-size:12px;position:absolute;left:0;bottom:0;background:#000;opacity:0.5;filter:alpha(opacity=50);z-index:20;}

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