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>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* slide_box */
#slide_box{width:800px;height:450px;border:4px solid #ccc;border-radius:4px;box-shadow:2px 2px 4px #333;position:absolute;left:0;top:50px;overflow:hidden;}
#slide_box .slide_img{display:inline-block;white-space:nowrap;height:450px;width:auto;position:absolute;left:0;top:0;}
#slide_box .slide_img li{display:block;float:left;overflow:hidden;}
#slide_box .slide_img li img{max-width:800px;}
#slide_order{text-align:right;padding-right:1em;line-height:20px;position:absolute;right:0;bottom:6px;}
/*系列号样式*/
#slide_order a{display:inline-block;padding:0 6px;float:left;margin-right:4px;border:1px solid #ddd;border-radius:4px;box-shadow:1px 1px 2px #333;background:#999;opacity:0.5;filter:alpha(opacity=50);}
#slide_order a:hover,#slide_order a.current{color:#FFF;font-weight:700;border-color:#000;background-color:#000;}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
	<div id="slide_box">
		<!-- 幻灯片图片 -->
		<ul class="slide_img">
			<li><a href="#"><img src="img/1.jpg" width="800" height="450" alt=""></a></li>
			<li><a href="#"><img src="img/2.jpg" width="735" height="450" alt=""></a></li>
			<li><a href="#"><img src="img/3.jpg" width="371" height="450" alt=""></a></li>
			<li><a href="#"><img src="img/4.jpg" width="700" height="450" alt=""></a></li>
			<li><a href="#"><img src="img/5.jpg" width="650" height="450" alt=""></a></li>
			<li><a href="#"><img src="img/6.jpg" width="670" height="450" alt=""></a></li>
			<li><a href="#"><img src="img/7.jpg" width="575" height="450" alt=""></a></li>
		</ul>
		<!-- 幻灯片序列号 -->
		<div id="slide_order"></div>
	</div>	
</body>
</html>

JS代码(index.js):

/** * JS文件 */
// 在Chrome测试时一直无法支持jQuery的 $(function(){
}
) 和 $(document).ready(),所以改用原生window.onload;
	window.onload = function (){
	/** * box幻灯片外框(div) * uls幻灯片图片外框(ul) * order图片序列号外框(div) * lis图片外框(li) * wdiths图片集的总宽度 * runtime定时器自行时间(毫秒) * latency定时器延迟时间(毫秒) * control控制器，控制定时器的执行 * num当前li标签在兄弟集合中的位置 * winW浏览器可视区域宽度 */
var box = $('#slide_box'),uls = $('ul.slide_img'),order = $('#slide_order',box),lis = $('li',uls),widths = 0,runtime = 600,latency = 2000,control,num = 0,winW = $(window).width();
	// 计算li标签宽度总和与插入img序号for (var i = 0;
	i < lis.length;
	i++){
	widths += lis.eq(i).width();
	order.append('<a href="javascript:vide(0)">'+(i+1)+'</a>');
}
;
	// 设置ul的宽度等于所有li标签宽度的总和；uls.width(widths);
	// 设置box位置居中box.css({
	left:(winW - box.width())/2}
);
	// 给第一个序号'1'添加classorder.find('a').removeClass('current').eq(num).addClass('current');
	//规定时间后执行函数control = setTimeout( slide,latency );
	// 幻灯片自动运行函数function slide (){
	// 初始化widthvar width = 0;
	num = num < lis.length - 1 ? (num + 1):0;
	// box旧的宽度var old_box_width = box.width();
	// box新的宽度var lis_now_width = lis.eq(num).width();
	// 改变box的宽度 = 当前图片的宽度 和 left值box.animate({
	width:lis_now_width,left:(winW - lis_now_width)/2}
,runtime);
	// 计算第一张图到当前图片的宽度总和for (var j = 0;
	j < num;
	j++){
	width += lis.eq(j).width();
}
;
	// 设置当前的序号添加classorder.find('a').removeClass('current').eq(num).addClass('current');
	// 改变ul的left值uls.animate({
	left:0 - width}
,runtime,function (){
	control = setTimeout( slide,latency );
}
);
}
// 点击图片序号函数$('a',order).live({
	click:function (){
	// 立即停止uls当前正在执行的动作uls.stop();
	//清除定时器clearTimeout(control);
	num = $(this).index() - 1;
	slide();
}
}
);
}
;

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