简单的轮播图

最近一直在研究Ajax与后台的交互，今晚看了一下轮播图如何与结合Ajax与后台进行实时的数据连接。
首先我讲一下我做轮播图的思路吧。首先html的代码如下：

<div id="loading">loading...</div><!--在DOM结构还没完全加载出来是呈现-->
<!--#imagePanel是用于放图片和按钮的面板-->
    <div id="imagePanel">
    <!--a标签时用于放图片-->
        <a href="#" id="imageLink">
            <img src="./images/jiuzhaigou1.jpg" alt="轮播图_1" id="image">
        </a>
        <!--#imageTitle用于放序列按钮-->
        <div id="imageTitle">
        </div>
    </div>

然后是基本的css样式，如下：

#imagePanel {
            width: 480px;
            height: 180px;
            position: relative;
        }
        #imageTitle {
            margin: 0;
            padding:0;
            height: 18px;
            position: absolute;
            bottom: 0;
            right: 0;
            /* background-color: red; */
            background-color: #fff;
            overflow: hidden;
        }
        a.button {
            display: block;
            width: 18px;
            height: 18px;
            background-color: #000;
            text-decoration: none;
            color: #fff;
            font-size: 10px;
            text-align: center;
            line-height: 18px;
            margin: 1px;
            float: right;
        }

（a.button这个样式是用于动态添加的序列按钮上）以上样式可以自行修改变得更美观吧，我比较懒就意思意思吧哈哈哈哈。
主要是讲功能的实现
我这里用的是jQuery，所以要引入jquery库。
需要实现的功能：图片的自动切换（changeImg()）；
动态生成按钮并点击可以跳到相应的图（createTitle）；
向讲一下图片自动切换的函数吧。实现原理很简单，主要通过jquery的animate方法实现，改变dom结构中图片的src即可。

        function changeImage(imgID){
            clearTimeout(timer);//清除定时器
            $("#image").animate({
                opacity:'toggle'
            },'fast');//通过改变当前图片的透明度（变为0）实现当前图片消失
            if(imgID>imgUrl.length) imgID=1;//当imgID大于图片总数时，从头再来轮播
            $("#image").attr('src',imgUrl[imgID]);//设置当前img元素的src
            $("#imageLink").attr("href",imgLink[imgID]);
            $("#image").animate({
                opacity:'toggle'
            },'slow');//通过设置imgID这个数字的图片 的opacity为1实现呈现图片效果
            $("a.button").css("background-color",'#000');//设置全部按扭背景初始化
            $('#link'+imgID).css("background-color",'#FF6600');//为 当前图片对应的按钮设置不同的背景
            timer=setTimeout('changeImage('+(imgID+1)+')',5000);//设置一个定时器，每隔一段时间就自增执行一次这个函数
        }

动态生成按钮函数：

function createTitle(){
            var linkHtml='';
            for(var i=imgUrl.length;i>0;i--){
                linkHtml+='<a href="javascript:changeImage('+i+')" class="button" id="link'+i+'">'+i+'</a>';//动态生成的所有按钮，通过a元素实现按钮
            }
            return linkHtml;
        }

基本上的代码全了，再加上一些代码即可，如下是全部的代码：

var imgUrl=new Array();
        var imgAlt=new Array();
        var imgLink=new Array();
        imgUrl[0]='images/pic1.jpg';
        imgLink[0]='#1';
        imgUrl[1]='images/pic2.jpg';
        imgLink[1]='#2';
        imgUrl[2]='images/pic3.jpg';
        imgLink[2]='#1';
        imgUrl[3]='images/pic4.jpg';
        imgLink[3]='#1';
        imgUrl[4]='images/pic5.jpg';
        imgLink[4]='#1';
        imgUrl[5]='images/pic6.jpg';
        imgLink[5]='#1';
        var imgID=1;
        var timer;
        $(function(){
            $("#loading").hide();
            $("#imageTitle").html(createTitle());
            changeImage(1);
        })

        function changeImage(imgID){
            $("#image").animate({
                opacity:'toggle'
            },'fast');
            if(imgID>imgUrl.length) imgID=1;
            $("#image").attr('src',imgUrl[imgID]);
            $("#imageLink").attr("href",imgLink[imgID]);
            $("#image").animate({
                opacity:'toggle'
            },'slow');
            $("a.button").css("background-color",'#000');
            $('#link'+imgID).css("background-color",'#FF6600');
            timer=setTimeout('changeImage('+(imgID+1)+')',5000);
        }

        function createTitle(){
            var linkHtml='';
            for(var i=imgUrl.length;i>0;i--){
                linkHtml+='<a href="javascript:changeImage('+i+')" class="button" id="link'+i+'">'+i+'</a>';
            }
            return linkHtml;
        }
    </script>

对于与后台动态交换，主要就是从后台获取所有照片的信息（主要是src资源位置）。这一点可以通过Ajax向后台获取信息，后台反回响应即可。

——菜鸟一个，有不同意见可以留言00000—-