图片轮播-仿凡客网-jquery

Jquery 仿凡客网 图片轮播:

图片轮播-仿凡客网-jquery_第1张图片

特效解析:

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

        注意这里没有空格,两个图之间没有空隙,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>图片轮播-jquerytitle>
    <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'>1span>
            <span>2span>
            <span>3span>
            <span>4span>
            <span>5span>
            <span>6span>
            <span>7span>
        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>

 

转载于:https://www.cnblogs.com/Zell-Dinch/articles/3943961.html

你可能感兴趣的:(图片轮播-仿凡客网-jquery)