渐变轮播图案例详解

最新推荐文章于 2022-03-18 19:37:02 发布

绘梨衣的Sakura

最新推荐文章于 2022-03-18 19:37:02 发布

阅读量886

点赞数 6

文章标签： js css html

本文链接：https://blog.csdn.net/Azhongpu/article/details/111565698

版权

渐变轮播图

写轮播图前，首先要建好思路，首先要给个大盒子，把整个轮播图包起来，然后里面放入播放的图片，还有可以切换图片的左右箭头和跟图片对应的点击下标。通过css加js来实现轮播效果，下面上案例：

html部分代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渐变轮播图</title>
    <link rel="stylesheet" href="css/demo.css">
</head>
<body>
    <!-- 整个轮播图的大盒子 -->
    <div id="box">
        <!-- 用ul li把图片包起来 -->
        <ul id='ul_box'>
            <li><img src="img/1.jpg" alt=""></li>
            <li><img src="img/2.jpg" alt=""></li>
            <li><img src="img/3.jpg" alt=""></li>
            <li><img src="img/4.jpg" alt=""></li>
            <li><img src="img/5.jpg" alt=""></li>
        </ul>
        <!-- 用ol li来表示下标 -->
        <ol id="ol_box">
            <li>
                <div class="current"></div>
            </li>
            <li>
                <div></div>
            </li>
            <li>
                <div></div>
            </li>
            <li>
                <div></div>
            </li>
            <li>
                <div></div>
            </li>
        </ol>
        <!-- 左箭头 -->
        <div id="left"></div>
        <!-- 右箭头 -->
        <div id="right"></div>
    </div>
    <script src="js/demo.js"></script>
</body>
</html>

我这ol li为啥里给div，是因为我想用跟图片对应的下标出现这种效果
在这里插入图片描述

css样式部分

/* 清除浏览器默认样式 */

* {
    margin: 0;
    padding: 0;
}


/* 给body设置背景颜色 */

body {
    background-color: teal;
}


/* 清除ul和ol的li默认样式 */

ul li,
ol li {
    list-style: none;
}


/* 整个轮播图的大盒子样式 */

#box {
    width: 800px;
    height: 450px;
    margin: 150px auto 0;
    background-color: white;
    position: relative;
}


/* 因为图片尺寸比较大，这里在设置了宽高 */

#ul_box li img {
    width: 800px;
    height: 450px;
}


/* 把ul li定位到一起，再把透明度设为0，在给过度属性效果 */

#ul_box li {
    position: absolute;
    left: 0;
    top: 0;
    /* 透明度 */
    opacity: 0;
    /* 过度属性，使后面的图片渐变的时候更有动画效果 */
    transition: all .8s;
}


/* 左箭头样式 */

#left {
    width: 60px;
    height: 60px;
    cursor: pointer;
    background-image: url(../img/icon02.svg);
    background-position: -10px -83px;
    position: absolute;
    left: 0;
    top: 195px;
}


/* 左箭头hover效果 */

#left:hover {
    background-image: url(../img/icon02.svg);
    background-position: -250px -83px;
}


/* 右箭头样式 */

#right {
    width: 60px;
    height: 60px;
    cursor: pointer;
    background-image: url(../img/icon02.svg);
    background-position: -90px -83px;
    position: absolute;
    right: 0;
    top: 195px;
}


/* 右箭头hover效果 */

#right:hover {
    background-image: url(../img/icon02.svg);
    background-position: -170px -83px;
}


/* 把ol定位到大盒子box左下角 */

#ol_box {
    width: 200px;
    height: 35px;
    position: absolute;
    right: 0;
    bottom: 0;
}


/* 给ol_li左浮动，圆形边框*/

#ol_box li {
    float: left;
    width: 20px;
    height: 20px;
    margin-left: 15px;
    border: 1px solid rgba(255, 192, 203, 0.5);
    border-radius: 50%;
    position: relative;
    cursor: pointer;
}


/* 小标签点击的圆点*/

ol li div {
    width: 16px;
    height: 16px;
    background-color: rgba(89, 230, 243, 0.5);
    border-radius: 50%;
    position: absolute;
    left: 2px;
    top: 2px;
    /* 使盒子消失 */
    display: none;
}


/* 第一个圆点显示 */

.current {
    display: block;
}

写完css样式的效果，因为我吧ul li设为透明度为0所以这里没有显示图片，后面我会用js把第一张图显示。
在这里插入图片描述

js代码部分

首先要获取html标签

// 获取id标签的函数
function $(id) {
    return document.getElementById(id)
}
// 下面是获取的函数
var box = $('box')
var ul = $('ul_box')
var ol = $('ol_box')
var ul_li = ul.getElementsByTagName('li')
var ol_li = ol.getElementsByTagName('li')
// 获取ol li下的div
var divs = ol.querySelectorAll('li>div')
var div_l = $('left')
var div_r = $('right')

使第一张照片显示

 // 使ul li的一张图显示
ul_li[0].style.opacity = 1

在这里插入图片描述
循环ol li创建下标index，给每个ol li设置点击事件，在给左右箭头设置点击事件，使点击时可以上下切换图，最后时轮播图自动轮播

// 循环ol li创建下标index，给每个ol li设置点击事件
for (var i = 0; i < ol_li.length; i++) {
    ol_li[i].setAttribute('index', i)
    ol_li[i].onclick = dianji
}
// 排他函数
function exclusive() {
    // 给所有的ol li的div和ul li全部显示
    for (var i = 0; i < ul_li.length; i++) {
        divs[i].className = ''
        ul_li[i].style.opacity = 0
    }
    // 使当前ul li 和div显示
    ul_li[index].style.opacity = 1
    divs[index].className = 'current'
}
// ol li点击事件
function dianji() {
    var li_index = this.getAttribute('index')
    index = li_index
    exclusive()
}
// 给个index为0的变量，也就是下标
var index = 0
// 右箭头点击事件
div_r.onclick = function() {
    index++
    // 当我index++ 大于等于，ul li的length时，index等于0，就相当于重头在轮播
    if (index >= ul_li.length) {
        index = 0
    }
    exclusive()
}
// 左箭头点击事件
div_l.onclick = function() {
    // 当我index等于0，，index等于ul li的length时，就相当于重头在轮播，在index--
    if (index == 0) {
        index = ul_li.length
    }
    index--
    exclusive()
}
// 给轮播图定时器自动轮播
var times = setInterval(function() {
    index++
    if (index >= ul_li.length) {
        index = 0
    }
    exclusive()
}, 2000)
// 当鼠标经过轮播图时，就停止自动轮播
box.onmouseover = function() {
    clearInterval(times)
    times = null
}
// 当鼠标离开轮播图时，就开始自动轮播
box.onmouseout = function() {
    times = setInterval(function() {
        index++
        if (index >= ul_li.length) {
            index = 0
        }
        exclusive()
    }, 2000)
}

最后的效果图

在这里插入图片描述

绘梨衣的Sakura

关注

6
点赞
踩
17

收藏

觉得还不错? 一键收藏
2
评论
渐变轮播图案例详解

渐变轮播图写轮播图前，首先要建好思路，首先要给个大盒子，把整个轮播图包起来，然后里面放入播放的图片，还有可以切换图片的左右箭头和跟图片对应的点击下标。通过css加js来实现轮播效果，下面上案例：html部分代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
复制链接

扫一扫