js 轮播图

秒速五厘米 2022-09-08 13:53 189阅读 0赞

### 文章目录 ###

*  html
 *  css
 *  js
 *  参考博客

# html #

<div class="container">
                <div class="wrap" style="left:-600px;">
                    <img src="./img/4.png" alt="" class="img">
                    <img src="./img/1.png" alt="" class="img">
                    <img src="./img/2.png" alt="" class="img">
                    <img src="./img/3.png" alt="" class="img">
                    <img src="./img/4.png" alt="" class="img">
                    <img src="./img/1.png" alt="" class="img">
                </div>
                <div class="buttons">
                    <span class="btnIndex">1</span>
                    <span class="btnIndex">2</span>
                    <span class="btnIndex">3</span>
                    <span class="btnIndex">4</span>
                </div>
                <a href="javascript:;" class="arrow arrow_left"><</a>
                <a href="javascript:;" class="arrow arrow_right">></a>
            </div>

# css #

* {
        
        margin:0;
        padding:0;
    }
    a{
        
        text-decoration: none;
    }
    .container {
        
        position: relative;
        width: 100vw;
        height: calc(100vh - 56px);
    
        box-shadow: 0 0 5px green;
        overflow: hidden;
    }            
    
    .wrap {
        
        position: absolute;
        width: 700vw;
        height: calc(100vh - 56px);
        z-index: 1;
    }
    img{
        
        background-color: coral;
    }
    .container .wrap img {
        
        float: left;
        width: 100vw;
        height: calc(100vh - 56px);
    }
    .container .buttons {
        
        position: absolute;
        right: 150px;
        bottom:20px;
        width: 200px;
        height: 10px;
        z-index: 2;
    }
    .container .buttons span {
        
        margin-left: 5px;
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: green;
        text-align: center;
        color:white;
        cursor: pointer;
    }
    .container .buttons span.on{
        
        background-color: red;
    }
    .container .arrow {
        
        position: absolute;
        top: 35%;
        color: green;
        padding:0px 14px;
        border-radius: 50%;
        font-size: 50px;
        z-index: 2;
        display: none;
    }
    .container .arrow_left {
        
        left: 10px;
    }
    .container .arrow_right {
        
        right: 10px;
    }
    .container:hover .arrow {
        
        display: block;
    }
    .container .arrow:hover {
        
        background-color: rgba(0,0,0,0.2);
    }

# js #

var wrap = document.querySelector(".wrap");
    var next = document.querySelector(".arrow_right");
    var prev = document.querySelector(".arrow_left");
    next.onclick = function () {
        
        next_pic();
    }
    
    var index = 0;
    // var dots = document.getElementsByTagName("span");
    var dots = document.getElementsByClassName("btnIndex")
    dots[index].className = "on btnIndex";
    function showCurrentDot() {
        
        for (var i = 0, len = dots.length; i < len; i++) {
        
            dots[i].className = "btnIndex";
        }
    
        dots[index].className = "on btnIndex";
    }
    
    prev.onclick = function () {
        
        prev_pic();
    }
    
    var prev_vw;
    var prev_index;
    
    let vw = document.body.clientWidth
    // console.log(vw)
    wrap.style.left = -vw + "px";
    // console.log(wrap.style.left )
    prev_index = parseInt(wrap.style.left)/vw
    // console.log(prev_index)
    
    window.onresize = function(){
        
        let vw = document.body.clientWidth
        // console.log(vw)
        // console.log(wrap.style.left)
        wrap.style.left = prev_index*vw + "px";
    }
    
    function next_pic() {
        
        let vw = document.body.clientWidth
        wrap.style.left = prev_index*vw + "px";
        var newLeft;
       //Math.abs(parseInt(wrap.style.left)-4*vw) < 20
        //parseInt(wrap.style.left) == -4*vw
        // console.log(vw)
        // console.log(wrap.style.left)
        if ( parseInt(wrap.style.left) == -4*vw) {
        
            console.log("进来")
            newLeft = -1*vw;
        } else {
        
            newLeft = parseInt(wrap.style.left) - vw;
        }
        prev_index = newLeft/vw
       
        wrap.style.left = newLeft + "px";
        // console.log(vw)
        console.log(wrap.style.left)
        index++;
        if (index > 3) {
        
            index = 0;
        }
        console.log(index)
        showCurrentDot();
    }
    function prev_pic() {
        
        let vw = document.body.clientWidth
        // console.log(vw)
        wrap.style.left = prev_index*vw + "px";
        var newLeft;
        if (parseInt(wrap.style.left) == -1*vw) {
        
            newLeft = -4*vw;
        } else {
        
            newLeft = parseInt(wrap.style.left) + vw;
        }
        prev_index = newLeft/vw
        wrap.style.left = newLeft + "px";
        index--;
        if (index < 0) {
        
            index = 3;
        }
        showCurrentDot();
    }
    
    var timer = null;
    function autoPlay() {
        
        timer = setInterval(function () {
        
            next_pic();
        }, 3000);
    }
    autoPlay();
    
    
    var container = document.querySelector(".container");
    container.onmouseenter = function () {
        
        clearInterval(timer);
    }
    container.onmouseleave = function () {
        
        autoPlay();
    }
    
    for (var i = 0, len = dots.length; i < len; i++) {
        
        (function (i) {
        
            dots[i].onclick = function () {
        
                let vw = document.body.clientWidth
                wrap.style.left = prev_index*vw + "px";
                var dis = index - i;
                if (index == 4 && parseInt(wrap.style.left) !== -5*vw) {
        
                    dis = dis - 5;
                }
                //和使用prev和next相同，在最开始的照片5和最终的照片1在使用时会出现问题，导致符号和位数的出错，做相应地处理即可
                if (index == 0 && parseInt(wrap.style.left) !== -vw) {
        
                    dis = 5 + dis;
                }
                // console.log(dis)
                prev_index = (parseInt(wrap.style.left) + dis * vw)/vw
                wrap.style.left = (parseInt(wrap.style.left) + dis * vw) + "px";
                index = i;
                showCurrentDot();
            }
        })(i);
    }
    
    $(".img").on("click",function(){
        
        console.log("img")
        console.log($(this).index())
    })

# 参考博客 #

[原生js实现轮播图][js]

[js]: https://www.cnblogs.com/zhuzhenwei918/p/6416880.html

发表评论取消回复

表情：

评论列表（有 0 条评论，189人围观）

还没有评论，来说两句吧...

相关阅读

相关 js原生轮播图

1.先画轮播图片样式 2.再画轮播按钮 3.样式完成，写js代码 4.获取所有节点 <!DOCTYPE html> <html> <head> <t

灰太狼/ 2023年08月17日 15:59/ 0 赞/ 151 阅读

相关 js原生轮播图

window.addEventListener('load', function() { // 1. 获取元素

不念不忘少年蓝@/ 2023年07月07日 08:22/ 0 赞/ 7 阅读

相关 js无缝轮播图(手动轮播+自动轮播+定时器+过渡动画)

为了方便大家使用，我把Html，CSS，以及js 和用到图片都放在下面了。\\ > 特此说明：这个无缝轮播的代码是可以直接复制粘贴使用，嘻嘻！ 1.先新建一个文件，随意命名

喜欢ヅ旅行/ 2022年11月25日 10:20/ 0 赞/ 450 阅读

相关轮播图实现html,html、css、js实现轮播图

2017-03-13 今天把轮播图的知识1过了一下，写了一个比较简单的轮播图，给大家参考一下。查看具体的效果点击这个链接： http://gjhnstxu.me/%E8

落日映苍穹つ/ 2022年10月10日 09:46/ 0 赞/ 326 阅读

相关 js 轮播图

文章目录 html css js 参考博客 html <div class="container">

秒速五厘米/ 2022年09月08日 13:53/ 0 赞/ 190 阅读

相关自动轮播图html css js代码,js轮播(自动轮播图html代码)

就是给这几个图片弄一个定时器，把图片先定位到一个地方，给定时器一个时间，比如五秒，最初让除了第一个图片外的其他的都消失。前五秒显示的是第一张图片，五秒. 请直接复制我的以下代

比眉伴天荒/ 2022年09月02日 14:57/ 0 赞/ 336 阅读

相关原生JS实现轮播图

原生JS实现轮播图 js实现轮播图，我经历了一下几个步骤： 1. 把静态界面写出来 2. 添加切换上一张下一张的箭头(为了省事，直接用的`<`和`>`…) 3.

迈不过友情╰/ 2022年06月08日 23:06/ 0 赞/ 350 阅读

相关原生js轮播图

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

Bertha 。/ 2022年05月28日 12:21/ 0 赞/ 260 阅读

相关 js案例--轮播图

css.css {padding: 0px;margin: 0px;} ul,li{list-style: none;} .clear{clear:b

冷不防/ 2022年03月20日 11:38/ 0 赞/ 200 阅读

相关 js实现轮播图（简单滚动轮播)

原理：在页面上有一个可视区域（a），用来显示图片，还有一个放所有需要轮播的图片的区域(b) ，当执行操作时，b需要移动，移动一个a的宽度，使下一张图片显示，

冷不防/ 2021年11月10日 09:30/ 0 赞/ 687 阅读