JS随笔-HTML5图片轮播

jQuery部分

<pre name="code" class="javascript">$(".route_page1_img_slide img").swipe({//手动翻图片
		swipe : function(event, direction, distance) {
			var height = con.children(":first").outerHeight(true);
			var index = $(this).attr("rel");
			if ((direction == "right" || direction == "up") && distance > 50) {
				con.animate({
					top : -height * ((index + 1) % count)
				}, 'slow');
				$(".img_index").animate({
					top : ($(".img_index").height()) * ((index + 1) % count)
				}, 'slow')
			} else if ((direction == "left" || direction == "down") && distance > 50) {
				con.animate({
					top : -height * ((index - 1 + count) % count)
				}, 'slow');
				$(".img_index").animate({
					top : ($(".img_index").height()) * ((index - 1 + count) % count)
				}, 'slow')
			}
		}
	});

<pre name="code" class="javascript">var int = setInterval(slideview, 5000);//自动轮播
slideview = function() {
	var index;
	var current = $(".route_page1_img").offset().top;
	for (var i = 0; i < count; i++) {
		if ($("#img_" + i).offset().top == current) {
			index = i;
		}
		;
	}
	++index;
	var height = con.children(":first").outerHeight(true);
	con.animate({
		top : -height * (index % count)
	}, 'slow');
	$(".img_index").animate({
		top : ($(".img_index").height() + 4) * (index % count)
	}, 'slow')
};

css和jsp

.route_page1_img{width:100%;height: 500px; overflow:hidden; position:relative;}
.route_page1_img_slide{width:100%; height:2750px;position:absolute;}
.route_page1_img_slide img{width:100%;height: 500px;}
.route_page1_img_index{position: absolute; width: 70px;height: 210px;left: 30px;top:0px;z-index: 5}
.route_page1_img_index img{width: 50px;height: 50px;}
.img_index{position: absolute; width: 70px;height: 70px;z-index: 10}

<span style="font-family: Arial, Helvetica, sans-serif;"><pre name="code" class="plain"><div class="route_page1_img"></span>

			<div class="route_page1_img_index">
				<img class="img_index" src="dot1.png" />//当前图片所在点
				<ul>
					<c:forEach items="图片个数" var="item" >
						<li><img src="dot2.png" /></li>//一张图片对应一个点
					</c:forEach>
				</ul>
			</div>
			<div class="route_page1_img_slide">
				<c:forEach items="图片源" var="item" varStatus="status">
					<img id="img_${status.index}" rel="${status.index}" src="图片地址" />
				</c:forEach>
			</div>
		</div>

 图片 dot1.png dot2.png

还有2个封装好的js文件 jquery.touchSwipe.js    jquery.1.8.3.min.js

希望有帮助，也希望大牛看到能指点！

</pre><pre name="code" class="javascript">