简单的轮播图-蒲公英云

简单的轮播图

男娘i 2022-06-06 01:05 324阅读 0赞

最近一直在研究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>