jQuery学习笔记之图片上下轮流播放

最新推荐文章于 2023-09-14 18:36:20 发布

Bruce王wyh

最新推荐文章于 2023-09-14 18:36:20 发布

阅读量322

点赞数

分类专栏： jQuery 图片上下轮播

本文链接：https://blog.csdn.net/u013543416/article/details/39135377

版权

jQuery 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

图片上下轮播

1 篇文章 0 订阅

订阅专栏


在学习jQuery中，发现图片的播放很有意思，今天就简单的设计了上下轮播的界面。

<?php header('content-type:text/html; charset=utf-8');?>
<!DOCTYPE HTML>
<html>
<head>
	
	<title>jQuery照片轮播</title>
	<script type="text/javascript" src="./jquery-1.9.1/jquery-1.9.1.js"></script>
	<!--链接jQuery库，很关键-->
	<style type="text/css">
	body{ padding:0px; margin: 0px;}
	#container {
		width:90%;
		margin-top: 0px;
		padding:0px;
		margin-right: auto;
		margin-left: auto;
		border-left:1.3px solid #888888;
		border-right:1px solid #888888;
	}
	.prev { width:20%;
			margin-right: auto;
			margin-left: auto;
			text-align: center;}
	.next { width:20%;
			margin-right: auto;
			margin-left: auto;
			text-align: center;}
	#pic_q_2 {
		width:600px; height:400px;
		margin-right: auto;
		margin-left: auto;
		margin-top: 0px;
		padding:0px;
		border:1px dotted #666666;
		overflow: hidden; /*限制图片显示大小*/
		position: relative;
	}
	#pic_q_2_list { position: relative;}
	#pic_q_2_list ul { 	margin:0px;
						list-style: none;
						padding: 0px;
					/*默认地，所有 HTML 元素都有一个静态位置，且无法移动。
					如需对位置进行操作，
					要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！*/
				}
	#pic_q_2_list ul li{ margin: 0px; padding: 0px; height: 400px;}
	
	</style>
</head>
<body>
	<div id="container">
	
	<div class="prev"><img src="./image/prev.jpg"  id="prev_b"/></div>
	<div id="pic_q_2">
		<div id="pic_q_2_list">
		<ul>
		<li><img src="./image/first.jpg" /></li>
		<li><img src="./image/second.jpg" /></li>
		<li><img src="./image/third.jpg" /></li>
		</ul>
		</div>
	</div>
	<div class="next"><img src="./image/next.jpg" id="next_b"/></div>
	<script type="text/javascript">
	$(document).ready(function(){
			var index = 0;
			var mg = $("#pic_q_2_list ul li");
		    var height = 400;
		    var page = mg.length;
		    var moveH = 0;
			$("#prev_b").click(function(){
				if( index != 0 ){
					moveH = -(index-1)*height;
					$("#pic_q_2_list").animate({top:moveH}, 'slow');
					index--;
				}
				
			})
			$("#next_b").click(function(){
				if (index != page-1 ){
					moveH = -(index+1)*height;
					$("#pic_q_2_list").animate({top:moveH}, 'slow');
					index++;
				}
				
			})
	
	})
	</script>
	</div>
</body>
</html>

Bruce王wyh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记之图片上下轮流播放

jQuery照片轮播body{ padding:0px; margin: 0px;}#container {width:90%;margin-top: 0px;padding:0px;margin-right: auto;margin-left: auto;border-left:1.3px solid #888888;border-right:1p
复制链接

扫一扫