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

先看网页代码:

<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);
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery图片自动切换</title> <script language="javascript" src="http://www.vihchina.net/Public/Js/jQuery/jQuery.js"></script> <style type="text/css"> *{ margin:0; padding:0; border:0; list-style:none} img{ display:block; border:0} body{ padding:50px;} .switch{ width:320px; height:280px; border:1px #CCCCCC solid; padding:3px;} .switch .pic_box{width:320px; height:255px; position:relative;} .switch .pic_box li{ width:320px; height:255px; float:left; position:absolute} .switch .pic_box li .pic{ width:320px; height:255px;} .switch .pic_box li .pic img{ width:320px; height:230px;} .switch .pic_box li .txt{ display:block; width:320px; height:25px; font-size:13px; overflow:hidden; line-height:25px; text-align:center; overflow:hidden; color:#666666} .switch .btn_box{ width:320px; height:25px; float:right; background:#2B2B2B} .switch .btn_box li{ border:1px solid #333333; width:23px; height:23px; float:left; background:#CCCCCC; cursor:pointer; line-height:25px; overflow:hidden; text-align:center; font-weight:700} </style> </head> <body> <div class="switch"> <ul class="pic_box"> <li id="pic1"><a href="http://www.vihchina.net" target="_blank" class="pic"><img src="images/1.jpg" /></a><a href="http://www.vihchina.net" target="_blank" class="txt">京津渝等28城市获批用公积金建保障房</a></li> <li id="pic2" style="display:none"><a href="http://www.vihchina.net" target="_blank" class="pic"><img src="images/2.jpg" /></a><a href="http://www.vihchina.net" target="_blank" class="txt">俄大火逼近绝密核设施 毒雾笼罩莫斯科</a></li> <li id="pic3" style="display:none"><a href="http://www.vihchina.net" target="_blank" class="pic"><img src="images/3.jpg" /></a><a href="http://www.vihchina.net" target="_blank" class="txt">银监会清查银行3000项收费 叫停点钞费</a></li> <li id="pic4" style="display:none"><a href="http://www.vihchina.net" target="_blank" class="pic"><img src="images/4.jpg" /></a><a href="http://www.vihchina.net" target="_blank" class="txt">鸭绿江干流现超警戒洪水 东北强降雨减弱 </a></li> <li id="pic5" style="display:none"><a href="http://www.vihchina.net" target="_blank" class="pic"><img src="images/5.jpg" /></a><a href="http://www.vihchina.net" target="_blank" class="txt">美国防部确定华盛顿号航母将参加黄海军演</a></li> </ul> <ul class="btn_box"> <li style="background:#FF0000">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </body> </html> <script language="javascript" type="text/javascript"> $(document).ready(function(){ $(".btn_box li").css('backgroundColor','#eeeeee'); $(".btn_box li").eq(0).css('backgroundColor','#FF0000'); //获取图片总数 var len = $(".btn_box li").size(); //设置默认显示图片 var index = 1; $(".btn_box li").click(function(){ index = $(".btn_box li").index(this); showimg(index); }); // $(".btn_box").hover(function(){ if (myTime){ clearInterval(myTime); } },function(){ myTime = setInterval(function(){ index++; if(index>=len){ index=0; } showimg(index); },4000); }); //自动开始切换 var myTime = setInterval(function(){ showimg(index); index++; if (index>=len){ index=0; } },4000); }); //显示图片 function showimg(i){ $(".btn_box li").css('backgroundColor','#eeeeee'); $(".btn_box li").eq(i).css('backgroundColor','#FF0000'); $(".pic_box li").fadeOut(800); $("#pic"+$(".btn_box li").eq(i).text()).fadeIn(800); } </script> 来源www.vihchina.net
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值