JQuery中图片自动切换和手动切换

最新推荐文章于 2025-08-23 16:29:45 发布

原创最新推荐文章于 2025-08-23 16:29:45 发布 · 2.3k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jquery

jQuery 专栏收录该内容

7 篇文章

订阅专栏

先看网页代码：

<body>
<div id="content">
<div id="top">
<ul>
<li class="top1"><a href="#" id="tianmao" class="a_link">天猫</a>精选</li>
<li class="top2">
<div>1吃货节<span style="color:#ccc">sdfsfsfdsfsd</span></div>
<div>2电器热卖</div>
<div>3天天低价</div>
</li>
<li class="top3"><img src="images/back.JPG" width="24" height="24" alt="" class="left"/><img src="images/go.JPG" width="24" height="24" alt="" class="right"/></li>
</ul>
</div>
<div id="middle">
<ul>
<li class="back"><img src="images/back.JPG" width="24" height="24" class="imgleft"/></li>
<li class="imgs">
<div><img src="images/middle1.JPG" width="442" height="138" /></div>
<div><img src="images/middle2.JPG" width="442" height="138" /></div>
<div><img src="images/middle3.JPG" width="442" height="138" /></div>

</li>
<li class="go"><img src="images/go.JPG" width="24" height="24" class="imgright"/></li>
</ul>
</div>
<div id="bottom">
<ul>
<li><img src="images/bottom1.JPG" width="68" height="43" /></li>
<li><img src="images/bottom2.JPG" width="68" height="43" /></li>
<li><img src="images/bottom3.JPG" width="68" height="43" /></li>
<li><img src="images/bottom4.JPG" width="68" height="43" /></li>
<li><img src="images/bottom5.JPG" width="68" height="43" /></li>
<li><img src="images/bottom6.JPG" width="68" height="43" /></li>
</ul>

</div>
</div>

</body>

这里：css样式：

@charset "utf-8";
/* CSS Document */
* {
    list-style-type:none;
    font-size:12px;
    margin:0;
    padding:0;

}

img {
    border-left-width:0;
    border-right-width:0;
    border-top-width:0;
    border-bottom-width:0;
    }
ul li {
    float:left;
    }

#content{
    height: 250px;
    width: 495px;
    margin-top: 20px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
#content #bottom{
    height: 42px;
}
#content #top {
    height: 24px;
    line-height: 24px;
}
#top ul .top1 {
    width: 260px;
}
/*  默认  */
.a_link {
    color: #000;
    text-decoration: none;
}
/*  鼠标放上时  */
.a_over {
    color: #ff7300;
    text-decoration: underline;
}
#top ul .top2 {
    height: 24px;
    overflow: hidden;
    width: 180px;
    text-align: right;
}
#top ul .top3 {
    float: right;
    height: 24px;
    width: 48px;
}
#content #middle {
    height: 140px;
    border: 1px solid #CCC;
}
.imgs {
    overflow: hidden;
    height: 138px;
    width: 442px;
}
#middle ul .back {
    height: 100%;
    width: 24px;
    padding-top: 50px;
    text-align: center;
}
#middle ul .go {
    height: 100%;
    width: 24px;
    padding-top: 50px;
}
#content #bottom {
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-color: #CCC;
    border-bottom-color: #CCC;
    border-left-color: #CCC;
    padding-left: 40px;
    height: 45px;
}

JQuery的关键代码：

<script>

$(function(){ 
    //天猫颜色改变
    $("#tianmao").hover(function(){
     $(this).removeClass().addClass("a_over");
    },function(){
        $(this).removeClass().addClass("a_link");
    });
    autoleft();
    clickleft1();
    clickright1();
    automiddle();
    clickmleft1();
    clickmright1();

    $("#bottom ul li").click(function() {
        switch($(this).index()){
            case 0:
                location="www.0.com";
                break;
            case 1:
                location="www.1.com";
                break;
            case 2:
                location="www.2.com";
                break;
            case 3:
                location="www.3.com";
                break;
            case 4:
                location="www.4.com";
                break;
            case 5 :
                location="www.5.com";
                break;  

            }
    });




    }); 


    //左上角广告自动播放
    function autoleft(){
         var scrtime; 
    var i=0;
    $(".top2").hover(function(){ 
         clearInterval(scrtime);//停止滚动 
    },function(){ 
        scrtime = setInterval(function(){

                    if(i>2){i=0;}
                var ul = $(".top2 div"); 
               ul.eq(i).show().siblings().hide();           
                i++;


        },3000); 
     }).trigger("mouseleave");      
        }

//选中左上角<时图片显示
function clickleft1(){
    var i=2;
    $(".top3 .left").click(function(){ 
               if(i<0){i=2;}
                var ul = $(".top2 div"); 
                ul.eq(i).show().siblings().hide();          
                i--;   
     })
}

//选中右上角>时图片显示
function clickright1(){
    var i=0;
    $(".top3 .right").click(function(){ 
               if(i>2){i=0;}
                var ul = $(".top2 div"); 
                ul.eq(i).show().siblings().hide();          
                i++;   
     })
}


//中间广告自动播放
function automiddle(){
         var scrtime; 
    var i=0;
    $(".imgs").hover(function(){ 
         clearInterval(scrtime);//停止滚动 
    },function(){ 
        scrtime = setInterval(function(){

                    if(i>2){i=0;}
                var ul = $(".imgs div"); 
               ul.eq(i).show().siblings().hide();           
                i++;


        },3000); 
     }).trigger("mouseleave");      
        }


//选中中间<时图片显示
function clickmleft1(){
    var i=2;
    $(".back ").click(function(){ 
               if(i<0){i=2;}
                var ul = $(".imgs div"); 
                ul.eq(i).show().siblings().hide();          
                i--;   
     })
}

    //选中中间角>时图片显示
function clickmright1(){
    var i=0;
    $(".go").click(function(){ 
               if(i>2){i=0;}
                var ul = $(".imgs div"); 
                ul.eq(i).show().siblings().hide();          
                i++;   
     })
}


</script>

另外自动切换的另外一种代码：

 setInterval(function () {
        var indexs;
        var div = $(".imgs div").map(function (i, v) {
            if ($(v).css("display") == "block")
                indexs = i;
            return v;
        })
        var values = $(div.get(0));
        indexs++;
        if (indexs > 2)
            indexs = 0;

        $(".imgs div").each(function (i, v) {
            if (indexs == i)
                $(v).css("display", "block");
            else
                $(v).css("display", "none");
        })

    }, 3000);