渐变轮播图

最新推荐文章于 2021-11-08 14:57:37 发布

pumpkin_truck

最新推荐文章于 2021-11-08 14:57:37 发布

阅读量277

点赞数

文章标签： html javascript css3 css html5

本文链接：https://blog.youkuaiyun.com/pumpkin_truck/article/details/111869256

版权

本文介绍了如何使用HTML、CSS3和JavaScript实现一个带有渐变过渡效果的轮播图。内容包括轮播图结构的搭建、动态创建序号、next和prev按钮的轮播功能、序号点击事件以及鼠标交互的自动轮播控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

渐变轮播图

要求：
1）完成轮播图结构及样式的搭建；
2）根据图片的数量动态创建序号；
3）点击next按钮实现图片的轮播并有过渡效果;
4）点击prev按钮实现图片的轮播并有过渡效果；
5）给序号注册点击事件让图片轮播；
6）图片自动轮播，鼠标进入盒子让两个箭头显示并停止定时器；
7）鼠标离开盒子箭头消失并重新开启定时器
所以接下来我们就按照这个步骤一步一步来实现它吧

首先我们先完成html的结构搭建


<body>
    <!-- 创建一个大容器 -->
    <div class="box" id="box">
        <!-- 需要轮播的图片 -->
        <ul id="ul">
            <li><img src="images/f1.jpg" alt=""></li>
            <li><img src="images/f2.jpg" alt=""></li>
            <li><img src="images/f3.jpg" alt=""></li>
            <li><img src="images/f4.jpg" alt=""></li>
            <li><img src="images/f5.jpg" alt=""></li>
        </ul>
        <!-- 序号 -->
        <ol id="ol">
        </ol>
        <!-- 上一个，下一个按钮 -->
        <div class="prev" id="prev">prev</div>
        <div class="next" id="next">next</div>
    </div>
</body>

然后再进行样式设计

* {
    margin: 0;
    padding: 0;
}

*::selection {
    background-color: none;
}

li {
    list-style: none;
}

.box {
    width: 800px;
    height: 400px;
    margin: 50px auto;
    position: relative;
}

ul li {
    position: absolute;
}

img {
    width: 800px;
    height: 400px;
}

ol {
    position: absolute;
    bottom: 20px;
    right: 30px;
}

ol li {
    width: 20px;
    height: 20px;
    border: 1px solid #cccccc;
    line-height: 20px;
    float: left;
    text-align: center;
    font-size: 12px;
    cursor: pointer;
}

.prev,
.next {
    width: 80px;
    height: 40px;
    background-color: rgba(0, 0, 0, .7);
    position: absolute;
    top: 50%;
    color: #ccc;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
}

.next {
    right: 0px;
}

.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, .6);
}

.prev:active,
.next:active {
    background-color: rgba(0, 0, 0, .4);
}

.current {
    background-color: darkgoldenrod;
}

.box ul li:first-child {
    opacity: 1;
}

最后完成我们的Js部分

function $(id) {
    return document.getElementById(id)
}
var tus = $('ul').children
var ol = document.getElementById('ol')
var index = 0
var count = tus.length
    //动态生成序号
for (var i = 0; i < count; i++) {
    var lis = document.createElement('li')
    lis.innerText = i + 1
    ol.appendChild(lis)
    if (i == 0) {
        lis.className = 'current'
    }
}

//next按钮
$('next').onclick = function() {
    index++
    if (index == tus.length) {
        index = 0
    }
    for (var i = 0; i < ol.children.length; i++) {
        tus[i].style.opacity = '0'
        ol.children[i].className = ''
    }
    tus[index].style.opacity = '1'
    ol.children[index].className = 'current'
}

//左按钮
$('prev').onclick = function() {
    index--
    if (index < 0) {
        index = tus.length - 1
    }
    for (var i = 0; i < ol.children.length; i++) {
        tus[i].style.opacity = '0'
        ol.children[i].className = ''
    }
    tus[index].style.opacity = '1'
    ol.children[index].className = 'current'
}


//下面按钮
for (var i = 0; i < count; i++) {
    ol.children[i].setAttribute('index', i)
    ol.children[i].onclick = function() {
        var inlind = parseInt(this.getAttribute('index'))
        for (i = 0; i < ol.children.length; i++) {
            ol.children[i].className = ''
            tus[i].style.opacity = '0'
        }
        index = inlind
        tus[inlind].style.opacity = '1'
        this.className = 'current'
    }
}

//定时器
function fn() {
    next.onclick()
}
var timerId = setInterval(fn, 1000)
$('box').onmouseenter = function() {
    clearInterval(timerId)
    $('next').style.display = 'block'
    $('prev').style.display = 'block'
}
$('box').onmouseleave = function() {
    timerId = setInterval(fn, 1000)
    $('next').style.display = 'none'
    $('prev').style.display = 'none'
}

就这样，完成了一个简单的轮播图