纯js实现淘宝商城轮播图

你的名字 2021-12-24 17:02 282阅读 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 条评论，282人围观）

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

相关阅读

相关纯css轮播图

*代码简单明了。有问题留言小编** 在这里插入<!DOCTYPE html> <html lang="zh"> <head> <met...

梦里梦外;/ 2024年04月17日 20:25/ 0 赞/ 67 阅读

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

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

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

相关纯js实现轮播图插件

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

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

相关 c语言实现图片轮播,纯css实现轮播图

轮播图的实现原理其实是比较简单的举个例子 main的宽度是100px div-main的宽度是500px 我们用js控制div-main往左或往右移动，这样就实现了轮

阳光穿透心脏的1/2处/ 2022年10月15日 05:53/ 0 赞/ 262 阅读

相关 jQuery实现淘宝轮播图

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

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

相关纯css实现轮播图

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

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

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

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

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

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

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

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

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

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

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

相关 ## 淘淘商城项目——轮播广告实现及踩坑

说下实现思路： 1. 查看jsp页面发现 2. ![在这里插入图片描述][20190626150723779.png] 是一串json数据。用工具查看格式如下：

Dear 丶/ 2021年12月24日 00:31/ 0 赞/ 438 阅读