轮播图~~

最新推荐文章于 2024-09-17 13:42:29 发布

ZiminLi

最新推荐文章于 2024-09-17 13:42:29 发布

阅读量544

点赞数

分类专栏： demo 文章标签： javascript 前端

本文链接：https://blog.csdn.net/ziminli/article/details/128679970

版权

demo 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

该文章演示了一个使用HTML、CSS和JavaScript编写的自动轮播图示例。内容包括鼠标悬停停止轮播、显示控制器，鼠标移开后恢复自动轮播，以及通过点击小圆点和箭头切换图片的功能。同时还详细解释了实现这些功能的代码逻辑和交互原理。

摘要由CSDN通过智能技术生成

内容

1.鼠标不在图片上方时，进行自动轮播，并且左右箭头不会显示；当鼠标放在图片上方时，停止轮播，并且左右箭头会显示；
2.图片切换之后，图片中下方的小圆点会同时进行切换，并且点击相应的小圆点可以切换到相应的图片上；
3.点击左右箭头可以进行左右图片的切换；
4.图片上需有介绍的文字，会随图片切换一起进行切换。

实验原理

鼠标悬停时停止定时器，显示左右控制器
移出时再设置回去，左右控制器消失。
改变wrapper的left值实现滑动

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>demo4</title>
</head>
<link rel="stylesheet" href="./css/demo5.css">
<body>
    <div class="content">
        <ul class="wrapper">
            <li>111</li>
            <li>222</li>
            <li>333</li>
            <li>111</li>
        </ul>
        <ul class="radius">
        </ul>
        <div class="prev">
            <span>《</span>
        </div>
        <div class="next">
            <span>》</span>
        </div>
    </div>
</body>
<script src="./js/demo5.js"></script>
</html>

js

<script>
window.onload= function() {
    var content = document.getElementsByClassName('content')[0]
    var wrapper = document.getElementsByClassName('wrapper')[0]
    var radius = document.getElementsByClassName('radius')[0]
    var prev = document.getElementsByClassName('prev')[0]
    var next = document.getElementsByClassName('next')[0]
    var imgWidth = wrapper.children[0].offsetWidth
    var wrapIndex = 0
    //鼠标悬停时显示隐藏
    content.onmouseover = function() {
        clearInterval(timer)
        next.style.opacity = "0.6";
        prev.style.opacity = "0.6";
    }
    content.onmouseout = function() {
        timer = setInterval(function(){
            next.onclick()
        },3500)
        next.style.opacity = "0";
        prev.style.opacity = "0";
    }

    //动态创建圆点
    function createLi() {
        for(let i=0; i<wrapper.children.length-1; i++) {
            let li = document.createElement("li")
            radius.appendChild(li)
        }
        radius.children[0].className='radius-active'
    }
    createLi()

    //圆点响应
    function cirAction(wrapIndex) {
        for(let i=0; i<radius.children.length; i++) {
            radius.children[i].classList.remove("radius-active")
        }
        if(wrapIndex === wrapper.children.length-1) {
            radius.children[0].className='radius-active'
        }
        else {
            radius.children[wrapIndex].className='radius-active'
        }
    }

    //指示器控制
    function cirMouse() {
        for(let i=0; i<radius.children.length; i++) {
            radius.children[i].onmouseover = function() {
                clearInterval(timer);
                animate(wrapper, -i*imgWidth);
                wrapIndex = i;
                cirAction(wrapIndex)
            }
        }
    }
    cirMouse()

    //滑动动画
    function animate(el, target) {
        clearInterval(el.timer)
        el.timer = setInterval(function(){
            let move = 8;
            let present = wrapper.offsetLeft;
            move = present > target ? -move : move;
            present += move;
            if(Math.abs(present-target) > Math.abs(move)) {
                wrapper.style.left = present + 'px'
            }
            else {
                clearInterval(el.timer);
                wrapper.style.left = target + 'px'
            }
        },16)  
    }

    //next控制
    next.onclick = function() {
        if(wrapIndex === wrapper.children.length-1){
            wrapIndex = 0;
            wrapper.style.left = 0 + 'px';
        }
        wrapIndex++;
        animate(wrapper,-wrapIndex*imgWidth);
        cirAction(wrapIndex);
    }

    //prev控制
    prev.onclick = function() {
        if(wrapIndex === 0){
            wrapIndex = wrapper.children.length-1;
            wrapper.style.left = -wrapIndex*imgWidth + 'px';
        }
        wrapIndex--;
        animate(wrapper,-wrapIndex*imgWidth);
        cirAction(wrapIndex)
    }

    //自动滑动
    var timer = setInterval(function(){
        next.onclick()
    },3500)
}
</script>

css

<style>
*{
    margin: 0;
    padding: 0;
}
.content{
    width:600px;
    height: 300px;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}
.wrapper{
    width: 400%;
    height: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    transition: none;
}
.wrapper li{
    flex: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    line-height: 300px;
}
.wrapper li:nth-of-type(1){
    background-color: red;
}
.wrapper li:nth-of-type(2){
    background-color: blue;
}
.wrapper li:nth-of-type(3){
    background-color: yellow;
}
.wrapper li:nth-of-type(4){
    background-color: red;
}
.radius{
    height: 12px;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    align-items: center;
}
.radius li{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: white;
    opacity: 0.6;
    margin: 0 3px;
    padding: 0;
    list-style: none;
    cursor: pointer;
}
.radius-active{
    opacity: 1 !important;
    border: 2px solid rgb(255, 255, 255, 0.5);
    background-clip: padding-box;
}
.prev{
    position: absolute;
    left: 0;
    top: 50%;
}
.next{
    position: absolute;
    right: 0;
    top: 50%;
}
.next,.prev{
    width: 23px;
    line-height: 34px;
    text-align: center;
    margin-top: -17px;
    background-color: darkgray;
    opacity: 0;
    cursor: pointer;
}
.next:hover,.prev:hover{
    background-color: rgb(200,200,200);
}
.prev span, .next span{
    font-weight: bold;
    color: white;
    font-size: 18px;
}
</style>