Jquery自动切换图片

本文介绍了一个基于jQuery的图片轮播插件实现方法,包括自动轮播、手动选择图片及鼠标悬停暂停等功能。该插件适用于网页设计中需要展示多张图片的场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!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>无标题文档</title>
<script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js" type="text/javascript"></script>
<link href="XjhHomePage.css" rel="stylesheet" type="text/css"/>
<script>
//jquery 图片自动切换
    $(function ()
{
var ul = $(".lxfscroll");
        var li = $(".lxfscroll li");
        var tli = $(".lxfscroll-title li");
var speed = 350;
        var autospeed = 3000;
var i = 1;
var index = 0;
var n = 0;
/*标题按钮事件 */
            function lxfscroll() {
                var index = tli.index($(this));
                tli.removeClass("hover");
                $(this).addClass("hover");


                ul.css({ "left": "0px" });
                li.css({ "left": "0px" });
                li.eq(index).css({ "z-index": i });
                li.eq(index).css({ "left": "540px" });
                ul.animate({ left: "-540px" }, speed);
                i++;


            };
            /* 自动轮换 */
            function autoroll() {
                if (n >= 5) {
                    n = 0;
                }
                tli.removeClass("hover");
                tli.eq(n).addClass("hover");
                ul.css({ "left": "0px" });
                li.css({ "left": "0px" });
                li.eq(n).css({ "z-index": i });
                li.eq(n).css({ "left": "540px" });


                n++;
                i++;
                timer = setTimeout(autoroll, autospeed);
                ul.animate({ left: "-540px" }, speed);
            };
            /* 鼠标悬停即停止自动轮换 */
            function stoproll() {
                li.hover(function () {
                    clearTimeout(timer);
                    n = $(this).prevAll().length + 1;
                }, function () {
                    timer = setTimeout(autoroll, autospeed);
                });
                tli.hover(function () {
                    clearTimeout(timer);
                    n = $(this).prevAll().length + 1;
                }, function () {
                    timer = setTimeout(autoroll, autospeed);
                });
            };
            tli.mouseenter(lxfscroll);
            autoroll();
            stoproll();
    });
</script>
</head>


<body>


                <div class="focus">
                    <ul class="lxfscroll">
                        <li><a href="#"
                            target="_blank">
                            <img src="Imge/8c78ce0c-4af6-4205-abc7-56f62ff4af6c.jpg" width="536" height="278">
                            
                            </a> </li> 
                        <li><a href="#"
                            target="_blank">
                            <img src="Imge/6019718e-6ab6-42ec-86e2-0fecc91626c7.jpg" width="536" height="278"></a> </li>
                        <li><a href="#"
                            target="_blank">
                            <img src="Imge/a7e5177d-acc2-4aa1-9f71-a6094e9eb8b8.jpg" width="536" height="278">
                        </a></li>
                        <li><a href="#"
                            target="_blank">
                            <img src="Imge/c9c3c50a-f1a9-4797-96d9-2f92c804f1f3.jpg" width="536" height="278"></a>
                        </li>
                        <li><a href="#"
                            target="_blank">
                            <img src="Imge/1.jpg" width="536" height="278"></a>
                        </li>
                    </ul>
                    <ul class="lxfscroll-title">
                      <li class="hover">1</li>
                        <li class="">2</li>
                        <li class="">3</li>
                        <li class="">4</li>
<li class="">5</li>
                  </ul>
</div>




</body>

</html>



/*XhjHomePage.css*/

.focus
{
    width: 536px;
    margin-left: 0;
    margin-right: auto;
    margin-top: 10px;
    position: relative;
    height: 300px; /*border: 4px solid #EFEFEF;*/
    overflow: hidden;
}
ul
{
margin:0px;
padding:0px;
}
.focus .lxfscroll
{
    /*width: 536px;
    margin-left: 0;
    margin-right: auto;*/
    margin-top: 0px;
    
    position: relative;
     /*border: 4px solid #EFEFEF;*/
    list-style: none;
}


.focus .lxfscroll li
{
    height: 300px;
    width: 536px;
    text-align: center;
    height: 278px;
    position: absolute;
    font-size: 40px;
    font-weight: bold;
}


.lxfscroll-title
{
    position:absolute;
    display:block;
    height: 7px;
    width: 536px;
    text-align: center;
    margin-top: 284px;
}




.focus .lxfscroll-title li
{
    width: 30px;
    height: 8px;
    margin: 0 10px;
    background-color: #e6e6e6;
    display: inline-block;
    _display: inline;
    overflow: hidden;
    vertical-align: top;
    zoom: 1;
    line-height: 40px;
    cursor: pointer;
}


.focus .lxfscroll-title .hover
{
    background-color: #b01b15;
}


<!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、付费专栏及课程。

余额充值