jquery实现html页面新闻图片轮播（html代码动态拼接）

0 0

jquery实现html页面新闻图片轮播（html代码动态拼接）5

在html页面中，用ajax从后台取得新闻图片的地址动态拼接成html代码，代码用的人家的：http://blog.csdn.net/tsyj810883979/article/details/8986157，如下：
   <!DOCTYPE html>
    <html>
        <head>
            <title>图片轮播，新闻轮播，焦点新闻轮播</title>
            <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
            <script type="text/javascript">
                $(document).ready(function(){
                    var index=0;
                    var slideFlag = true;
                    var length=$(".roll-news-image img").length;

                    function showImg(i){
                        $(".roll-news-image img")
                        .eq(i).stop(true,true).fadeIn(800)
                        .siblings("img").hide();

                        $(".roll-news-index li").removeClass("roll-news-index-hover");
                        $(".roll-news-index li").eq(i).addClass("roll-news-index-hover");

                        $(".roll-news-title a")
                        .eq(i).stop(true,true).fadeIn(800)
                        .siblings("a").hide();
                    }
                    showImg(index);

                    $(".roll-news-index li").click(function(){
                        index = $(".roll-news-index li").index(this);
                        showImg(index);
                        slideFlag = false;
                    });

                    function autoSlide() {
                        setInterval(function() {
                            if(slideFlag) {
                                showImg((index+1) % length);
                                index = (index+1)%length;
                            }
                            slideFlag = true;
                        }, 3000);
                    }

                    autoSlide();

                });
            </script>
            <style type="text/css">
                * {
                    padding:0px;
                    margin:0px;
                }
                .roll-news {
                    width:480px;
                    height:300px;
                    border:solid 1px #c1c1c1;
                }
                .roll-news-index-hover {
                    background-color:white;
                }
                .roll-news-image img {
                    width:480px;
                    height:300px;
                }
                .roll-news-index {
                    position:relative;
                    top:-50px;
                    margin-right:5px;
                    float:right;
                }
                .roll-news-index {
                }
                .roll-news-index li {
                    list-style:none;
                    float:left;
                    font-size:12px;
                    font-weight:600;
                    width:18px;
                    height:16px;
                    line-height:16px;
                    cursor:pointer;
                    margin:0 3px;
                    background-image:url(opacity_50.png);
                    text-align:center;
                }
                .roll-news-title {
                    position:relative;
                    top:-25px;
                    padding-left:10px;
                    height:22px;
                    line-height:20px;
                    background:url(opacity_50.png);
                }
                .roll-news-title a {
                    font-size:12px;
                    text-decoration:none;
                    color:#222222;
                }
                .roll-news-title a:hover {
                    color:red;
                }
            </style>
        </head>
        <body>
            <div class="roll-news">
                <div class="roll-news-image">
                    <img src="http://h.hiphotos.baidu.com/album/w%3D2048/sign=e952491b5243fbf2c52ca1238446ca80/d4628535e5dde711bfe12fe5a6efce1b9d1661f5.jpg">
                    <img src="http://img2.duitang.com/uploads/item/201111/15/20111115104036_AcnUz.thumb.600_0.jpg" style="display:none">
                    <img src="http://img4.duitang.com/uploads/item/201202/29/20120229160925_jJ2Ei.thumb.600_0.jpg" style="display:none">
                </div>
                <div class="roll-news-index">
                    <ul>
                        <li class="roll-news-index-hover">1</li>
                        <li>2</li>
                        <li>3</li>
                    </ul>
                </div>
                <div class="roll-news-title">
                    <a href="" target="_blank">图片1：点击后跳转</a>
                    <a href="" target="_blank" style="display:none">图片2：点击后跳转</a>
                    <a href="" target="_blank" style="display:none">图片3：点击后跳转</a>
                </div>
            </div>
        </body>
    </html>

如果把 <div class="roll-news-image"></div>中的图片地址写上，可以实现自动切换，但是如果用ajax（ $(document).ready(function()）请求到的数据拼接成html（现在<div class="roll-news-image"></div>为空），再用$(".roll-news-image").append(html);自能手动点击切换，不能自动切换，用其他的jquery插件，情况类似，请问怎么解决，谢谢！