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>
