js轮播图

最新推荐文章于 2022-04-07 15:26:05 发布
最新推荐文章于 2022-04-07 15:26:05 发布
阅读量111 收藏
点赞数
分类专栏： js、html、css 文章标签： js dom css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45892086/article/details/104567022
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
    <title>完全体轮播图</title>
    <style>
        *{
            padding: 0;
            margin-top: 0;
            list-style: none;
        }
        .box{
            width: 520px;
            height: 280px;
            margin:100px auto ;  /* 居中 */
            /* border: 1px solid black; */
            position: relative;  
            overflow: hidden;  /*多余部分隐藏*/
        }
        .box ul{
            width: 600%;  /*宽度要变大，因为有一张假图片*/
            height: 100%;
            position: absolute;
            /* 子绝父相 */
        }
        .box ul li{
            float: left;
        }
        .box ol{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 5px;
            background-color: rgba(255, 255, 255, 0.5);
            border-radius: 10px;
            padding: 0 3px;
            
        }
        .box ol li{
            width: 12px;
            height: 12px;
            background-color: #fff;
            border-radius: 50%;
            float: left;
            margin-left: 8px;
            margin-right: 8px;
            cursor: pointer;/*鼠标上去变成手型*/
        }
        /* 增加权重 */
        .box ol li.current{
            background-color: red;
        }
        /* 左右箭头 */
        .box .arrow{
            display: none;
        }
        .box:hover .arrow {
            display: block;
        }
        .box .arrow span{
            width: 20px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            background-color: rgba(0,0,0,.5);
            font-size: 24px;
            font-family: "宋体";
            cursor: pointer;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
        .box .arrow span.left{
            left:0;
        }
        .box .arrow span.right{
            right:0;
        }
    </style>
</head>
<body>
    <div class="box" id="box">
        <ul>
            <!--装图片的 -->
            <li><a href="#"><img src="image/1.jpg" alt=""></a></li>
            <li><a href="#"><img src="image/2.jpg" alt=""></a></li>
            <li><a href="#"><img src="image/3.jpg" alt=""></a></li>
            <li><a href="#"><img src="image/4.jpg" alt=""></a></li>
            <li><a href="#"><img src="image/5.jpg" alt=""></a></li>
            <!-- 假图片 -->
            <!-- <li><a href="#"><img src="image/1.jpg" alt=""></a></li> -->

            
        </ul>
        <!-- 小圆点 -->
        <ol id="ol">
            <!-- <li class="current" value="0"></li>
            <li value="1"></li>
            <li value="2"></li>
            <li value="3"></li>
            <li value="4"></li> -->
        </ol>

        <!-- 左右箭头 -->
        <div class="arrow">
            <!-- 小于号   大于号 -->
            <span class="left">&lt;</span>  
            <span class="right">&gt;</span>
        </div>
    </div>

<script src="animate.js"></script>
    <script>
    // 需求
    // 点击小圆点  
    // 小圆点排他
    // 移动ul   获取小圆点的下标
    var box = document.querySelector('#box')
    // var xyd = document.querySelectorAll("#ol li")
    var ul  =document.querySelector("#box ul")
    var images  = ul.children//动态的获取li元素
    var arrow = document.querySelector(".arrow")
    var left = document.querySelector(".left")
    var right = document.querySelector(".right")

    // js添加小圆点  和 假图片
    for(var j=0;j<=images.length-1;j++){
       var li = document.createElement('li')
        ol.appendChild(li)
    }
    var xyd = ol.children;
    xyd[0].className = "current"

    // 假图片
    ul.appendChild(ul.firstElementChild.cloneNode(true))

    for(var i = 0;i<xyd.length;i++){
    xyd[i].index = i
    xyd[i].onclick=function (){
        for(var i = 0;i<xyd.length;i++){
            xyd[i].className="" //清除所有小圆点类名
        }   
        
       this.className = "current" //给当前点击的小圆点  添加类名
        
    //    ul.style.left =-this.index*box.offsetWidth+"px"   没有动画效果
       if(index>=images.length-1){
           ul.style.left =0
           index = 0  //写不写无所  下面已经同步了index的值
       }



    index = this.index// 同步index的值为  小圆点的下标

    animate(ul,-this.index*box.offsetWidth,50)

    }
    }

    // ul.onmouseover = function (){
    //          arrow.style.display ="block"
    // }
    // ul.onmouseout  = function (){
    //     arrow.style.display = "none"
    // }
    //   左右箭头的点击事件
    // 箭头实现  无缝效果
    // 原理   把第一张  复制一份  ，添加到  最后一张的后面（假图片）
    // 单击箭头的时候，判断此时展示的是否是第一张图片（假图片）
    // 让ul瞬间移动到left为0 的位置（展示的就是第一张没有动画效果）
    // index = 0
    // index++，index = 1 ，展示的就是第二张

    // 点击左右箭头  展示小圆点
    var index = 0;
    left.onclick = function () { 
        if(index==0){
            
            index = images.length-1 //
            ul.style.left  = -index*box.offsetWidth+"px" //瞬间跳到假图片
            
            
            
        }
        index--
        animate(ul,-index*box.offsetWidth,30)

        // 同步小圆点
        for(var i = 0;i<xyd.length;i++){
          xyd[i].index = i
    
         for(var i = 0;i<xyd.length;i++){
            xyd[i].className="" //清除所有小圆点类名
        }   
        
          xyd[index].className = "current" //给当前点击的小圆点  添加类名
        
    //    ul.style.left =-this.index*box.offsetWidth+"px"   没有动画效果
    }

}

     
     right.onclick = function () { 
         if(index>=images.length-1){

            // 不仅需要把ul的left变成0，index 也要变成0 ，因为下面自加
            index = 0; //展示的就是第一张
            ul.style.left  =0; //瞬间跳回第一张
         }
        index++
        animate(ul,-index*box.offsetWidth,30)
        //  同步小圆点
        for(var i = 0;i<xyd.length;i++){
          xyd[i].index = i
    
         for(var i = 0;i<xyd.length;i++){
            xyd[i].className="" //清除所有小圆点类名
        }   
        if(index>=5){
            xyd[0].className = "current" //给当前点击的小圆点  添加类名
        }else{
            xyd[index].className = "current" //给当前点击的小圆点  添加类名
        }
   //    ul.style.left =-this.index*box.offsetWidth+"px"   没有动画效果
    }

     }


    //  自动播放效果
    var time = setInterval(function () { right.onclick() } ,3000)

    // 鼠标移入  清除定时器
    box.onmouseover = function (){
        clearInterval(time)
    }

    box.onmouseout = function () { 
        // 不能加var
        time = setInterval(function () {  right.onclick() },3000)
     }
    </script>
</body>
</html>

function animate(element,target,num) {    //该函数  实现任意元素去任意left位置
         
    //    每次调用前 清除上一次定时器
         clearInterval(element.time)  
         element.time= setInterval(function () {    //将time属性  存在 element  DOM对象上
             var wd = element.offsetLeft 
//如果wd小于需要移动的距离  step =10往左走，否则step=-10  往右走
             var step = wd<target?num:-num   

    // Math.abs()取绝对值
             if(Math.abs(target-wd)<Math.abs(step)){

                //  当div没有到终点的时候，直接设置到终点
                // 因为step = 10  当移动到96px的时候  会到90px就停下来
                 element.style.left = target+"px"
                 clearInterval(element.time)
             }else{
                 wd+=step
                element.style.left  = wd+"px"
             }
            
           },30)
     }
Shimmer-612
关注
专栏目录
JavaScript案例-js轮播图
02-16
在这个"JavaScript案例-js轮播图"中，我们将深入探讨如何使用纯JavaScript实现一个功能完善的轮播图效果。 首先，轮播图是网页设计中常见的元素，它允许展示一组图片或内容，并在用户交互或定时自动切换之间进行...
完整轮播图实现过程
Apologize
04-04 1047
html> html lang="en"> head> meta charset="UTF-8"> title>title> style type="text/css"> * { padding: 0; margin: 0; list-style: none; b
完整的轮播图
weixin_43608739的博客
06-03 277
<style> * { margin: 0; padding: 0; list-style: none; border: 0; } img { cursor: pointer; widt...
JavaScript实现简单图片轮播效果
10-19
6. 动画函数animate：为了实现平滑的图片切换效果，通常会使用定时器来逐步改变图片的位置。这里的animate函数首先清除之前可能存在的定时器，防止动画函数的冲突，然后根据传入的目标位置进行位置的逐步调整。 7. ...
JavaScript 轮播图.rar
04-08
JavaScript（可能在javascript文件夹中的script.js）是实现轮播图动态功能的关键。主要功能包括： 1. 初始化：获取DOM元素，如轮播图容器、图片列表、控制按钮等，并设置初始状态，比如第一张图片显示，其他隐藏。 ...
javaScript轮播图实现代码
07-07
JavaScript轮播图是一种常见的网页动态效果，用于展示一组图片或内容，通过自动切换或用户交互来呈现连续播放的效果。在给定的资源中，我们有`index.html`作为主页面，`images`目录则包含轮播图所需的图片。以下是...
js轮播图_javascript_
10-03
这个简单的JavaScript轮播图只是一个起点，开发者可以根据需求进行扩展和定制，例如添加触摸滑动支持、响应式设计等，以适应不同设备和屏幕尺寸。通过不断学习和实践，您可以创建出功能丰富、用户体验优秀的轮播图...
记录月经周期的微信小程序
热门推荐
weixin_45892086的博客
03-10 1万+
写了一个记录月经的微信小程序，名字叫姨妈早知道 小程序码 1、首页 2、设置页面 3、个人页面 4、名词解释页面 点击日历下方各名词切换 刚开始想逻辑的时候，我只是存了一个选择的日期数，1号就存1持续5天就1-5号，下次就是5号加上周期数减去了当前月的月份。然后下月显示。 可是当周期少的时候，一个月中含有两个经期。 于是我改变了思路。 把当月的天数当成一个数组数组里面是天数的false,例如当天有30天，数组里就有30个false，1号开始持续5天，数组的1-5项变为true。 逻辑是对了，但是不
点击按钮访问接口返回的url,进行下载文件与跳转操作
weixin_45892086的博客
06-17 1415
点击按钮访问接口返回的url,进行下载文件与跳转操作 点击调用download()方法 就是创建a标签 设置a标签属性 添加a标签到页面中 点击a标签 移除a标签 下载示例 //res 是接口返回的数据 download = (res) => { let eleLink = document.createElement("a"); //设置样式为不可见 eleLink.style.display = "none"; //_blank表示在
从数组中取出随机几个数组成新数组（不重复取）
weixin_45892086的博客
03-11 1291
​ 要给自己的商城，加一个推荐商品的功能。想让他随机从商品表中取出4个数据。 ​ 一开始我用Math.random()*arr.length但是会取出相同的。这样就不太对，哪有推荐两个相同的商品呢。 ​ 然后想到获取当前选择的下标，把选择的那个删除。下一次随机，就随机不到那个数了。 //前台传来的当前商品的id const nowGoodsIndex = req.query.goods_id-1 const goods = await Goods.find() le
JavaScript中伪数组借用数组的方法call（）
weixin_45892086的博客
03-05 967
<script> // 伪数组 有数字下标 有length 能for循环遍历 不能使用数组的方法 var obj = { 0:"zs", 1:15, 2:"sing", length:3 } // 给obj数组添加其他属性 // 可以用call()方法借用 数组的push方法 // Array.prototype.push....
css显示隐藏元素
weixin_45892086的博客
04-07 915
css显示隐藏元素 1、display:none 元素在页面不显示 但是在dom结构上能看到 触发回流和重绘 1、其余属性 block: 块元素 inline: 行内元素（默认值） inline-block：行内块元素 inherit：继承父元素的display属性 2、opacity：0 透明度为0 只是看不到，但是还存在，点击事件可以触发 会触发页面的重绘，不会触发重排 3、visibility:hidden 元素不可见，但是会占据空间 不会触发事件 会触发页面的重绘，不会触发重排 1、其余属性 v
递归把多层嵌套的一层数据结构转换成原本的多层
weixin_45892086的博客
04-21 394
背景 一个多层嵌套评论回复的场景，但是孤儿后端，把所有的回复数据，放到一个数组里返回给我，只有一层，我要给数据转换成原先的多层嵌套的模式。 数据结构如下： //commitId是最外层的评论ID //id是每条回复自己的ID //replyId是回复父级的Id replyMsg表示回复内容这里我表示层级 //现在要把每个子级回复放到父级回复的child里面 //commitId是最外层的评论ID //id是每条回复自己的ID //replyId是回复父级的Id //现在要把每个子级回复放到父级回复的chil
虚拟Dom
weixin_45892086的博客
04-07 326
虚拟Dom 一直以来都知道虚拟dom这个概念就是用代码来生成Dom，可以用diff算法 今天自己来实现一下，如下 创建一个对象，包含元素的各种属性，我这里就写了标签名和文字。嵌套的加个个Child 然后循环数组创建元素插入到body中，如果有child就插入到父元素中。 因为是一个数组，每次改变的时候就可以对比上次和本次dom数组 判断哪里变化了，变化了才修改这就是diff算法 <!DOCTYPE html> <html lang="en"> <head> &
原生js 贪吃蛇 （ 简单功能）
weixin_45892086的博客
03-04 213
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...
javascript 的预编译过程
weixin_45892086的博客
11-25 187
javascript 的预编译过程 JS 运行三部曲 1、语法解析 （分析是否有语法错误） 2、预编译（全局 和 函数体内） 3、解释运行（除了预编译过的，一行一行运行） 预编译前奏 1、暗示全局变量（任何变量，如果未经声明就赋值，此变量就是全局变量，函数体内也不例外） 例如：a=123; 这个变量a就是全局变量 一切声明的全局变量，全是window的属性 例如：a=123;就等于window.a...
前端面试二——HTML
weixin_45892086的博客
08-24 167
前端面试二——HTML 1、什么是标签语义化 1、语义化的标签就是让标签有自己的含意 例如 <header></header>表示头部 <footer></footer> 表示尾部 <main></main> 表示页面主体等。 2、语义化标签的优点 代码结构清晰，有利于搜索引擎优化（SEO）便于团队开发和维护，可读性更高。 2、H5有哪些新特性 语义化标签 、表单新特性、视频(video)和音频(audio)、canvas画布、svg
简单实现打字效果
weixin_45892086的博客
03-17 145
自己的博客主页，有个打字的效果，就简单的自己动手实现了下。 思路就是，添加数组里的字，删除数组里的字。 不多说，直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="w
js手风琴
weixin_45892086的博客
02-28 145
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>海贼王悬赏</t...
Js实现图片点击切换轮播图详解
这个简单的JavaScript轮播实现是一个基础的起点，可以帮助初学者理解如何用JavaScript控制DOM元素和处理用户交互。随着技能的提升，你可以进一步优化代码，增加更多高级特性，以满足不同项目的需要。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值