随笔 - 24  文章 - 1 评论 - 115 trackbacks - 0

通过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>

 

posted on 2010-09-11 12:23 woody.wu 阅读(...) 评论(...) 编辑 收藏