通过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();
});
});
}
//鼠標放到圖片上的換，停止切換
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 class="img-switch">
<ul id="IMG_UL_LIST_1">
<li>
<img src="../file/news/20100118093115.JPG" /></li>
<li>
<img src="../file/news/20100326142850.JPG" /></li>
<li>
<img src="../file/news/20100118094417.JPG" /></li>
<li>
<img src="../file/news/20100326142627.JPG" /></li>
<li>
<img src="../file/news/20100317194049.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>
<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();
});
});
}
//鼠標放到圖片上的換，停止切換
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 class="img-switch">
<ul id="IMG_UL_LIST_1">
<li>
<img src="../file/news/20100118093115.JPG" /></li>
<li>
<img src="../file/news/20100326142850.JPG" /></li>
<li>
<img src="../file/news/20100118094417.JPG" /></li>
<li>
<img src="../file/news/20100326142627.JPG" /></li>
<li>
<img src="../file/news/20100317194049.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>
