完美图片新闻轮转效果，腾讯大粤网首页图片轮转改造而来

背景

我所想要的完美图片新闻轮转效果：

1.有新闻图片，有新闻标题，有轮转索引

2.鼠标未移到索引上，图片自动切换

3.鼠标移到索引上，显示现有图片，轮询停止

4.鼠标移开索引，轮询继续

5.简洁明了，轻量级（不依赖第三方任何文件，最好是原生js）

过程

找过很多图片轮询效果，和我的要求总是有些出入，不能十全十美。不是功能不全，就是太多花哨。本想自己开发一个，鉴于琐事拖延，迟迟未能开始。

偶尔看到腾讯大粤网的图片新闻，感觉就是我所想要的效果。但仔细试验，发现其不符合要求3。即没有轮询停止机制。想想还是自己改造一下，就和自己的要求差不多了。

思路：页面加载，图片开始轮询。鼠标移到索引，显示相关图片，清除轮询。鼠标移开索引，恢复轮询。

定义一个全局的变量id，来记录当前激活的图片索引id。每次轮转时，更新这个id。鼠标移开索引后，用这个id开始轮询。

<html>
<head>
    <link href="http://news.qq.com/base2011/css/qq.css" rel="stylesheet" type="text/css">
    <style>
        .turn
        {
            height: 212px;
            float: left;
            overflow: hidden;
            position: relative;
        }
        .turn #adpica
        {
            width: 382px;
            height: 210px;
            overflow: hidden;
        }
        .turn #adpica img
        {
            width: 380px;
            height: 210px;
            float: left;
            overflow: hidden;
        }
        .turn #adtipa
        {
            height: 16px;
            position: absolute;
            right: 8px;
            bottom: 8px;
        }
        .turn #adtipa ul li
        {
            width: 19px;
            height: 19px;
            line-height: 19px;
            float: left;
            text-align: center;
            display: inline;
            margin: 0 1px;
            cursor: pointer;
            color: #fff;
            background: #000;
        }
        .turn #adtipa ul li.current
        {
            color: #fff;
            background: #cc0000;
        }
        .turn .hidden
        {
            display: none;
        }
        .turn .show
        {
            display: block !important;
        }
        #adpica span
        {
            position: absolute;
            bottom: 0;
            left: 0;
            color: #fff;
            font-size: 14px;
            height: 33px;
            width: 380px;
            filter: alpha(opacity=70);
            opacity: 0.7;
            background: #000;
            text-indent: -9999em;
        }
        #adpica p
        {
            position: absolute;
            bottom: 0;
            left: 0;
            color: #fff;
            font-size: 14px;
            height: 33px;
            line-height: 33px;
            width: 285px;
            padding-left: 5px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="focus">
        
        <div class="turn">
            <div id="adpica">
                <div class="show">
                    <a href="/a/20111119/000002.htm">
                        <img width="380" height="210" src="http://img1.gtimg.com/gd/pics/hv1/11/6/909/59109266.jpg"></a><span>焦点图文字背景</span><p
                            href="/a/20111119/000002.htm">
                            广州花都拆违遭遇碎瓶煤气罐</p>
                    
                </div>
                <div style="display: none;" class="hidden">
                    <a href="/a/20111119/000028.htm">
                        <img width="380" height="210" src="http://img1.gtimg.com/gd/pics/hv1/205/26/909/59114560.jpg"></a><span>焦点图文字背景</span><p
                            href="/a/20111119/000028.htm">
                            一颗“钉子”放弃工作保祖屋5年</p>
                    
                </div>
                <div class="hidden" style="display: none;">
                    <a href="/a/20111117/000250.htm">
                        <img width="380" height="210" src="http://img1.gtimg.com/gd/pics/hv1/68/53/908/59056283.jpg"></a><span>焦点图文字背景</span><p
                            href="/a/20111117/000250.htm">
                            爸爸，不要把我丢下</p>
                    
                </div>
                <div class="hidden" style="display: none;">
                    <a href="/a/20111119/000004.htm">
                        <img width="380" height="210" src="http://img1.gtimg.com/gd/pics/hv1/243/9/909/59110263.jpg"></a><span>焦点图文字背景</span><p
                            href="/a/20111119/000004.htm">
                            杨幂最新杂志写真魅惑优雅</p>
                    
                </div>
            </div>
            <div id="adtipa">
                <ul onmouseout="change()">
                    <li class="current" onmouseover="adchangea(1)">1 </li>
                    <li class="" onmouseover="adchangea(2)">2 </li>
                    <li class="" onmouseover="adchangea(3)">3 </li>
                    <li class="" onmouseover="adchangea(4)">4</li></ul>
            </div>
            <script>
              //鼠标移过来的动作。显示当前图片，清除轮询。
                function adchangea(adid) {
                    dochange(adid);
                    clearTimeout(adisround);
                }
               //自动轮询
                function adchangea2(adid) {
                    dochange(adid);
                    var adbigimg = document.getElementById("adpica").getElementsByTagName("div");
                    if ((adnext = adid + 1) > adbigimg.length) adnext = 1;
                    adisround = setTimeout('adchangea2(' + adnext + ')', 3000);
                }
                //显示当前图片
                function dochange(adid) {
                    id = adid;
                    var adbigimg = document.getElementById("adpica").getElementsByTagName("div");
                    var adsmallimg = document.getElementById("adtipa").getElementsByTagName("li");
                    for (var adi = 0; adi < adbigimg.length; adi++) {
                        adbigimg[adi].className = "hidden";
                        adsmallimg[adi].className = "";
                    }
                    adbigimg[adid - 1].className = "show";
                    adsmallimg[adid - 1].className = "current";
                }
                var adisround = setTimeout("adchangea2(2)", 3000);
                var id;//当前激活id
                //鼠标移开ul块时，恢复轮询
                function change() {
                    adchangea2(id);
                }
        </script>
        </div>
        
        
    </div>
</body>
</html>

结果

焦点图文字背景

广州花都拆违遭遇碎瓶煤气罐

posted @ 2011-11-19 16:05 lei.dong 阅读(1251) 评论(2) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

完美图片新闻轮转效果，腾讯大粤网首页图片轮转改造而来

公告