图片轮播-仿凡客网-jquery

Jquery 仿凡客网图片轮播：

特效解析：

　　①一张大图：760x350 配一张小图：190x350

　　　　<span><img src='bigImg' alt='' /><img src='smallImg' alt='' /></span> 注意这里没有空格，两个图之间没有空隙,span标签区分多少组，途中有

　　　　7个页码，那么就是7组图。

　　②图片左下角的页码，字体雅黑或者consolas字体，12px大小，

　　　当鼠标移进页码，对应的页码背景变红，字体变白，并且对应的一组图片出现，其余图片全部隐藏

　　　移出页码时，字体颜色变灰，背景变白。

　　　同时采用position定位,position:absolute;bottom:15px;left:20px;

　　③图片每隔一定时间自动跳到下一页，并且到达第7页，又从1开始跳。

　　　当鼠标停在页码上，图片轮播停止，鼠标移出，轮播开始。

　　　使用定时器、清除定时器。

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>图片轮播-jquery</title>
    <script type='text/javascript' src='./jquery/jquery-1.10.2.min.js'></script>
    <style>
        #lb-imgBox{
            width:950px;
            height:350px;
            position:relative;
            margin-left:15%;
        }
        #lb-imgBox .hide{
            display:none;
        }
        #page-control{
            position:absolute;
            bottom:15px;
            left:20px;
            width:238px;
            height:30px;
            line-height: 30px;
        }
        #page-control span {
            width:30px;
            height:30px;
            display:block;
            float:left;
            margin-right:2px;
            background:#fff;
            color:#aaa;
            text-align:center;
            font-family:微软雅黑,consolas;/*不加引号 ...*/
            font-size:12px;
        }
        .cur-style, #page-control .cur-style{
            cursor:pointer;
            background:#FF3E3E;
            color:#fff;
        }
    </style>
</head>
<body>
    <div class='lb-imgBox' id='lb-imgBox'>
        <span data-index='0' class='img-container'><img src="./img/__aW1nMDI=__jiaodian1a140825.jpg" alt="图一" /><img class='' src="./img/__aW1nMDI=__jiaodian1b140826.jpg" alt="图一副" /></span>

        <span data-index='0' class='img-container hide'><img src="./img/__aW1nMDI=__jiaodian2a140825.jpg" alt="图二" /><img src="./img/__aW1nMDI=__jiaodian2b1408261.jpg" alt="图二副" /></span>

        <span data-index='0' class='img-container hide'><img src="./img/__aW1nMDI=__jiaodian3a140827.jpg" alt="图三" /><img src="./img/__aW1nMDI=__jiaodian3b140826.jpg" alt="图三副" /></span>

        <span data-index='0' class='img-container hide'><img src="./img/__aW1nMDI=__jiaodian4a140825.jpg" alt="图四" /><img src="./img/__aW1nMDI=__jiaodian4b1408261.jpg" alt="图四副" /></span>

        <span data-index='0' class='img-container hide'><img src="./img/__aW1nMDI=__jiaodian5a140827.jpg" alt="图五" /><img src="./img/__aW1nMDI=__jiaodian5b140826.jpg" alt="图五副" /></span>

        <span data-index='0' class='img-container hide'><img src="./img/__aW1nMDI=__jiaodian6a1408261.jpg" alt="图六" /><img src="./img/__aW1nMDI=__jiaodian6b140826.jpg" alt="图六副" /></span>

        <span data-index='0' class='img-container hide'><img src="./img/__aW1nMDI=__syjd7a140828.jpg" alt="图七" /><img src="./img/__aW1nMDI=__jiaodian7b140826.jpg" alt="图七副" /></span>
        
        <div id='page-control' class='page-control'>
            <span class='cur-style'>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
        </div>
    </div>
    <script>
        $(function () {
            (function () {//采用闭包，保护变量
                //页码
                var spanControl =  $("#page-control").find('span');
                //一组图片,数组
                var imgOb = $("#lb-imgBox").find('.img-container');
                //定义定时器索引，关键
                var s = null;
                spanControl.each(function (i) {
                    $(this).bind("mouseover",function () {
                        var $this = $(this);
                        //停止定时器
                        clearInterval(s);
                        $this.addClass('cur-style').siblings().removeClass('cur-style');
                        imgOb.hide();
                        imgOb.eq(i).show();
                    }).bind('mouseout', function () {
                        var $this = $(this);
                        //重新开始定时器滚动
                        s = setInterval(function () {
                            setLb();
                        }, 2000);
                    });
                })
                
                //每隔一定时间自动滚动，超过7变不滚动，索引是从0开始
                var setLb = function () {
                    //根据页码背景色自动判断序号，下面的i是从1开始，而不是索引的0
                    var i = $("#page-control").find('.cur-style').text();
                    if (i>=7) {
                        i=0;
                    }
                    imgOb.eq(i).show().siblings().not('#page-control').hide();
                    spanControl.eq(i).addClass('cur-style').siblings().removeClass('cur-style');
                }
                
                //加载完成时，自动滚动
                s = setInterval(function () {
                    setLb();
                }, 2000);
            })()
        })
    </script>
</body>
</html>

posted @ 2014-08-29 01:01 Zell~Dincht 阅读(215) 评论(0) 编辑收藏举报

刷新页面返回顶部

图片轮播-仿凡客网-jquery

公告