仿百度友情链接图片的滚动显示jquery

  •   
  • 4415
  • jQuery
  • 1
  • super_dodo
  • 2014/08/06

看到百度下面的友情链接的滚动图片感觉比较友好，本想扣下来用，纠结了周折了很久，发现百度的js代码实在用的太多了，所以感觉朦朦胧胧的。自己想仿照着写一个，具体的功能仿照上一篇，此处省略小圆点功能。点击查看上一篇

当向左向右的时候图标到一半的时候就进行循环，这样相对友好，还有需要改进的地方请多多指点。

效果图如下，代码如下。。点击进入效果展示下载地址

QQ截图20140806161232

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>图片轮播--友情链接--小图标滚动</title>
	<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
	<style type="text/css">
		*{margin: 0;padding: 0;text-decoration: none;}
		body,html{margin:0;padding:0;}
		img{margin:0;padding:0;}
		#flinkImg{width:1000px;height: 100px;overflow: hidden;position: relative;margin:0 auto;}
		
		#flinkMain{width:940px;height: 100px;overflow: hidden;background-color: #e2e2e2;margin:0 auto;position: absolute;left:30px;}
		#imgList{width:8000px;height:100px;overflow: hidden;z-index: 1;position: absolute;}

		#flinkImg .arrow{cursor: pointer;line-height:40px;font-size:30px;padding:30px 10px;font-weight:bold;text-align: center; background-color:#bbb;z-index: 3;position: absolute;top:0px;}
		#flinkImg .arrow:hover{background-color: rgba(0,0,0,.8);}

		#flinkImg:hover .arrow{display: block;}

		#flinkImg #prev{left:0px;}
		#flinkImg #next{right:0px;}

		#flinkImg ul,li{list-style:none;float:left;}
		#flinkImg ul,li img{margin: 0 20px;padding:10px 0;}

	</style>
	<script type="text/javascript">
		$(function(){
			var imgIndex = 0;		//默认第一个选择
			var imgAuto;		//自动播放
			var imgTime = 1000;		//自动播放时间
			var imgLenth = parseInt($('#imgList li').length) - 1;	//图片的个数从0开始编数
			var imgWidth = 100;			//单张图片的宽度 = 图片宽度60 + 左右margin 40
			var imgLong = (imgLenth + 1) * imgWidth ;		//所有图片的宽度
			var imgHalf = 500;				//图片显示区域宽度的一半的时候进行循环
			var imgHalf2 = imgLong - 500;				//图片显示区域宽度的一半的时候进行循环

			imgAuto = setInterval(autoImg,imgTime);		
			$('#flinkImg').hover(function(){
				clearInterval(imgAuto);
			},function() {
				imgAuto = setInterval(autoImg,imgTime);
			});

			//图片自动播放的方法 默认下一个的类似方法
			function autoImg () {
				if(imgIndex == imgLenth){		//滚动到最大的时候
					imgIndex = 0;				//偏移量归0
				}else{
					imgIndex += 1;				//偏移量增加1
				}
				var newLeft = parseInt(0 - (imgIndex * imgWidth));	
				$('#imgList').css({'left':newLeft+'px'});
			}


			//点击向前按钮
			$('#prev').click(function(){
				if(imgIndex == '0'){		//当偏移量为0的时候,点击前一个
					imgIndex = imgLenth;	//把偏移量设成最大的一个,实现循环
				}else{						//偏移量为其他的时候,点击向前
					imgIndex -= 1;			//偏移量减少1
				}
				showImg(imgWidth);			//图片
			});

			//点击向后按钮
			$('#next').click(function(){
				if(imgIndex == imgLenth){	//当偏移量为最大的时候,点击下一个
					imgIndex = 0; 			//把偏移量设成0,实现循环
				}else{ 						//偏移量为其他的时候,点击下一个
					imgIndex += 1; 			//偏移量增加1
				}
				showImg(-imgWidth);			//图片
			});

			//图片滚动--点击左右箭头的时候
			function showImg(offSet){
				var curLeft = parseInt($("#imgList").css("left"));	//获得当前的偏移量
				var newLeft = curLeft + offSet;		
				if(newLeft <= -imgHalf2 ){ newLeft = 0; }	//向右移动到最大偏移量的时候
				if(newLeft > '0'){ newLeft = imgHalf - imgLong;}	//向左移动到最大偏移量的时候
				$('#imgList').css({'left':newLeft+'px'});
			}
			
		});
	
	</script>
</head>
<body>
	<div id="flinkImg">
		<div id="flinkMain">
			<ul id="imgList" style="left:0px;">
				<li><a href="javascript:void(0);"><img src="img/1.png" alt="" /></a></li>
				<li><a href="javascript:void(0);"><img src="img/2.png" alt="" /></a></li>
				<li><a href="javascript:void(0);"><img src="img/3.png" alt="" /></a></li>
				<li><a href="javascript:void(0);"><img src="img/4.png" alt="" /></a></li>
				<li><a href="javascript:void(0);"><img src="img/5.png" alt="" /></a></li>
				<li><a href="javascript:void(0);"><img src="img/6.png" alt="" /></a></li>
				<li><a href="javascript:void(0);"><img src="img/7.png" alt="" /></a></li>
				<li><a href="javascript:void(0);"><img src="img/8.png" alt="" /></a></li>
				<li><a href="javascript:void(0);"><img src="img/9.png" alt="" /></a></li>
				<li><a href="javascript:void(0);"><img src="img/10.png" alt="" /></a></li>
				<li><a href="javascript:void(0);"><img src="img/11.png" alt="" /></a></li>
				<li><a href="javascript:void(0);"><img src="img/12.png" alt="" /></a></li>
				<li><a href="javascript:void(0);"><img src="img/13.png" alt="" /></a></li>
				<li><a href="javascript:void(0);"><img src="img/14.png" alt="" /></a></li>
				<li><a href="javascript:void(0);"><img src="img/15.png" alt="" /></a></li>
				<li><a href="javascript:void(0);"><img src="img/16.png" alt="" /></a></li>
				<li><a href="javascript:void(0);"><img src="img/17.png" alt="" /></a></li>
				<li><a href="javascript:void(0);"><img src="img/18.png" alt="" /></a></li>
				<li><a href="javascript:void(0);"><img src="img/19.png" alt="" /></a></li>
				<li><a href="javascript:void(0);"><img src="img/20.png" alt="" /></a></li>
				<li><a href="javascript:void(0);"><img src="img/21.png" alt="" /></a></li>
				<li><a href="javascript:void(0);"><img src="img/22.png" alt="" /></a></li>
				<li><a href="javascript:void(0);"><img src="img/23.png" alt="" /></a></li>
				<li><a href="javascript:void(0);"><img src="img/24.png" alt="" /></a></li>
				<li><a href="javascript:void(0);"><img src="img/25.png" alt="" /></a></li>
				<li><a href="javascript:void(0);"><img src="img/26.png" alt="" /></a></li>
				<li><a href="javascript:void(0);"><img src="img/27.png" alt="" /></a></li>
				<li><a href="javascript:void(0);"><img src="img/28.png" alt="" /></a></li>
				<li><a href="javascript:void(0);"><img src="img/29.png" alt="" /></a></li>
				<li><a href="javascript:void(0);"><img src="img/30.png" alt="" /></a></li>
			</ul>
		</div>
		<a href="javascript:void(0);" class="arrow" id="prev">&lt</a>
		<a href="javascript:void(0);" class="arrow" id="next">&gt</a>
	</div>
	
</body>
</html>

百日莫空过，青春不再来。——拜伦