Jquery+Json实现flash图片轮播

网上的例子已经不少了，这是昨天我自己做的，其实很简单不彷自己试试!

<style type="text/css">
    .imgarea
    {
        width:350px;float:left;
        border:solid 1px silver;
        height:120px;
        margin-left:8px;
        position:relative;
    }
    #imgControl
    {
        float:right;
        width:30px;
        padding-left:5px;
     }
    #focusimg
    {
        border:none;width:350px;height:120px;
    }
    #imgSelect
    {
        list-style:none;
        padding:0;margin:0;
    }
    #imgSelect li
    {
        margin-bottom:3px;
        background:#f0f0f0;
        border:solid 1px silver;
        line-height:20px;
        text-align:center;
        cursor:pointer;
    }
    #imgViewLayer
    {
        position:absolute;
        width:100%;
        top:80%;
        background:black;
        filter:alpha(opacity=30);opacity:0.3;
        line-height:25px;
    }
    #imgViewLink
    {
        position:absolute;
        top:80%;
        padding:5px 10px;
        font-size:11pt;
    }
</style>

<div>
    <div class="imgarea">
        <img id="focusimg" style="border:none;" src="" alt="" />
        <div id="imgViewLayer">&nbsp;</div>
        <div id="imgViewLink">&nbsp;</div>
    </div>
    <div id="imgControl">
    </div>
</div>

<script type="text/javascript">
    var imgViewerData = [
    { text: '说好不分手的啊1', img: "http://localhost:10/ads/files/ad02.jpg", link: '#' },
    { text: '说好不分手的啊2', img: "/ads/images/01.gif", link: '#' },
    { text: '说好不分手的啊3', img: "/ads/images/01.gif", link: '#' },
    { text: '说好不分手的啊4', img: "/ads/images/01.gif", link: '#' },
    { text: '说好不分手的啊5', img: "/ads/images/01.gif", link: '#' }
    ];
    //设置显示指定图像
    function setView(t) {
        $("#imgControl ul li").css({ border: "solid 1px silver" });
        t.css({ border: "solid 1px black" });
        var imgOb=imgViewerData[t.text()- 1];//获取对应的信息
        $("#focusimg").attr("src",imgOb.img);
        //$("#imgarea").css({ opacity: 0 }).fadeIn("fast");
        $("#imgViewLink").html("<a style='color:white' href='" + imgOb.link + "'>" + imgOb.text + "</a>");
    }
    //初始化
    $(function() {
        $("#imgControl").html("<ul id='imgSelect'></ul>");
        for (var i = 0; i < imgViewerData.length; i++) {
            $("#imgControl ul").append("<li>" + (i + 1) + "</li>");
        }
        //鼠标激活
        $("#imgControl ul li").mouseover(
            function() { setView($(this)); });

        //激活自动播放
        imgAutoPlay();
    });
    //自动播放
    var imgIndex = 0;
    function imgAutoPlay() {
        setView($("#imgControl ul li:nth(" + imgIndex + ")"));
        if (imgIndex < imgViewerData.length - 1) imgIndex++;
        else if (imgIndex = imgViewerData.length - 1) imgIndex = 0;
        setTimeout("imgAutoPlay()", "3000");
    }
</script>

最终效果图如下:


推荐:www.cnYoLee.com