纯js实现淘宝商城轮播图

你的名字 2021-12-24 17:02 300阅读 0赞

**需求：**  
**　　循环无缝自动轮播3张图片，点击左右箭头可以手动切换图片，鼠标点击轮播图下面的小圆点会跳转到对应的第几张图片。鼠标放到轮播图的图片上时不再自动轮播，鼠标移开之后又继续轮播。**  
**效果图：**

**![1693058-20190624212908283-1601715462.png][]**

下面是html代码：

<div id="box">
            <div id="imgbox">
                <div><img src="img/tu1.jpg" alt="" /></div>
                <div><img src="img/tu2.jpg" alt="" /></div>
                <div><img src="img/tu3.jpg" alt="" /></div>
            </div>
            <div class="yuandian">
                <a href="#" class="xiaoyuan"></a>
                <a href="#" class="xiaoyuan"></a>
                <a href="#" class="xiaoyuan"></a>
            </div>
            <div id="jiantou">
                <span id="jt_left" class="jiant"><</span>
                <span id="jt_right" class="jiant">></span>
            </div>
        </div>

css代码：

* {
        margin: 0;
        padding: 0;
    }
    #box {
        position: relative;
        width: 520px;
        height: 280px;
        /*background-color: pink;*/
        margin:100px auto;
        overflow: hidden;
    }
    #imgbox {
        position: absolute;
        top: 0;
        left: 0;
        width: 99999px;
        cursor: pointer;
        height: 100%;
    }
    #imgbox img {
        float: left;
    }
    .yuandian {
        position: absolute;
        left: 230px;
        bottom: 20px;
        width: 60px;
        height: 15px;
        border-radius: 20px;
        background: rgba(255,255,255,.6);
    }
    .yuandian a {
        float: left;
        width: 10px;
        height: 10px;
        border-radius: 10px;
        margin: 2px 0 0 7px;
        background-color: white;
    }
    
    #jt_left {
        left: 0;
        border-top-right-radius:2em;
        border-bottom-right-radius:2em;
    }
    #jt_left,
    #jt_right {
        position: absolute;
        top: 140px;
        width: 35px;
        height: 35px;
        line-height: 35px;
        cursor: pointer;
        font-size: 18px;
        text-align: center;
        background: rgba(255,255,255,.6);
    }
    #jt_right {
        right: 0;
        border-top-left-radius:2em;
        border-bottom-left-radius:2em;
    }

js代码：

<script type="text/javascript">
        //    获取小圆点
        var xiaoyuan = document.getElementsByClassName("xiaoyuan");
        //    获取装图片的盒子
        var imgbox = document.getElementById("imgbox");
        //     获取左右箭头
        var jiantou = document.getElementsByClassName("jiant");
        //小圆点控制图片
        xiaoyuan[0].onclick = function () {
            imgbox.style.left = 0;
        }
        xiaoyuan[1].onclick = function () {
            imgbox.style.left = "-520px";
        }
        xiaoyuan[2].onclick = function () {
            imgbox.style.left = "-1040px";
        }
        //左箭头控制图片
        jiantou[0].onclick = function () {
            if (imgbox.offsetLeft == 0) {
                imgbox.style.left = "-1040px";
                console.log(imgbox.offsetLeft);
            } else {
                imgbox.style.left = imgbox.offsetLeft + 520 + "px";
            }
        }
        //右箭头控制图片
        jiantou[1].onclick = function () {
            if (imgbox.offsetLeft <= -1040) {
                console.log(imgbox.offsetLeft);
                imgbox.style.left = 0;
            } else {
                imgbox.style.left = imgbox.offsetLeft - 520 + "px";
            }
        }
        //定时器控制图片轮播
        var fun1 = function () {
            if (imgbox.offsetLeft <= -1040) {
                imgbox.style.left = 0;
            } else {
                imgbox.style.left = imgbox.offsetLeft - 520 + "px";
            }
        }
        var t = setInterval(fun1, 2500);//fun1是你的函数
        // 鼠标经过停止轮播
        imgbox.onmouseover = function () {
            clearInterval(t) //关闭定时器
        }
        // 鼠标离开开启定时器 
        imgbox.onmouseout = function () {
            t=setInterval(fun1,2500)//重新开始定时器
        }
    </script>

转载于:https://www.cnblogs.com/xiaojuziya/p/11079724.html

[1693058-20190624212908283-1601715462.png]: /images/20211223/a24d62aa909c4e7494c88525df6caf8c.png

发表评论取消回复

表情：

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

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

相关阅读

相关 js轮播图,纯源码

最近也是在学js所以就做了个轮播图来玩玩 CSS------------------- { padding: 0; ma

分手后的思念是犯贱/ 2023年07月15日 13:19/ 0 赞/ 37 阅读

相关淘宝轮播图

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

我就是我/ 2023年07月03日 08:29/ 0 赞/ 6 阅读

相关纯CSS实现轮播图------Sestid

效果展示： ![在这里插入图片描述][20191103200824540.gif] 代码： <!DOCTYPE html> <html>

淩亂°似流年/ 2023年05月29日 05:01/ 0 赞/ 27 阅读

相关纯JS实现左右滑动轮播图

效果图（完整代码在最下面） ![美末2属实⑧行][2] 轮播图的功能要求每次只显示一张图片轮播图需要实现左右无缝切换需要实现跳转（放

怼烎@/ 2023年02月26日 07:28/ 0 赞/ 5 阅读

相关纯js实现轮播图插件

第一步首先，先建立一个普通的HTML里面有一个id是banner的div <!DOCTYPE html> <html> <head>

港控/mmm°/ 2022年11月28日 16:30/ 0 赞/ 470 阅读

相关 jQuery实现淘宝轮播图

我爱撸码，撸码使我感到快乐大家好，我是Counter 今天给大家分享的是利用jQuery来实现淘宝轮播图，揭开这层神秘的面纱，CSS样式就不做过多的赘述了，主要就是实

ゞ浴缸里的玫瑰/ 2022年10月02日 14:50/ 0 赞/ 198 阅读

相关纯css实现轮播图

轮播图的实现原理其实是比较简单的举个例子 <div class="main"> <div class="div-main"></div>

左手的ㄟ右手/ 2022年07月11日 15:22/ 0 赞/ 260 阅读

相关淘淘商城系列（五）—— 首页轮播图展示（一）

首页轮播图展示 taotao-portal-web工程中，动态展示内容信息。前端团队：负责JS，html等开发。后端团队：负责后台的开发并提供数据给前端。

迈不过友情╰/ 2022年05月10日 08:44/ 0 赞/ 266 阅读

相关手动轮播图（纯css实现）

> 在一些app上，我们经常能见到一些向左滑向右滑显示更多图片的样式，今天与大家分享一下这种手动轮播图的制作方法，只需要css就好。核心思想：利用超出部分滚动原理，在固定的

淡淡的烟草味﹌/ 2022年01月17日 02:47/ 0 赞/ 588 阅读

相关纯js实现淘宝商城轮播图

需求：　　循环无缝自动轮播3张图片，点击左右箭头可以手动切换图片，鼠标点击轮播图下面的小圆点会跳转到对应的第几张图片。鼠标放到轮播图的图片上时不再自动轮播，鼠标移开之后又

你的名字/ 2021年12月24日 17:02/ 0 赞/ 301 阅读