js 轮播图效果

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<style>

    * {box-sizing:border-box}

    body {font-family: Verdana,sans-serif;}

    .mySlides {display:none}

    /* 幻灯片容器 */

    .slideshow-container {

        max-width: 1000px;

        position: relative;

        margin: auto;

    }

    /* 下一张 & 上一张 按钮 */

    .prev, .next {

        cursor: pointer;

        position: absolute;

        top: 50%;

        width: auto;

        margin-top: -22px;

        padding: 16px;

        color: white;

        font-weight: bold;

        font-size: 18px;

        transition: 0.6s ease;

        border-radius: 0 3px 3px 0;

    }

    /* 定位 "下一张" 按钮靠右 */

    .next {

        right: 0;

        border-radius: 3px 0 0 3px;

    }

    /* On hover, add a black background color with a little bit see-through */

    .prev:hover, .next:hover {

        background-color: rgba(0,0,0,0.8);

    }

    /* 标题文本 */

    .text {

        color: #f2f2f2;

        font-size: 15px;

        padding: 8px 12px;

        position: absolute;

        bottom: 8px;

        width: 100%;

        text-align: center;

    }

    /* 数字文本 (1/3 等) */

    .numbertext {

        color: #f2f2f2;

        font-size: 12px;

        padding: 8px 12px;

        position: absolute;

        top: 0;

    }

    /* 标记符号 */

    .dot {

        cursor:pointer;

        height: 13px;

        width: 13px;

        margin: 0 2px;

        background-color: #bbb;

        border-radius: 50%;

        display: inline-block;

        transition: background-color 0.6s ease;

    }

    .active, .dot:hover {

        background-color: #717171;

    }

    /* 淡出动画 */

    .fade {

        -webkit-animation-name: fade;

        -webkit-animation-duration: 1.5s;

        animation-name: fade;

        animation-duration: 1.5s;

    }

    @-webkit-keyframes fade {

        from {opacity: .4}

        to {opacity: 1}

    }

    @keyframes fade {

        from {opacity: .4}

        to {opacity: 1}

    }

</style>

<body>

<div class="slideshow-container">

    <div class="mySlides fade">

        <div class="numbertext">1 / 3</div>

        <img src="https://c.runoob.com/wp-content/uploads/2017/01/img_mountains_wide.jpg" style="width:100%">

        <div class="text">文本 1</div>

    </div>

    <div class="mySlides fade">

        <div class="numbertext">2 / 3</div>

        <img src="https://c.runoob.com/wp-content/uploads/2017/01/img_fjords_wide.jpg" style="width:100%">

        <div class="text">文本 2</div>

    </div>

    <div class="mySlides fade">

        <div class="numbertext">3 / 3</div>

        <img src="https://c.runoob.com/wp-content/uploads/2017/01/img_nature_wide.jpg" style="width:100%">

        <div class="text">文本 3</div>

    </div>

    <a class="prev" onclick="plusSlides(-1)">❮</a>

    <a class="next" onclick="plusSlides(1)">❯</a>

</div>

<br>

<div style="text-align:center">

    <span class="dot" onclick="currentSlide(1)"></span>

    <span class="dot" onclick="currentSlide(2)"></span>

    <span class="dot" onclick="currentSlide(3)"></span>

</div>

</body>

</html>

<script>

    var slideIndex = 1;

    showSlides(slideIndex);

    //    $(function(){

    //        showSlides(1);

    //    });

    function plusSlides(n) {

        showSlides(slideIndex += n);

    }

    //小圆点 属性：onclick

    function currentSlide(n) {

        showSlides(slideIndex = n);

    }

    function showSlides(n) {

//        alert('zhixing');

        var i;

        var slides = document.getElementsByClassName("mySlides");

        var dots = document.getElementsByClassName("dot");

        if (n > slides.length) {slideIndex = 1}

        if (n < 1) {slideIndex = slides.length}

        //全部隐藏

        for (i = 0; i < slides.length; i++) {

            slides[i].style.display = "none";

        }

        //全部小圆点取消高亮

        for (i = 0; i < dots.length; i++) {

            dots[i].className = dots[i].className.replace(" active", "");

        }

        //对应的div显示+对应的小圆点高亮

        slides[slideIndex-1].style.display = "block";

        dots[slideIndex-1].className += " active";

    }

</script>
巴特西

js 轮播图效果

最新文章

热门文章
