用jQurey改写轮播图（用$.each（）遍历数组的方式进行轮播图的替换）2019年5月29日20点 - JavaScript

Home > List of blog posts > 用jQurey改写轮播图（用$.each（）遍历数组的方式进行轮播图的替换）2019年5月29日20点

Blogger Information

Blog 49

fans 1

comment 0

visits 45193

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        .box {
            width:1920px;
            height: 500px;
        }

        .box ul {
            padding: 0;
            margin: 0;
        }

        /*将全部图片样式默认不显示*/
        .box ul:first-of-type li {
            display: none;
            list-style: none;
        }

        .box ul:last-of-type {
            text-align: center;
            margin-top: -50px;
        }

        .box ul:last-of-type li {
            list-style: none;
            display: inline-block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            background-color: black;
            color: white;
            border-radius: 50%;
            margin: 0 5px;
        }

        .box ul:last-of-type li:hover {
            cursor: pointer;
            background-color: white;
            color: black;
        }
    </style>

</head>
<body>
<div class="box">
<!--    轮播图片-->
    <ul class="slider">
<!--        jQuery中的遍历数组从0开始显示，所以将图片名字改成0，1, 2-->
        <li id="active" style="display: block"><img src="static/images/banner0.jpg" alt=""></li>
        <li><img src="static/images/banner1.jpg" alt=""></li>
        <li><img src="static/images/banner2.jpg" alt=""></li>
    </ul>
<!--    切换按钮-->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

<script src="static/js/jquery-3.4.1.js"></script>
<script>
    //原生JavaScript代码
    // 获取到所有按钮
    // var lis = document.querySelectorAll('.box ul:last-of-type li');
    // // 获取当前正在显示的图片
    // var currentImg = document.querySelector('#active img');
    //
    // // 点击后切换图片
    // for (var i = 0; i < lis.length; i++) {
    //     // 自定义索引,获取到当前正在显示的图片索引
    //     lis[i].index = i;
    //     // 给每一个按钮添加点击事件
    //     lis[i].onclick = function () {
    //         currentImg.src = 'static/images/banner'+parseInt(this.index+1) + '.jpg';
    //     };
    // }
    //
    // // 用间歇式定时器, 每隔2秒随机切换图片
    // setInterval(function () {
    //     var n = Math.floor(Math.random()*3)+1;
    //     currentImg.src = 'static/images/banner'+parseInt(n) + '.jpg';
    // }, 2000);

    //jQuery改写
    var lis =$('.box ul:last-of-type li');  //获取所有的按钮
    var currentImg = $('#active img')[0];//获取焦点图片

    // //测试
    console.log(lis);
    console.log(currentImg);

    //用$.each()遍历数据，直接在函数内添加点击函数
    $.each(lis,function (value,element) {
        $(element).on('click',function(){
            console.log(value);
            currentImg.src='static/images/banner'+ value + '.jpg';
            console.log(currentImg.text);
            $(element).css('background-color','#42426F');//选中显示
            //移除当前显示图片函数
            remove();
        })
    });
    //移出添加的图片函数
    function remove(){
        for(var i = 0; i<lis.length; i ++){
            $(lis[i]).attr('style','');
        }
    }
    setInterval(function () {
        //添加一个1至3的随机数
        var n = Math.floor(Math.random()*3);
        currentImg.src = 'static/images/banner'+ parseInt(n) + '.jpg';    //用parseInt获取整数输出
        for(var i = 0; i<lis.length; i ++) {
            $(lis[i]).attr('style', '');
        }
        $(lis[n]).css('background-color','#42426F');
        // $(lis[n]).css('color','black');
    }, 2000);
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

因为遍历数组是从0开始，所以将原有图片名字改成0,1,2,三张

实际显示效果（截取了其中一张图片显示）：

轮播图.png

Correction status：Uncorrected

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

520小实验

2019-05-20 22:44:59

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

实例