EasyShop/_include/js/jquery.slide_box.js

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

/**
 * 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 = 3000,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'添加class
	order.find('a').removeClass('current').eq(num).addClass('current');
	//规定时间后执行函数
	control = setTimeout( slide, latency );
	// 幻灯片自动运行函数
	function slide () {
		// 初始化width
		var 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();
		};
		// 设置当前的序号添加class
		order.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);