手写原生js轮播图

最新推荐文章于 2024-10-31 22:54:55 发布

a-console.log

最新推荐文章于 2024-10-31 22:54:55 发布

阅读量105

点赞数

文章标签： javascript html css

本文链接：https://blog.csdn.net/m0_56758643/article/details/126491234

版权

这篇博客详细介绍了如何利用JavaScript实现一个物流图片轮播效果。通过设置定时器自动滚动，结合鼠标悬停显示左右箭头，点击箭头及导航点实现手动切换，为用户提供流畅的视觉体验。代码中涉及DOM操作、事件监听、样式变换等关键技术。

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

 <div id="content" class="content">
        <div id="container" style="left:0px;" class="">
            <img src="../img/logistics-1.jpg"><img src="../img/logistics-2.jpg"><img src="../img/logistics-3.png"><img src="../img/logistics-4.jpg"><img src="../img/logistics-5.jpg"><img src="../img/logistics-6.jpg"><img src="../img/logistics-7.jpg">
        </div>
        <span class="left" id="left">&lt;</span><span class="right" id="right">&gt;</span>
        <ul id="pointer">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

 span {
            border-radius: 0 25px 25px 0;
            line-height: 50px;
            text-align: center;
            background-color: rgba(123, 120, 120, 0.6);
            z-index: 4;
            position: absolute;
            top: 50%;
            margin-top: -25px;
            display: block;
            width: 35px;
            height: 50px;
        }
        
        .right {
            border-radius: 25px 0 0 25px;
            right: 0;
        }
        
        ul {
            list-style-type: none;
            display: flex;
            z-index: 10;
            position: absolute;
            bottom: 6px;
            left: 50%;
            margin-left: -152px;
        }
        
        ul li {
            margin-right: 15px;
            border-radius: 10px;
            background-color: rgba(143, 196, 45, 0.6);
            width: 20px;
            height: 20px;
        }
        
        img {
            width: 400px;
            height: 240px;
        }
        
        #content {
            position: relative;
            overflow: hidden;
            width: 400px;
            height: 240px;
        }
        
        #container {
            width: 2800px;
            height: 240px;
            position: relative;
        }
        
        .active {
            background: #f00;
        }

var content = document.getElementById('content');
var container = document.getElementById('container');
var left = document.getElementById('left');
var right = document.getElementById('right');
var pointers = document.getElementById('pointer').children;
//滚动
function scr() {
    if (parseInt(container.style.left) > -2400) {
        container.style.left = parseInt(container.style.left) - 400 + "px";
    } else {
        container.style.left = '0px';
    }
    scrPonit()
}
var j = setInterval(scr, 1000);

//箭头显示
content.onmouseover = function() {
    clearInterval(j)
    left.style.display = 'block';
    right.style.display = 'block';
}

//箭头隐藏
content.onmouseout = function() {
    j = setInterval(scr, 1000);
    left.style.display = 'none';
    right.style.display = 'none';
}

//右键点击
right.onclick = function() {
    scr()
}

//左键点击
left.onclick = function() {
    if (parseInt(container.style.left) < 0) {
        container.style.left = parseInt(container.style.left) + 400 + "px";
    } else {
        container.style.left = '-2400px';

    }
    scrPonit()
}

//点击导航点
for (var i = 0; i < pointers.length; i++) {
    pointers[i].index = i;
    // console.log(i);
    pointers[i].onclick = function() {
        for (var y = 0; y < pointers.length; y++) {
            pointers[y].removeAttribute('class');
        }
        this.className = 'active';
        container.style.left = this.index * (-400) + 'px';
    }
}
//导航点自动切换
function scrPonit() {
    var a = parseInt(container.style.left) / (-400);
    // console.log(a);
    for (var y = 0; y < pointers.length; y++) {
        pointers[y].removeAttribute('class');
    }
    pointers[a].className = 'active';
}

功能使用定位实现