最简单的jQuery轮播图（原理解析）

html：

<div class="middle_right">

    <div id="lunbobox">

        <div id="toleft">

            &lt;</div>

                <div class="lunbo">

                    <a href="#"><img src="http://www.jq22.com/img/cs/500x300a.png"></a>

                    <a href="#"><img src="http://www.jq22.com/img/cs/500x300b.png"></a>

                    <a href="#"><img src="http://www.jq22.com/img/cs/500x300c.png"></a>

                    <a href="#"><img src="http://www.jq22.com/img/cs/500x300d.png"></a>

                    <a href="#"><img src="http://www.jq22.com/img/cs/500x300.png"></a>

                </div>

                <div id="toright">&gt;</div>

                <ul>

                    <li></li>

                    <li></li>

                    <li></li>

                    <li></li>

                    <li></li>

                </ul>

                <span></span>

        </div>

    </div>

css：

#lunbobox {

    width:500px;

    height:300px;

    position:relative;

}

.lunbo {

    width:500px;

    height:300px;

}

.lunbo img {

    width:500px;

    height:300px;

    position:absolute;

    top:0px;

    left:0px;

}

#lunbobox ul {

    width:285px;

    position:absolute;

    bottom:10px;

    right:0px;

    z-index:;

}

#lunbobox ul li {

    cursor:pointer;

    width:10px;

    height:4px;

    border:1px solid #cccccc;

    float:left;

    list-style:none;

    background:#cccccc;

    text-align:center;

    margin:0px 5px 0px 0px;

}

#toleft {

    display:none;

    width:30px;

    height:100px;

    font-size:40px;

    line-height:100px;

    text-align:center;

    color:#f4f4f4;

    /*background:#cccccc;

    */

    /*background:url("../images/toleft.jpg")no-repeat center;

    */

    position:absolute;

    top:90px;

    left:12px;

    cursor:pointer;

    z-index:;

    opacity:0.4;

}

#toright {

    display:none;

    width:30px;

    height:100px;

    font-size:40px;

    line-height:100px;

    text-align:center;

    color:#f4f4f4;

    /*background:#cccccc;

    */

    position:absolute;

    top:90px;

    right:0px;

    cursor:pointer;

    z-index:;

    opacity:0.4;

}

js：

///轮播

$(function() {

    //$("#toright").hide();

    //$("#toleft").hide();

    $('#toright').hover(function() {

        $("#toleft").hide()

    }, function() {

        $("#toleft").show()

    })

    $('#toleft').hover(function() {

        $("#toright").hide()

    }, function() {

        $("#toright").show()

    })

})

var t;

var index = ;

/////自动播放

t = setInterval(play, )

function play() {

    index++;

    if (index > ) {

        index =

    }

    // console.log(index)

    $("#lunbobox ul li").eq(index).css({

        "background": "#999",

        "border": "1px solid #ffffff"

    }).siblings().css({

        "background": "#cccccc",

        "border": ""

    })

    $(".lunbo a ").eq(index).fadeIn().siblings().fadeOut();

};

///点击鼠标 图片切换

$("#lunbobox ul li").click(function() {

    //添加 移除样式

    //$(this).addClass("lito").siblings().removeClass("lito"); //给当前鼠标移动到的li增加样式 且其余兄弟元素移除样式   可以在样式中 用hover 来对li 实现

    $(this).css({

        "background": "#999",

        "border": "1px solid #ffffff"

    }).siblings().css({

        "background": "#cccccc"

    })

    var index = $(this).index(); //获取索引 图片索引与按钮的索引是一一对应的

    // console.log(index);

    $(".lunbo a ").eq(index).fadeIn().siblings().fadeOut(); // siblings  找到 兄弟节点(不包括自己）

});

/////////////上一张、下一张切换

$("#toleft").click(function() {

    index--;

    if (index <= ) //判断index<0的情况为：开始点击#toright  index=0时  再点击 #toleft 为负数了 会出错

    {

        index =

    }

    console.log(index);

    $("#lunbobox ul li").eq(index).css({

        "background": "#999",

        "border": "1px solid #ffffff"

    }).siblings().css({

        "background": "#cccccc"

    })

    $(".lunbo a ").eq(index).fadeIn().siblings().fadeOut(); // siblings  找到 兄弟节点(不包括自己）必须要写

}); // $("#imgbox a ")获取到的是一个数组集合 。所以可以用index来控制切换

$("#toright").click(function() {

    index++;

    if (index > ) {

        index =

    }

    console.log(index);

    $(this).css({

        "opacity": "0.5"

    })

    $("#lunbobox ul li").eq(index).css({

        "background": "#999",

        "border": "1px solid #ffffff"

    }).siblings().css({

        "background": "#cccccc"

    })

    $(".lunbo a ").eq(index).fadeIn().siblings().fadeOut(); // siblings  找到 兄弟节点(不包括自己）

});

$("#toleft,#toright").hover(function() {

        $(this).css({

            "color": "black"

        })

    },

    function() {

        $(this).css({

            "opacity": "0.3",

            "color": ""

        })

    })

///

///////鼠标移进  移出

$("#lunbobox ul li,.lunbo a img,#toright,#toleft ").hover(

    ////////鼠标移进

    function() {

        $('#toright,#toleft').show()

        clearInterval(t);

    },

    ///////鼠标移开

    function() {

        //$('#toright,#toleft').hide()

        //alert('aaa')

        t = setInterval(play, )

        function play() {

            index++;

            if (index > ) {

                index =

            }

            $("#lunbobox ul li").eq(index).css({

                "background": "#999",

                "border": "1px solid #ffffff"

            }).siblings().css({

                "background": "#cccccc"

            })

            $(".lunbo a ").eq(index).fadeIn().siblings().fadeOut();

        }

    })

巴特西

最简单的jQuery轮播图（原理解析）

最新文章

热门文章