js实现图片轮播

最新推荐文章于 2024-04-15 03:02:33 发布

zzzzzzrrryyy

最新推荐文章于 2024-04-15 03:02:33 发布

阅读量203

点赞数 1

分类专栏： js相关

本文链接：https://blog.csdn.net/qq_43194919/article/details/105868775

版权

js相关专栏收录该内容

10 篇文章 0 订阅

订阅专栏

方法一：

主要思路：用li存储图片并用绝对定位将图片重叠在一起，要将哪张图片显示在最上面就用js方法对其添加一个类，设置z-index属性；最关键的是图片的index，图片的轮播，右下角图标的改变和点击图标跳转到相应图片也是通过改变index来实现的。
主要框架：

<body>
    <div class="wrap">
        <ul class="list">
            <li class="item active"><img src="image/1.jpg" alt=""></li>
            <li class="item"><img src="image/2.jpg" alt=""></li>
            <li class="item"><img src="image/3.jpg" alt=""></li>
            <li class="item"><img src="image/4.jpg" alt=""></li>
            <li class="item"><img src="image/5.jpg" alt=""></li>
        </ul>
        <ul class="pointlist">
            <li class="point active" data-index='0'></li>
            <li class="point" data-index='1'></li>
            <li class="point" data-index='2'></li>
            <li class="point" data-index='3'></li>
            <li class="point" data-index='4'></li>
        </ul>
        <button type="button" class="btn" id="goPre"><</button>
        <button type="button" class="btn" id="goNext">></button>
    </div>
</body>

css样式：

<style>
    * {
        margin: 0px;
        padding: 0px;
    }
    
    .wrap {
        position: relative;
        width: 800px;
        height: 400px;
        margin: 0 auto;
    }
    
    .list {
        position: relative;
        width: 800px;
        height: 400px;
    }
    
    .item {
        /* 绝对定位 让所有图片都重叠在一起*/
        position: absolute;
        width: 100%;
        height: 100%;
        list-style: none;
        /* 设置透明度 */
        opacity: 0;
        /* 实现淡入淡出的效果 */
        transition: all .4s;
    }
    
    .item img {
        width: 800px;
        height: 400px;
    }
    /* 调整按钮的位置 */
    
    .btn {
        position: absolute;
        width: 50px;
        height: 100px;
        top: 200px;
        transform: translateY(-50%);
        /* 防止图片覆盖住按钮 */
        z-index: 100;
    }
    
    #goPre {
        left: 0px;
    }
    
    #goNext {
        right: 0px;
    }
    /* 使得相应图片显示在最上层 */
    
    .item.active {
        /* 设置透明度 */
        opacity: 1;
        z-index: 10;
    }
    
    .pointlist {
        position: absolute;
        right: 20px;
        bottom: 20px;
        z-index: 20;
    }
    
    .point {
        width: 10px;
        height: 10px;
        list-style: none;
        background-color: rgba(0, 0, 0, 0.4);
        border-radius: 50%;
        float: left;
        margin-left: 13px;
        cursor: pointer;
    }
    /* 使得相应小圆点变色 */
    .point.active {
        background-color: rgba(255, 255, 255, 0.4);
    }
</style>

js方法：

<script>
    var items = document.getElementsByClassName('item');
    var goPreBtn = document.getElementById('goPre');
    var goNextBtn = document.getElementById('goNext');
    var points = document.getElementsByClassName('point');

    // 表示第几张图片 第几个点在展示
    // 即第几张图片有active
    var index = 0;
    // 实现图片在最上层显示
    var goindex = function() {
        for (var i = 0; i < items.length; i++) {
            items[i].className = 'item';
            points[i].className = 'point';
        }
        // 修改类名
        items[index].className = 'item active';
        points[index].className = 'point active';
    }

    // 点击右箭头index++
    function goNext() {
        if (index < 4) {
            index++;
            goindex();
            console.log(index);
        } else {
            index = 0;
            goindex();
        }
    }
    // 点击左箭头index--
    function goPre() {
        if (index > 0) {
            index--;
            goindex();
            console.log(index);
        } else {
            index = 4;
            goindex();
        }
    }
    // 右箭头的点击方法
    goNextBtn.addEventListener('click', function() {
        goNext();
    })

    // 左箭头的点击方法
    goPreBtn.addEventListener('click', function() {
        goPre();
    })

    // 点击相应圆点显示相应图片
    for (var i = 0; i < points.length; i++) {
        points[i].addEventListener('click', function() {
            var pointindex = this.getAttribute('data-index');
            console.log(pointindex);
            index = pointindex;
            goindex();
        })
    }
</script>

（上述代码运行有问题，但思路是对的）
另，与该方法思路一样，代码更简洁，能成功运行：

//轮播
let imgList = document.getElementsByClassName('imgList');
let bankItems = imgList[0].getElementsByTagName('li');
let pointList = document.getElementsByClassName('pointList');
let points = pointList[0].getElementsByTagName('li');
console.log(bankItems);
console.log(points);
let bankItemsIndex = 0;

// 点击相应圆点显示相应图片
for (let i = 0; i < points.length; i++) {
    points[i].onclick = function() {
        let pointindex = this.getAttribute('data-index');
        for (let j = 0; j < bankItems.length; j++) {
            bankItems[j].className = '';
            points[j].className = '';
        }
        this.className = "active";
        bankItems[pointindex].className = 'active';
    }
}

方法二

首先固定一个显示图片的区域（gundongquyu），设置相对定位，然后再该区域内包一个ul，设置绝对定位，top：0；left：0；ul要给定宽度，要正好放得下轮播的图片

<div class="solution_container2">
    <div class="gundongquyu">
        <div class="img_wrap">
            <div class="scroll_content">
                <img class="img-top" src="../static//img/HomeSecuritiesSolutions.png" draggable="false">
                <p id="scroll_p1">1券商资金业务解决方案</p>
                <p id="scroll_p2">针对券商的FICC业务，提供报价、交易、风险管理、账务处理全流程软件产品，帮助券商客户建立外汇核心账户系统，解决与监管机构的数据报送问题。</p>
                <p><a href="#">查看详情<span class="iconfont iconanniuxiaojiantou"></span></a></p>
            </div>
            <div class="scroll_content">
                <img class="img-top" src="../static//img/HomeSecuritiesSolutions.png" draggable="false">
                <p id="scroll_p1">2券商资金业务解决方案</p>
                <p id="scroll_p2">针对券商的FICC业务，提供报价、交易、风险管理、账务处理全流程软件产品，帮助券商客户建立外汇核心账户系统，解决与监管机构的数据报送问题。</p>
                <p><a href="#">查看详情<span class="iconfont iconanniuxiaojiantou"></span></a></p>
            </div>
            <div class="scroll_content">
                <img class="img-top" src="../static//img/HomeSecuritiesSolutions.png" draggable="false">
                <p id="scroll_p1">3券商资金业务解决方案</p>
                <p id="scroll_p2">针对券商的FICC业务，提供报价、交易、风险管理、账务处理全流程软件产品，帮助券商客户建立外汇核心账户系统，解决与监管机构的数据报送问题。</p>
                <p><a href="#">查看详情<span class="iconfont iconanniuxiaojiantou"></span></a></p>
            </div>
            <div class="scroll_content">
                <img class="img-top" src="../static//img/HomeSecuritiesSolutions.png" draggable="false">
                <p id="scroll_p1">4券商资金业务解决方案</p>
                <p id="scroll_p2">针对券商的FICC业务，提供报价、交易、风险管理、账务处理全流程软件产品，帮助券商客户建立外汇核心账户系统，解决与监管机构的数据报送问题。</p>
                <p><a href="#">查看详情<span class="iconfont iconanniuxiaojiantou"></span></a></p>
            </div>
        </div>
    </div>
</div>

.solution_container2 {
    /* position: relative; */
    max-width: 55rem;
    min-width: 35rem;
    margin: 0 auto;
}

.gundongquyu {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 23.5rem;
    background-color: transparent;
    /* border: rgb(0, 0, 0) 2px solid; */
    overflow: hidden;
    
}


/* .img_scroll .img_wrap {
    background-color: rgb(206, 103, 103);
} */

.img_wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 83rem;
    transition: all .5s;
    -moz-transition: all .5s; /* Firefox 4 */
    -webkit-transition: all .5s; /* Safari 和 Chrome */
    -o-transition: all .5s; /* Opera */
    
}
.scroll_content:nth-of-type(1){
    margin-left: 1rem;
}
.scroll_content {
    position: relative;
    display: inline-block;
    width: 16rem;
    margin-right: 2rem;
    margin-bottom: 2rem;
    height: 100%;
    /* pointer-events:none;
    -webkit-user-select: none;
    cursor: default;
    pointer-events: none; */
}

.pointList2 {
    float: left;
    width: 100%;
    text-align: center;
    margin-top: 4rem;
    margin-bottom: 100px;
}

.pointList2 li {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0.2rem;
    cursor: pointer;
    background: #d7d7d7
}

.pointList2 .active2 {
    background: #207CC0
}

.scroll_content p a {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 1.5rem;
    display: inline-block;
    line-height: 1.40rem;
    background: #00A4FF;
    font-size: 0.16rem;
    color: #ffffff;
    text-align: center;
    width: 4.80rem;
    height: 1.40rem;
    border-radius: 21px;
}

#scroll_p1 {
    width: 100%;
    text-align: center;
    font-size: 1rem;
    color: #4C5E79;
    line-height: 2.36rem;
    margin: 12.24rem 0 0.12rem 0;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 500;
    pointer-events:none;
    -webkit-user-select: none;
    cursor: default;
    pointer-events: none;
}

#scroll_p2 {
    font-weight: 400;
    color: #677785;
    font-size: 0.16rem;
    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
    line-height: 1.2rem;
    text-align: left;
    pointer-events:none;
    -webkit-user-select: none;
    cursor: default;
    pointer-events: none;
}

.img_scroll .scroll_content .img-top {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 12.4rem;
    /* margin: 0 2rem; */
}

//解决方案轮播
let imgWraps = document.getElementsByClassName('img_wrap');
let imgWrap = imgWraps[0];//装图片的盒子
let imgWrapLeft = getOffsetLeft(imgWrap);//装图片的盒子据左边的距离
let left=0;
console.log("left:  "+left);
function move() {
    
    let pointLists2 = document.getElementsByClassName('pointList2')
    let points2 = pointLists2[0].getElementsByTagName('li');//小圆点
    
    let scrollContents = document.getElementsByClassName('scroll_content');//获取每一个滚动内容
    let gundong = document.getElementsByClassName('gundongquyu')[0];//滚动区域
        
    let contentWidth = scrollContents[0].offsetWidth+scrollContents[0].style.marginRight;//第一个滚动内容的宽度
    let stopLeft = left - contentWidth;
    let stopLeft2 = left + contentWidth;
    
    console.log(imgWrapLeft);
    console.log(scrollContents[0].offsetWidth);

    // 点击相应圆点
    for(let i=0;i<points2.length;i++){
        console.log('进入了循环');
        points2[i].onclick = function() {
            points2[i].isclicked = true;
            let pointindex = this.getAttribute('data-index2');
            for (let j = 0; j < points2.length; j++) {
                points2[j].className = '';
            }
            this.className = "active2";
            if(pointindex==0){
                imgWrap.style.left=0+'px';
                left=0;
            }else{
                left=left-30-contentWidth;
                imgWrap.style.left=left+'px';
                left=0;
            }
        }
    }
}
move();

//轮播的鼠标事件
imgWrap.onmousedown = function (e) {
    var x = e.clientX - imgWrapLeft;
    console.log(x);
    document.onmousemove = function(e)
    {
        let movex=e.clientX - imgWrapLeft - x;
        console.log(left);
        //确保盒子左，上不会被拖出屏幕，右，下不会出现滚动条
        if(left<0&&left>-contentWidth){
            left=-movex;
        }else if(left > imgWrap.clientWidth){
            left = imgWrap.clientWidth;
        }
        //更改css样式
        imgWrap.style.left=movex+'px';
    };
    document.onmouseup = function (e) {
        this.onmousemove = null;
        left=0;
        imgWrap.style.left=left+'px';
    };
};

zzzzzzrrryyy

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js实现图片轮播

主要思路：用li存储图片并用绝对定位将图片重叠在一起，要将哪张图片显示在最上面就用js方法对其添加一个类，设置z-index属性；最关键的是图片的index，图片的轮播，右下角图标的改变和点击图标跳转到相应图片也是通过改变index来实现的。主要框架：<body> <div class="wrap"> <ul class="list"&gt...
复制链接

扫一扫