<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" style="--wm-toolbar-height: 67px;">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Home</title>
	<link href="./css/css.css" rel="stylesheet" type="text/css">

	<script type="text/javascript" src="./js/jquery.min.js"></script>
	<script type="text/javascript">
		$(function () {
			var sWidth = $("#focus").width(); //获取焦点图的宽度（显示面积）
			var len = $("#focus ul li").length; //获取焦点图个数
			var index = 0;
			var picTimer;

			//以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮
			var btn = "<div class='btnBg'></div><div class='btn'>";
			for (var i = 0; i < len; i++) {
				btn += "<span></span>";
			}
			btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
			$("#focus").append(btn);
			$("#focus .btnBg").css("opacity", 0.5);

			//为小按钮添加鼠标滑入事件，以显示相应的内容
			$("#focus .btn span").css("opacity", 0.4).mouseenter(function () {
				index = $("#focus .btn span").index(this);
				showPics(index);
			}).eq(0).trigger("mouseenter");

			//上一页、下一页按钮透明度处理
			$("#focus .preNext").css("opacity", 0.2).hover(function () {
				$(this).stop(true, false).animate({ "opacity": "0.5" }, 300);
			}, function () {
				$(this).stop(true, false).animate({ "opacity": "0.2" }, 300);
			});

			//上一页按钮
			$("#focus .pre").click(function () {
				index -= 1;
				if (index == -1) { index = len - 1; }
				showPics(index);
			});

			//下一页按钮
			$("#focus .next").click(function () {
				index += 1;
				if (index == len) { index = 0; }
				showPics(index);
			});

			//本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
			$("#focus ul").css("width", sWidth * (len));

			//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
			$("#focus").hover(function () {
				clearInterval(picTimer);
			}, function () {
				picTimer = setInterval(function () {
					showPics(index);
					index++;
					if (index == len) { index = 0; }
				}, 4000); //此4000代表自动播放的间隔，单位：毫秒
			}).trigger("mouseleave");

			//显示图片函数，根据接收的index值显示相应的内容
			function showPics(index) { //普通切换
				var nowLeft = -index * sWidth; //根据index值计算ul元素的left值
				$("#focus ul").stop(true, false).animate({ "left": nowLeft }, 300); //通过animate()调整ul元素滚动到计算出的position
				//$("#focus .btn span").removeClass("on").eq(index).addClass("on"); //为当前的按钮切换到选中的效果
				$("#focus .btn span").stop(true, false).animate({ "opacity": "0.4" }, 300).eq(index).stop(true, false).animate({ "opacity": "1" }, 300); //为当前的按钮切换到选中的效果
			}
		});

	</script>
</head>

<body>
<span hidden id="template-version">restore-path</span>
	<div id="home_bg">
		<div id="home_1">
			<div id="home_1_01"><img src="./images/logo.png" width="300" height="139"></div>
			<div id="home_1_02">
				<ul>
					<li><a href="index.html">Home</a></li>
					<li><a href="about.html">About</a></li>
					<li><a href="menu.asp?BigClassName=·%20Soup%20And%20Salad#· Soup And Salad">Menu</a></li>
					<li><a href="direction.html">Direction</a></li>
					<li><a href="contact.html">Contact</a></li>
				</ul>
			</div>
		</div>
		<div id="home_1_03">
			<div id="focus">
				<ul style="left: -1230px; width: 2460px;">
					<li><img src="./img/01.jpg" width="615" height="375"></li>
					<li><img src="./img/02.jpg" width="615" height="375"></li>
					<li><img src="./img/03.jpg" width="615" height="375"></li>
					<li><img src="./img/04.jpg" width="615" height="375"></li>
				</ul>
				<div class="btnBg" style="opacity: 0.5;"></div>
				<div class="btn"><span style="opacity: 0.4;"></span><span style="opacity: 0.4;"></span><span
						style="opacity: 1;"></span><span style="opacity: 0.4;"></span></div>
				<div class="preNext pre" style="opacity: 0.2;"></div>
				<div class="preNext next" style="opacity: 0.2;"></div>
			</div>
		</div>
		<div class="clear1"></div>
		<div id="home_1_04">
			<p style="font-family: 'Comic Sans MS'; font-size:20px; color:#ffffff;">TEL: 509-571-1919</p>
			<p style="font-family: 'Comic Sans MS'; font-size:16px; color:#ffffff;">Add: 2405 WEST WASHINGTON AVE SUITE
				150 YAKIMA WA</p>
		</div>
	</div>




</body>

</html>