jquery图片轮换
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
??? <title>图片轮换</title>
??? <script language="javascript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
??? <script language="javascript" type="text/javascript">
??????? $(document.body).ready(function() {
??????????? InitSwitchObj();
??????? });
??????? function InitSwitchObj() {
??????????? IMGLIST = $("#IMG_UL_LIST_1");
??????????? IMGINDEX = $("#IMG_INDEX_UL_LIST_1");
??????????? MAXINDEX = IMGLIST.find("li").length;
??????????? currIndex = 0;
??????????? currImgIndex = IMGINDEX.find("li:eq(" + currIndex + ")");
??????????? currImgLi = IMGLIST.find("li:eq(" + currIndex + ")");
??????????? currImgLi.show();
??????????? interValTime = 3000;
??????????? fadeInTime = 800
??????????? fadeOutTime = 1000;
??????????? ImageAutoSwitch();
??????????? ImageManualSwitch();
??????????? ImageStopSwitch();
??????? }
??????? //行
??????? var interValTime = 0;
??????? //下一片示
??????? var fadeInTime = 0;
??????? //上一片的消失
??????? var fadeOutTime = 0;
??????? //保存前片定的象
??????? var imageTimer = null;
??????? //前的索引
??????? var currIndex = null;
??????? //前片的所以
??????? var currImgIndex = null;
??????? //前片
??????? var currImgLi = null;
??????? //需要切的片集合
??????? var IMGLIST = null;
??????? //需要切的片集合的索引。
??????? var IMGINDEX = null;
??????? //最大片
??????? var MAXINDEX = null;
??????? //自定切。
??????? function ImageAutoSwitch() {
??????????? if (imageTimer != null) {
??????????????? clearInterval(imageTimer);
??????????? }
??????????? imageTimer = setInterval("IntervalImage()", interValTime);
??????? }
??????? //手切片
??????? function ImageManualSwitch() {
??????????? IMGINDEX.find("li").each(function(i) {
??????????????? $(this).hover(function() {
??????????????????? if (imageTimer != null) {
??????????????????????? clearInterval(imageTimer);
??????????????????? }
??????????????????? currIndex = i;
??????????????????? ImageSwitchChange();
??????????????? }, function() {
??????????????????? ImageAutoSwitch();
??????????????? });
??????????? });
??????? }
??????? //鼠放到片上的，停止切
??????? function ImageStopSwitch() {
??????????? IMGLIST.find("li").each(function() {
??????????????? $(this).hover(function() {
??????????????????? if (imageTimer != null) {
??????????????????????? clearInterval(imageTimer);
??????????????????? }
??????????????? }, function() {
??????????????????? ImageAutoSwitch();
??????????????? });
??????????? });
??????? }
??????? //自动切换图片
??????? function IntervalImage() {
??????????? currIndex = parseFloat(currIndex);
??????????? currIndex = currIndex + 1;
??????????? //如果切到最大量的候始
??????????? if (currIndex >= MAXINDEX) {
??????????????? currIndex = 0;
??????????? }
??????????? //原的片索引的背景透明
??????????? ImageSwitchChange();
??????? }
??????? //切片的候，的片要效果
??????? function ImageSwitchChange() {
??????????? if (currImgIndex != null) {
??????????????? currImgIndex.css({ "background-color": "transparent" });
??????????? }
??????????? currImgIndex = IMGINDEX.find("li:eq(" + currIndex + ")");
??????????? imgLi = IMGLIST.find("li:eq(" + currIndex + ")");
??????????? currImgIndex.css({ "background-color": "#999999" });
??????????? if (currImgLi != null) {
??????????????? currImgLi.fadeOut(fadeOutTime, function() {
??????????????????? imgLi.fadeIn(fadeInTime);
??????????????? });
??????????? }
??????????? currImgLi = imgLi;
??????? }
??? </script>
??? <style type="text/css">
??????? .img-swith-main
??????? {
??????????? position: relative;
??????????? font-family: Arial, Verdana;
??????????? font-size: 12px;
??????????? width: 400px;
??????????? height: 300px;
??????????? background-color: #f3f3f3;
??????? }
??????? .img-switch
??????? {
??????????? width: 100%;
??????????? height: 100%;
??????????? overflow: hidden;
??????? }
??????? .img-switch ul
??????? {
??????????? margin: 0px;
??????????? padding: 0px;
??????????? list-style-type: none;
??????????? overflow: hidden;
??????????? width: 100%;
??????????? height: 100%;
??????? }
??????? .img-switch ul li
??????? {
??????????? float: left;
??????????? width: 100%;
??????????? height: 100%;
??????????? display: none;
??????? }
??????? .img-switch ul li img
??????? {
??????????? width: 100%;
??????????? height: 100%;
??????????? border: 0px;
??????? }
??????? .img-switch-clear
??????? {
??????????? clear: both;
??????? }
??????? .img-switch-index
??????? {
??????????? position: absolute;
??????????? bottom: 20px;
??????????? right: 20px;
??????????? overflow: hidden;
??????? }
??????? .img-switch-index ul
??????? {
??????????? margin: 0px;
??????????? padding: 0px;
??????????? list-style-type: none;
??????? }
??????? .img-switch-index ul li
??????? {
??????????? padding: 2px;
??????????? border: 1px solid #c0c0c0;
??????????? margin-right: 5px;
??????????? float: left;
??????????? font-weight: bold;
??????????? cursor: pointer;
??????????? color: Black;
??????????? padding-left: 6px;
??????????? padding-right: 6px;
??????? }
??? </style>
</head>
<body>
??? <form id="form1" runat="server">
??? <div>
??????? <div class='img-swith-main'>
??????????? <div /></li>
??????????????????? <li>
??????????????????????? <img src="js/222.jpg" /></li>
??????????????????? <li>
??????????????????????? <img src="js/111.jpg" /></li>
??????????????????? <li>
??????????????????????? <img src="js/222.jpg" /></li>
??????????????????? <li>
??????????????????????? <img src="js/111.jpg" /></li>
??????????????? </ul>
??????????? </div>
??????????? <div class='img-switch-index'>
??????????????? <ul id="IMG_INDEX_UL_LIST_1">
??????????????????? <li id="li_index_default" style="background-color: #aaa;">01</li>
??????????????????? <li>02</li>
??????????????????? <li>03</li>
??????????????????? <li>04</li>
??????????????????? <li>05</li>
??????????????? </ul>
??????????? </div>
??????????? <div class='img-switch-clear'>
??????????? </div>
??????? </div>
??? </div>
??? </form>
</body>
</html>