通过jquery 实现的图片轮换功能。
（1)可以定时轮换
(2).手动切换功能
效果图如下:
代码实现：
<!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 runat="server">
<title>图片轮换</title>
<script language="javascript" type="text/javascript" src="../file/js/jquery.pack.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();
});
});
}
}
//自动切换图片此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。