jQuery图片切换,轮播效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
??? <title>Untitled Page</title>
??? <!--<script type="text/javascript" src="jquery-1.3.2-vsdoc2.js"></script>-->
??? <script type="text/javascript" src="jquery1.3.2.min.js"></script>
??? <script type="text/javascript">
??????? var t = n = count = 0;
??????? $(function () {
??????????? var piclist = $(".piclist img");
??????????? var numlink = $(".num li");
??????????? count = piclist.length;
??????????? $(".piclist img:not(:first-child)").hide();
??????????? $(numlink).filter(":first-child").addClass("on");
??????????? $(numlink).each(function (i) {
??????????????? $(this).click(function () {
??????????????????? $(piclist).filter(":visible").fadeOut(500);
??????????????????? $(piclist).eq(i).fadeIn(1000);
??????????????????? $(this).addClass("on").siblings().removeClass("on");
??????????????? });
??????????? });
??????????? t = setInterval("showAuto()", 2000);
??????????? $("#pause").click(function () { clearInterval(t); });
??????????? $("#play").click(function () { t = setInterval("showAuto()", 2000); });
??????? });
??????? function showAuto() {
??????????? n = n >= (count - 1) ? 0 : n + 1;
??????????? $(".num li").eq(n).trigger("click");
??????? }
??? </script>
??? <style type="text/css">
??????? ul, li
??????? {
??????????? margin: 0;
??????????? padding: 0;
??????????? list-style: none;
??????? }
??????? .picshow
??????? {
??????????? width: 300px;
??????????? height: 300px;
??????????? position: relative;
??????? }
??????? .num
??????? {
??????????? position: absolute;
??????????? bottom: 10px;
??????????? right: 10px;
??????? }
??????? .num li
??????? {
??????????? float: left;
??????????? background: #CCC;
??????????? margin: 0 2px;
??????????? padding: 0 3px;
??????????? cursor: pointer;
??????? }
??????? .num li.on
??????? {
??????????? background: #F00;
??????? }
??????? .piclist{ position:relative;}
??????? .piclist img{ position:absolute;}
??? </style>
</head>
<body>
??? <div width="300" height="300" alt="jQuery图片切换,轮播成效" />
??????????? <img src="image/pic2.jpg" width="300" height="300" alt="jQuery图片切换,轮播成效" />
??????????? <img src="image/pic3.jpg" width="300" height="300" alt="jQuery图片切换,轮播成效" />
??????? </div>
??????? <ul class="num">
??????????? <li>1</li><li>2</li><li>3</li></ul>
??? </div>
??? <div id="pause">暂停</div>
??? <div id="play">播放</div>
</body>
</html>
