Jquery实现幻灯片轮播

最新推荐文章于 2022-03-02 03:54:15 发布

怪兽i

最新推荐文章于 2022-03-02 03:54:15 发布

阅读量576

点赞数 1

本文链接：https://blog.csdn.net/zhlmonster/article/details/77962995

版权

页面代码如下

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 广告图片轮播切换</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="../../jquery-1.12.4.min.js"></script>
    <script src="newjs.js"></script>
</head>
<body>
<div class="adver">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <div class="arrowLeft"><</div><div class="arrowRight">></div>
</div>
</body>
</html>

CSS样式如下

ul,li{padding: 0;margin: 0; list-style: none;}
.adver{margin: 0 auto; width: 700px; overflow: hidden; height: 454px; position: relative; background: url("../images/adver01.jpg");}
ul{position: absolute; bottom:10px; z-index: 100; width: 100%; text-align: center;}
ul li{display: inline-block; font-size: 10px; line-height: 20px; font-family: "΢���ź�"; margin: 0 1px; width: 20px; height: 20px; border-radius: 50%; background: #333333; text-align: center; color: #ffffff;}
.arrowLeft,.arrowRight{
    position: absolute;
    width: 30px;
    background:rgba(0,0,0,0.2);
    height: 50px;
    line-height: 50px;
    text-align: center;
    top:200px;
    z-index: 150;
    font-family: "΢���ź�";
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    display: block;
}
.arrowLeft{left: 10px;}
.arrowRight{right: 10px;}
li:nth-of-type(1){
    background: orange;
}

JS代码如下，已经加了详细的备注

$(document).ready(function () {
    /*鼠标悬浮*/
    $("div").mouseover(function () {
        /*显示隐藏的左右箭头*/
        $(".arrowLeft").css("display","block");
        $(".arrowRight").css("display","block");
        /*鼠标移开*/
    }).mouseout(function () {
        /*隐藏显示的左右箭头*/
        $(".arrowLeft").css("display","none");
        $(".arrowRight").css("display","none");
    });

    /*设置默认样式*/
    /*指定初始化时候第一个按钮是橙色*/
    $("li:nth-of-type(1)").css("background","#FF8000");
    /*指定除第一个按钮其他所有同胞的样式*/
    $("li:nth-of-type(1)").siblings().css("background","#333333");

    /*定义保存图片数组*/
    var urls=new Array(6);
    urls[0]="images/adver01.jpg";
    urls[1]="images/adver02.jpg";
    urls[2]="images/adver03.jpg";
    urls[3]="images/adver04.jpg";
    urls[4]="images/adver05.jpg";
    urls[5]="images/adver06.jpg";

    /*定义遍历变量*/
    var i=1;
    /*左箭头单击*/
    $(".arrowLeft").click(function(){
        /*定义判断变量*/
        var $num= i;
        /*进行判断*/
        if($num==1){
            alert("已经是第一页啦！");
            return;
        }
        $num--;
        /*更换当前图片*/
        $(".adver").css("background","url("+urls[$num-1]+")");
        /*更改下面按钮的样式*/
        $("li:nth-of-type("+$num+")").css("background","#FF8000");
        $("li:nth-of-type("+$num+")").siblings().css("background","#333333");
        i--;
    });

    /*右箭头单击*/
    $(".arrowRight").click(function(){
        /*获取当前所在的页数*/
        var $num= parseInt($("li").html());
        $num= $num+i;
        /*进行判断*/
        if($num==7){
            alert("已经是最后一页啦！");
            return;
        }
        /*更换当前图片*/
        $(".adver").css("background","url("+urls[$num-1]+")");
        /*更改下面按钮的样式*/
        $("li:nth-of-type("+$num+")").css("background","#FF8000");
        $("li:nth-of-type("+$num+")").siblings().css("background","#333333");
        i++;
    });

    /*自动轮播*/
    function lunbo() {
        /*获取当前所在的页数*/
        var $num= parseInt($("li").html());
        $num= $num+i;
        /*进行判断*/
        if($num==7){
            /*跳到第一页从头来*/
           i-=6;
            return;
        }
        /*更换当前图片*/
        $(".adver").css("background","url("+urls[$num-1]+")");
        /*更改下面按钮的样式*/
        $("li:nth-of-type("+$num+")").css("background","#FF8000");
        $("li:nth-of-type("+$num+")").siblings().css("background","#333333");
        i++;
    }
    /*间隔1秒调用一次*/
    var bo=setInterval(lunbo,1000);
})

图片就不再上传了，大家自己找几张就可以了，把文件名改一下

下面上预览图