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

来源：互联网发布：南阳企业网站seo 编辑：程序博客网时间：2024/04/27 21:38

在学习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>

0 0