js--轮播图

已于 2022-08-19 20:08:16 修改
阅读量82 收藏
点赞数
分类专栏： js 文章标签： javascript css 前端
于 2022-08-03 17:37:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59642141/article/details/126145526
版权 
<style>
        .box {
            width: 650px;
            height: 400px;
            margin: 0 auto;
            position: relative;
            background-color: aqua;
        }

        #btn {
            position: absolute;
            left: 0;
            top: 200px;
        }

        #btn2 {
            position: absolute;
            right: 0;
            top: 200px
        }

        img {
            transform: .5s;
            width: 650px;
            height: 400px;
        }

        .box .dots {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
        }

        .box .dots span {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin-right: 5px;
            cursor: pointer;
            background-color: aliceblue;
        }

        .box .dots span .on {
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="../img/pic1.webp" alt="" id="pic">
        <button id="btn">＜</button>
        <button id="btn2">＞</button>
        <div class="dots" id="dots">
            <span class="on"></span>
            <span></span>
            <span></span>
        </div>
    </div>

</body>
<script>
    var oDivs = document.getElementsByClassName("box")
    var oImg = document.getElementById("pic");
    var lefts = document.getElementById("btn");
    var rights = document.getElementById("btn2");
    var picArr = ["../img/pic1.webp", "../img/pic2.webp", "../img/pic3.webp"];
    var oSpans = document.getElementById("dots").getElementsByTagName("span");
    var i = 0; timer = null;
    //自动播放
    function autoPlay() {
        timer = setInterval("lefts.onclick()", 2000)
    }
    autoPlay();
    //左侧按钮
    lefts.onclick = function () {
        i--;
        if (i === -1) {
            i = picArr.length - 1;
        }
        oImg.src = picArr[i];
        for (var j = 0; j < spanArr.length; j++) {
            spanArr[j].className = "";//把所有的span上的类清空
        }
        spanArr[i].className = "on";
    }
    // 右侧按钮
    rights.onclick = function () {
        i++;
        if (i === picArr.length) {
            i = 0;
        }
        oImg.src = picArr[i];
        for (var j = 0; j < spanArr.length; j++) {
            spanArr[j].className = "";//把所有的span上的类清空
        }
        spanArr[i].className = "on";
    }
    //光标移入box时自动停止，改手动
    oDivs[0].onmouseover = function () {
        clearInterval(timer);
        lefts.style.display = "block";
        rights.style.display = "block";
    }
    //光标移出box时自动停止，改自动动
    oDivs[0].onmouseout = function () {
        autoPlay();
        lefts.style.display = "none";
        rights.style.display = "none";
    }
    //span的单击事件
    var spanArr = Array.from(oSpans);
    spanArr.forEach((item, idx) => {
        item.onclick = function () {
            for (var j = 0; j < spanArr.length; j++) {
                spanArr[j].className = ""; //把所有span上的类清空
            }
            item.className = "on"  //点击哪个span，哪个span有on类
            i = idx;  //小圆点与图片的索引统一
            oImg.src = picArr[i];
        }
    });
</script>

 <style>
        .banner {
            position: relative;
            width: 590px;
            height: 470px;
            margin: 0 auto;
        }

        .banner a {
            display: none;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 36px;
            height: 36px;
            font-size: 36px;
            color: #fff;
            text-align: center;
            line-height: 34px;
            text-decoration: none;
            background-color: rgba(0, 0, 0, .4);
        }

        .banner .prev {
            left: 0;
        }

        .banner .next {
            right: 0;
        }

        .banner .dots {
            position: absolute;
            left: 50%;
            bottom: 12px;
            transform: translateX(-50%);
            display: flex;
        }

        .banner .dots span {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin: 0 5px;
            box-shadow: 0 0 0 2px #fff;
            background-color: rgb(132, 19, 19);
            cursor: pointer;
        }

        .banner .dots span.on {
            background-color: #f00;
        }
    </style>
</head>

<body>
    <div class="banner">
        <img src="img/pic1.webp" alt="" id="pic">
        <a href="javascript:;" class="prev">&lt;</a>
        <a href="javascript:;" class="next">&gt;</a>
        <div class="dots" id="dots">
            <span class="on"></span>
            <span></span>
            <span></span>
        </div>
    </div>

</body>
<script>
    var oImg = document.getElementById("pic");
    var oAs = document.getElementsByTagName("a");
    var oDivs = document.getElementsByClassName("banner");
    var oSpans = document.getElementById("dots").getElementsByTagName("span");
    var spanArr = Array.from(oSpans);
    var picArr = ["img/pic1.webp", "img/pic2.jpg", "img/pic3.jpg"];
    var i = 0, timer = null;

    //右侧按钮 
    oAs[1].onclick = function () {
        i++;
        if (i === picArr.length) {
            i = 0;
        }
        oImg.src = picArr[i];

        for (var j = 0; j < spanArr.length; j++) {
            spanArr[j].className = "";//把所有的span上的类清空
        }
        spanArr[i].className = "on";

        // console.log("i", i);
    }

    // 左侧按钮
    oAs[0].onclick = function () {
        i--;
        if (i === -1) {
            i = picArr.length - 1;
        }
        oImg.src = picArr[i];
        for (var j = 0; j < spanArr.length; j++) {
            spanArr[j].className = "";//把所有的span上的类清空
        }
        spanArr[i].className = "on";

        // console.log(i);
    }

    //自动播放
    function autoPlay() {
        timer = setInterval("oAs[1].onclick()", 2000)
    }
    autoPlay();


    //光标移入 banner  自动停止 改手动
    oDivs[0].onmouseover = function () {
        clearInterval(timer);
        oAs[0].style.display = "block";
        oAs[1].style.display = "block";
    }

    //光标移出 banner  自动 
    oDivs[0].onmouseout = function () {
        autoPlay();
        oAs[0].style.display = "none";
        oAs[1].style.display = "none";
    }


    //span的单击事件

    spanArr.forEach((item, idx) => {
        item.onclick = function () {
            for (var j = 0; j < spanArr.length; j++) {
                spanArr[j].className = "";//把所有的span上的类清空
            }
            item.className = "on";//点击哪个span  哪个span有 on 类
            i = idx;//小圆点与图片索引统一
            // console.log("idx", i);
            oImg.src = picArr[i];
        }
    });

    // spanArr[0].onclick = function () { }
    // spanArr[1].onclick = function () { }
    // spanArr[2].onclick = function () { }
</script>

 

 优化

<body>
    <div class="banner">
        <img src="img/pic1.webp" alt="" id="pic">
        <a href="javascript:;" class="prev">&lt;</a>
        <a href="javascript:;" class="next">&gt;</a>
        <div class="dots" id="dots">
            <span class="on"></span>
            <span></span>
            <span></span>
        </div>
    </div>

</body>
<script>
    var oImg = document.getElementById("pic");
    var oAs = document.getElementsByTagName("a");
    var oDivs = document.getElementsByClassName("banner");
    var oSpans = document.getElementById("dots").getElementsByTagName("span");
    var spanArr = Array.from(oSpans);
    var picArr = ["img/pic1.webp", "img/pic2.jpg", "img/pic3.jpg"];
    var i = 0, timer = null;

    //右侧按钮 
    oAs[1].onclick = function () {
        i++;
        if (i === picArr.length) {
            i = 0;
        }

        // oImg.src = picArr[i];

        // for (var j = 0; j < spanArr.length; j++) {
        //     spanArr[j].className = "";//把所有的span上的类清空
        // }
        // spanArr[i].className = "on";

        change(i);

        // console.log("i", i);
    }

    // 左侧按钮
    oAs[0].onclick = function () {
        i--;
        if (i === -1) {
            i = picArr.length - 1;
        }

        // oImg.src = picArr[i];
        // for (var j = 0; j < spanArr.length; j++) {
        //     spanArr[j].className = "";//把所有的span上的类清空
        // }
        // spanArr[i].className = "on";

        change(i);

        // console.log(i);
    }

    //自动播放
    function autoPlay() {
        timer = setInterval("oAs[1].onclick()", 2000)
    }
    autoPlay();


    //光标移入 banner  自动停止 改手动
    oDivs[0].onmouseover = function () {
        clearInterval(timer);
        oAs[0].style.display = "block";
        oAs[1].style.display = "block";
    }

    //光标移出 banner  自动 
    oDivs[0].onmouseout = function () {
        autoPlay();
        oAs[0].style.display = "none";
        oAs[1].style.display = "none";
    }


    //span的单击事件

    spanArr.forEach((item, idx) => {
        item.onclick = function () {
            // for (var j = 0; j < spanArr.length; j++) {
            //     spanArr[j].className = "";//把所有的span上的类清空
            // }
            // item.className = "on";//点击哪个span  哪个span有 on 类

            i = idx;//小圆点与图片索引统一

            change(i);
            // console.log("idx", i);
            // oImg.src = picArr[i];
        }
    });

    function change(n) {
        for (var j = 0; j < spanArr.length; j++) {
            spanArr[j].className = "";//把所有的span上的类清空
        }
        spanArr[n].className = "on";//给当前的span添加类
        oImg.src = picArr[n];//修改索引对应的图片路径
    }



</script>

利用偏移量实现左右点击轮播图

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .banner {
            position: relative;
            overflow: hidden;
            width: 590px;
            height: 470px;
            box-shadow: 0 0 0 2px #f00;
            margin: 0 auto;
        }

        .banner .pic {
            display: flex;
        }

        .banner .pic li {
            flex-shrink: 0;
            width: 590px;
            height: 470px;
        }

        .banner>a {
            position: absolute;
            top: 50%;
            color: #444;
            font-size: 30px;
            transform: translateY(-50%);
        }

        .banner .prev {
            left: 0;
        }

        .banner .next {
            right: 0;
        }

        .banner .dots {
            display: flex;
            position: absolute;
            left: 50%;
            bottom: 6px;
            transform: translateX(-50%);
        }

        .banner .dots span {
            width: 10px;
            height: 10px;
            background-color: #fff;
            border-radius: 50%;
            margin: 0 3px;
            cursor: pointer;
        }

        .banner .dots span.on {
            background-color: #f00;
        }
    </style>
</head>

<body>
    <div class="banner">
        <ul class="pic">
            <li><a href="#"><img src="img/pic1.webp" alt=""></a></li>
            <li><a href="#"><img src="img/pic2.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/pic3.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/pic1.webp" alt=""></a></li>
        </ul>
        <a href="javascript:;" class="prev">&lt;</a>
        <a href="javascript:;" class="next">&gt;</a>
        <div class="dots">
            <span class="on"></span>
            <span></span>
            <span></span>
        </div>
    </div>
</body>
<script>

    var prev = document.querySelector(".prev");
    var next = document.querySelector(".next");
    var ul = document.querySelector(".banner ul");
    var lis = document.querySelectorAll(".banner li");
    var spans = document.querySelectorAll(".dots span");
    // var liWidth = lis[0].offsetWidth;//获取一个li的宽度
    var index = 0;
    next.addEventListener("click", function () {
        if (index >= lis.length - 1) {
            index = 0;
            ul.style.transition = "none";
            ul.style.marginLeft = -index * lis[0].offsetWidth + 'px';
        }
        index++;
        // console.log(index);
        ul.style.marginLeft = -index * lis[0].offsetWidth + 'px';
        ul.style.transition = "0.4s";

        var a = index;//li的索引赋值给变量a
        if (a === lis.length - 1) { //判断变量a  如果a的是最后一个图的索引时，把a修改为0
            a = 0;
        }
        for (var j = 0; j < spans.length; j++) {
            spans[j].classList.remove("on");
        }
        spans[a].classList.add("on");

    });


    prev.addEventListener("click", function () {
        if (index <= 0) {
            index = lis.length - 1;
            ul.style.transition = "none";
            ul.style.marginLeft = -index * lis[0].offsetWidth + 'px';
        }
        index--;
        console.log(index);
        ul.style.marginLeft = -index * lis[0].offsetWidth + 'px';
        ul.style.transition = "0.4s";

        for (var j = 0; j < spans.length; j++) {
            spans[j].classList.remove("on");
        }
        spans[index].classList.add("on");
    });

    //下方小圆点的单击行为
    spans.forEach((item, i) => {
        item.onclick = function () {
            for (var j = 0; j < spans.length; j++) {
                spans[j].classList.remove("on");
            }
            item.classList.add("on");
            index = i;//修改图片索引 使小圆点与图片索引统一
            ul.style.marginLeft = -index * lis[0].offsetWidth + 'px';
            ul.style.transition = "0.4s";
        }
    });

</script>

和蔼的阿木木o
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript---轮播图片完整代码
最爱松露巧克力
01-25 1万+
JS代码注释清晰明了，一看就懂！ &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;最简单的轮播效果&lt;/title&gt; &lt;style&gt; * { margin:
JS案例----轮播图
weixin_53163211的博客
09-28 1876
var s = -1 * targetIndex * myWidth - dSwiper.offsetLeft //路程。var t = 20 //swiperTimer执行20次完成图片切换。var shouwIndex = 1 //当前显示图片的下标。var swiperTimer = null //切换。var autoCount = 0 //自动轮播计数。//需要跳转到第二张。var count = 0 //计数。var timer = null //每五秒。-- 显示点 -->
前端开发快速入门（四）进阶实战篇
zhangxy7894的博客
06-07 231
本篇主要通过生鲜网站的页面布局、学会简单的页面交互与绘制美观整洁的电商网站！
微信小程序前端动态获取最新的轮播图优化
qq_61033782的博客
08-01 547
微信小程序前端动态获取最新的轮播图优化; 两个数组进行对比判断值是否一致以及位置的改变
uni-app uview 轮播图
weixin_71344385的博客
06-25 525
【代码】uni-app uview 轮播图。
JavaScript-动画-轮播图
song17631538490的博客
12-02 500
前言：使用原生JS 编写一个简单 的自轮播图 思路：主要使用clientWidth、scrollLeft 获取相关元素 通过改变scrollLeft（获得的是内容卷曲出去的宽度，滚动条向右拉跑出盒子范围的那部分高度） 的值实现轮播的效果 其中还用到了定时器。
js-图片的轮播+自动轮播
weixin_47295886的博客
10-27 262
/通过css 将最后一张图片立马切换成第一张，多设置一张和第一张相同的图片。
JS----轮播图案例
bjsyc123456的博客
11-15 833
轮播图案例 分析： 点击左右箭头 滑动轮播图 鼠标不在轮播图内时 每隔2秒自动滑动轮播图 鼠标移入时 停止自动滑动轮播图 点击小圆圈 显示对应的轮播图 鼠标移入、移出显示或隐藏左右箭头 // 获取左右箭头的元素 let arrow_l = this.document.querySelector('.arrow-l'); let arrow_r = this.document.querySelector('.arrow-r'); // 获取到轮播图盒子元素
JavaScript案例-js轮播图
02-16
JavaScript案例-js轮播图
js实现轮播图效果 z-index实现轮播图
10-15
主要为大家详细介绍了js实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
前端-JavaScript-PC端轮播图
09-26
js实现pc端轮播图
美观实用-带按钮轮播图
06-20
一个简易而又十分美观的带按钮轮播图，鼠标悬停会显示按钮，暂停轮播。鼠标离开则按钮消失，轮播图继续滚动。非常好看哟。
多种轮播图效果-合集-可拖拽轮播图模板-HTML源码
09-24
轮播图是网页设计中常用的元素，用于展示多个... 该源码文件使用HTML、CSS和JavaScript设计多套精美的轮播图效果，例如全屏滚动轮播图、前后可拖拽轮播图、立体轮播图等等，帮助开法人员快速上手创建精美的轮播图效果。
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 364
在vue.config.js中配置关闭Uncaught runtime errors显示。
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 522
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
基于JavaScript 如何实现爬山算法以及优化方案
最新发布
乐闻世界
06-10 1333
爬山算法（Hill Climbing Algorithm）是一种常见的启发式搜索算法，常用于解决优化问题。其核心思想是从一个初始状态出发，通过逐步选择使目标函数值增大的邻近状态来寻找最优解。接下来，我们将通过 JavaScript 实现一个简单的爬山算法，帮助大家理解其原理和应用。从一个初始状态开始。评估当前状态的目标函数值。在当前状态的邻居中选择一个目标函数值更大的状态。如果找到了更优的邻居，则移动到该邻居并重复步骤2和步骤3。如果没有更优的邻居，则算法结束，当前状态即为局部最优解。
vue3如何定义一个组件
Java程序员专栏
06-09 552
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值