jquery 实现图片轮播

水深无声 2021-11-23 11:26 398阅读 0赞

html源码：

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:5;  
\}  
\#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:99;  
    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:99;  
    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 = 0;  
/自动播放  
t = setInterval(play, 3000)

function play() \{  
    index++;  
    if (index > 4) \{  
        index = 0  
    \}  
    // 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(1000).siblings().fadeOut(1000);  
\};

///点击鼠标 图片切换  
$("\#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(1000).siblings().fadeOut(1000); // siblings  找到 兄弟节点(不包括自己）  
\});

/上一张、下一张切换  
$("\#toleft").click(function() \{  
    index--;  
    if (index <= 0) //判断index<0的情况为：开始点击\#toright  index=0时  再点击 \#toleft 为负数了 会出错  
    \{  
        index = 4  
    \}  
    console.log(index);  
    $("\#lunbobox ul li").eq(index).css(\{  
        "background": "\#999",  
        "border": "1px solid \#ffffff"  
    \}).siblings().css(\{  
        "background": "\#cccccc"  
    \})

$(".lunbo a ").eq(index).fadeIn(1000).siblings().fadeOut(1000); // siblings  找到 兄弟节点(不包括自己）必须要写  
\}); // $("\#imgbox a ")获取到的是一个数组集合 。所以可以用index来控制切换

$("\#toright").click(function() \{  
    index++;  
    if (index > 4) \{  
        index = 0  
    \}  
    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(1000).siblings().fadeOut(1000); // 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, 3000)

function play() \{  
            index++;  
            if (index > 4) \{  
                index = 0  
            \}  
            $("\#lunbobox ul li").eq(index).css(\{  
                "background": "\#999",  
                "border": "1px solid \#ffffff"  
            \}).siblings().css(\{  
                "background": "\#cccccc"  
            \})  
            $(".lunbo a ").eq(index).fadeIn(1000).siblings().fadeOut(1000);  
        \}  
    \})

来源：[http://www.jq22.com/webqd656][http_www.jq22.com_webqd656]

[http_www.jq22.com_webqd656]: http://www.jq22.com/webqd656