网页布局------轮播图效果实现

标签：box index 网页轮播 color background ------ css left

纯css实现轮播图可以看这里：纯css实现轮播图（自动轮播和手动轮播）效果_☆*往事随風*☆的博客_css轮播图-CSDN博客

代码来源：

html+css+jquery实现轮播图自动切换、左右切换、点击切换_jquery图片轮播幻灯片效果实现左右滚动图片切换代码-CSDN博客

1、html+css+jquery

（1）页面结构

<div class="box">
    <!-- 轮播图 -->
    <div class="box-img"><img src="/images/1.png"></div>
    <div class="box-img"><img src="/images/2.png"></div>
    <div class="box-img"><img src="/images/3.jpg"></div>
    <div class="box-img"><img src="/images/4.jpg"></div>
    <div class="box-img"><img src="/images/5.jpg"></div>
    <div class="box-img"><img src="/images/test.png"></div>
    <!-- 左右切换 -->
    <div class="box-left">&lt;</div>
    <div class="box-right">&gt;</div>
    <!-- 圆点 -->
    <div class="box-dot">
        <ul>
            <li class="btn"></li>
            <li class="btn"></li>
            <li class="btn"></li>
            <li class="btn"></li>
            <li class="btn"></li>
            <li class="btn"></li>
        </ul>
    </div>
</div>

（2）CSS样式

    <style>
　　　　/*设置绝对定位*/

        .box {
            height: 460px;
            width: 1000px;
            position: relative;
       　　　　 }
　　　　/*使用绝对定位设置图片在页面的位置*/

        .box-img {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            transition: 1.5s;
        }
　　　　　/*使用opacity设置*/
        .box-img:nth-child(1) {
            opacity: 1;
        }

        .box-img img {
            height: 460px;
            width: 1000px;
        }

        /*左右切换*/
        .box-left {
            position: absolute;
            left: 0;
            top: 195px;
            width: 35px;
            height: 70px;
            border-radius: 0 5px 5px 0;
            text-align: center;
            line-height: 70px;
            font-size: 27px;
            color: #b0afad;
        }

        .box-left:hover {
            background-color: #777777;
            color: #ffffff;
        }

        .box-right {
            position: absolute;
            right: 0;
            top: 195px;
            width: 35px;
            height: 70px;
            border-radius: 5px 0 0 5px;
            text-align: center;
            line-height: 70px;
            font-size: 27px;
            color: #b0afad;
        }

        .box-right:hover {
            background-color: #777777;
            color: #ffffff;
        }

        /*圆点*/
        .box-dot {
            position: absolute;
            right: 450px;
            bottom: 20px;
        }

        .box-dot ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .box-dot ul li {
            width: 14px;
            height: 14px;
            border-radius: 100%;
            background-color: #4a5460;
            float: left;
            margin-right: 10px;
        }

        .box-dot ul li:hover, .box-dot ul li:nth-child(1) {
            background-color: #ffffff;
        }
    </style>

（3）功能实现

<script src="/jquery.min.js"></script>
<script>
    $(function () {
        var index = 0;
        var timer;

        // 自动切换
        // function f() {
        //     var timer = setInterval(function () {
        //         $(".box-img").css("opacity", 0);
        //         $(".box-img").eq(index).css("opacity", 1);
        //         $(".btn").css("background-color", "#4a5460");
        //         $(".btn").eq(index).css("background-color", "#ffffff");
        //         if ($(".box-img").length - 1 === index) {
        //             index = 0
        //         } else {
        //             index++;
        //         }
        //     }, 4000);
        // }

        // f();
        // 左右切换
        $(".box-left").click(function () {
            clearInterval(timer);
            // 点击左，index减1，减到最小时让成为最大
            if (index === 0) {
                index = $(".box-img").length - 1;
            } else {
                index--;
            }
            $(".box-img").css("opacity", 0);
            $(".box-img").eq(index).css("opacity", 1);
            $(".btn").css("background-color", "#4a5460");
            $(".btn").eq(index).css("background-color", "#ffffff");
            // f();
        });
        $(".box-right").click(function () {
            clearInterval(timer);
            // 点击右，index加1，加到最大时让成为最小
            if (index === $(".box-img").length - 1) {
                index = 0;
            } else {
                index++;
            }
            $(".box-img").css("opacity", 0);
            $(".box-img").eq(index).css("opacity", 1);
            $(".btn").css("background-color", "#4a5460");
            $(".btn").eq(index).css("background-color", "#ffffff");
            // f();
        });
        // 点击圆点切换轮播图
        $(".btn").click(function () {
            clearInterval(timer);
            // 获取第几个圆点
            index = $(this).index()
            // alert(index)
            $(".box-img").css("opacity", 0);
            $(".box-img").eq(index).css("opacity", 1);
            $(".btn").css("background-color", "#4a5460");
            $(".btn").eq(index).css("background-color", "#ffffff");
            // f();
        });
    })
</script>

1、实现点击两次按钮进行图片切换

（1）左侧按钮设置：当index==0时也就是展示第一张图的时候，通过if语句设置index的值为图片长度-1，通过点击左侧按钮index会进行自减操作，通过index图片获取的值会不断减少直至为0再一次重复之前的操作。

（2）右侧按钮：点击右侧按钮index会进行自增操作，当index的值等于图片长度-1时(也就是第一张图片位置)将index设置为0、

（3）在点击按钮之前通过css()方法将opacity和background-color设置为0和灰色，当点击按钮时通过eq()方法获取到图片的索引将图片的css()方法设置为opacity1和白色

2、实现圆点切换，首先需要获取点击圆点的索引，通过$(this).index();可以获取。实现点击圆点切换图片和圆点表示与点击两侧按钮切换图片一样都是通过opacity隐藏和显示图片

3、自动循环图片实现：设置周期定时器f通过index自增控制图片的显示，在点击图标和圆点时需要清楚定时器，不要在后面加入f();那样会快速的循环一边

2、html+css+JavaScript

（1）页面结构

<div id="container">
    <ul class="parent" style="left: 0;">
        <li><img src="/images/1.png"></li>
        <li><img src="/images/2.png"></li>
        <li><img src="/images/3.jpg"></li>
        <li><img src="/images/4.jpg"></li>
        <li><img src="/images/5.jpg"></li>
    </ul>

    <div class="btnLeft">&lt;</div>
    <div class="btnRight">&gt;</div>
    <div class="modal">
        <!-- <div class="title">
            <h2>轮播图</h2>
        </div> -->
        <div class="dots">
            <ul class="clearfix">
                <li class="on"></li>
                <li class="off"></li>
                <li class="off"></li>
                <li class="off"></li>
                <li class="off"></li>
            </ul>
        </div>
    </div>
</div>

（2）css样式

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        list-style: none;
    }
    a{
        text-decoration: none;
    }
    #container{
        position: relative;
        width: 500px;
        height: 260px;
        margin: 20px auto;
        overflow: hidden; /*溢出隐藏：只显示一张图片*/
    }
    #container .parent{
        position: absolute;
        width: 2500px; /*整个图片层长度：500*5=2500*/
        height: 260px;
    }
    
    #container .parent li{
        float: left;
        width: 500px;
        height: 100%;
    }
    #container .parent li img{
        width: 100%;
        height: 100%;
    }
    #container .btnLeft,
    #container .btnRight{
        width: 30px;
        height: 30px;
        background-color: #9E9E9E;
        border-radius: 20%;
        opacity: 80%;
        position: absolute; /*包含块为图片显示层container*/
        top: 0;
        bottom: 0;
        margin: auto;
        font-size: 20px;
            color: #f40;
            text-align: center;
            line-height: 30px;
    }
    #container .btnLeft{
        left: 10px;
    }
    #container .btnRight{
        right: 10px;
    }
    #container .btnLeft:hover,
    #container .btnRight:hover{
        opacity: 90%;
        cursor: pointer;
    }
    /*蒙层*/
    #container .modal{
        width: 100%;
        height: 40px;
        background: rgba(0,0,0,.3);
        position: absolute;
        left: 0;
        bottom: 0;
        line-height: 40px;
        padding: 0 40px;
        box-sizing: border-box;
    }
    #container .modal .title{
        float: left;
        color: #fff;
        font-size: 12px;
    }
    #container .modal .dots{
        float: right;
        position: absolute;
        bottom: 10px;
        left: 340px;
    }
    #container .modal .dots li{
        width: 15px;
        height: 15px;
        border-radius: 50%;
        float: left;
        /*可以使用行块盒*/
        /*display: inline-block;*/
        margin: 0 5px;
        cursor: pointer;
    }
    .clearfix::after{
        content: "";
        display: block;
        clear: both;
    }
    .on{
        background-color: red;
    }
    .off{
        background-color: gray;
    }

（3）功能实现

<script type="text/javascript">
    
var imgShow = document.getElementsByClassName('parent')[0],
    dotList = document.querySelectorAll('.dots >.clearfix > li');
var btnLeft = document.getElementsByClassName('btnLeft')[0],
    btnRight = document.getElementsByClassName('btnRight')[0];
var dotLen = dotList.length,
    index = 0; //轮播层的图片索引，0表示第一张

//圆点显示
function showRadius() {
    for(var i = 0; i < dotLen; i++) {
        if(dotList[i].className = "on"){
            dotList[i].className = "off";
        }
    }
    dotList[index].className = "on";
}

//向左移动
btnLeft.onclick = function() {
    index--;
    if(index < 0){  /*第1张向左时，变为第5张*/
        index = 4;       // index= dotLen -1
    
    }
    showRadius();
    var left;
    var imgLeft = imgShow.style.left;
    if(imgLeft === "0px") { /*当是第1张时，每张图片左移，移4张图，位置为-(4*500)*/
        left = -2000;  //left=-(dotLen -1)*500
    }
    else{
        left = parseInt(imgLeft) + 500; /*由于left为负数，每左移一张加500*/
    }
    imgShow.style.left = left + "px";
}

//向右移动
btnRight.onclick = function() {
    index++;
    if(index > 4){  /*第5张向右时，变为第1张*/
        index = 0;
    }
    showRadius();
    var right;
    var imgLeft = imgShow.style.left;
    if(imgLeft === "-2000px") { /*当是第5张时，第1张的位置为0*/
        right = 0;
    }
    else{
        right = parseInt(imgLeft) - 500; /*由于left为负数，每右移一张减500*/
    }
    imgShow.style.left = right + "px";
}

// 自动轮播
/*var timer;
function autoPlay() {
    timer = setInterval(function() {
        var right;
        var imgLeft = imgShow.style.left;
        if(imgLeft === "-2000px") {
            right = 0;
        }
        else{
            right = parseInt(imgLeft) - 500;
        }
        imgShow.style.left = right + "px";
    } ,1000)
}
autoPlay();*/

for(var i = 0; i < dotLen; i++) {
    /*利用闭包传递索引*/
    (function(i) {
        dotList[i].onclick = function() {
            var dis = index - i; //当前位置和点击的距离
            imgShow.style.left = (parseInt(imgShow.style.left) + dis * 500) + "px";
            index = i; //显示当前位置的圆点
            showRadius();
        }
    })(i);
}

</script>

标签：box,index,网页,轮播,color,background,------,css,left
From： https://www.cnblogs.com/lixianhui/p/18157573

网页布局------轮播图效果实现

1、html+css+jquery

（1）页面结构

（2）CSS样式

（3）功能实现

2、html+css+JavaScript

（1）页面结构

（2）css样式

（3）功能实现

相关文章

赞助商

阅读排行