无缝滚动轮播图

最新推荐文章于 2024-07-05 16:41:23 发布
最新推荐文章于 2024-07-05 16:41:23 发布
阅读量472 收藏 5
点赞数 3
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73745404/article/details/127775924
版权

一.序言

            在学习了javaScript的全部内容后，我们已经可以通过

           学习的知识，来完成大多网页都需要的无缝“轮播图”，在写轮播图

           是我们要理清思路，力求一个闭合的逻辑思路，这样我们JavaScript

           代码时不容易出错。整体效果如下

     以此轮播图为例，下面是我的代码思路

        1.先写结构

        2.再写样式

        3.最后为js部分

        3.1封装一个运动框架函数

        3.2鼠标移入，移出事件

        3.3点击左右按钮图片左右轮播

        3.4轮播图下方小圆点按钮图片切换事件

二、代码部分

1.结构

          写轮播图结构，可以先用一个大的盒子包裹住整体，在大盒子里面设置一个视口盒子用来

包裹图片和左右图片切换按钮，再用一个盒子包裹轮播图下方小圆点按钮图片切换事件。代码和

演示效果如下

 <div class="all" id="box">
        <div class="screen">
            <ul>
                <li><img src="../img/1.jpg" alt=""></li>
                <li><img src="../img/2.jpg" alt=""></li>
                <li><img src="../img/3.jpg" alt=""></li>
                <li><img src="../img/4.jpg" alt=""></li>
                <li><img src="../img/5.jpg" alt=""></li>
                <li><img src="../img/1.jpg" alt=""></li>
            </ul>
            <ol>
                <li class="current">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ol>
        </div>
        <div id="arr">
            <span id="left">&lt;</span>
            <span id="right">&gt;</span>
        </div>
    </div>
    <script src="../js/1.js"></script>

2. CSS样式

       上图只是刚写完结构，我们现在要调整好样式，在调整样式时，按照结构的顺序来，尽量不要

挑着写，以免产生bug导致式样无法布局。

注意：在进行定位和浮动调整结构位置时，要分清楚该给父级的样式不要给本身，给本身的样式不能加到其他地方。

在写css样式把按钮调整到大盒子里面，需要给大盒子相对定位（父级），本身盒子绝对定位（子级），要让块级元素并列排放可以给第一个块级元素一个浮动样式。具体效果图和代码如下

/* 清楚所有外边距和内边距 */
*{
    margin: 0;
    padding: 0;
}
/* 清除li前面的样式 */
li{
    list-style: none;
}
/* 大盒子样式 */
.all{
    width: 800px;
    height: 300px;
    border: 1px solid;
    margin: 100px auto;
    position: relative;
    cursor: pointer;
}
/* 视口样式 */
.screen{
    width: 800px;
    height: 300px;
    position: relative;
    overflow: hidden;
}
/* 图片存放盒子 */
.screen ul{
    width: 4800px;
    height: 300px;
    position: absolute;
    left: 0;
    margin: 0;
}
/* 图片排列样式 */
.screen ul li{
    float: left;
}
/* 图片样式 */
.screen ul li img{
    width: 800px;
    height: 300px;
}
/* 小圆点盒子 */
.screen ol{
    position: absolute;
    left: 40%;
    bottom: 17px;
}
/* 小圆点公共样式 */
.screen ol li{
    float: left;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    margin-right: 10px;
}
/* 小圆点单个样式 */
.screen .current{
   background-color: orangered;
   color: #fff;
}
/* 左右按钮清除样式 */
 #arr{
    display: none;
 }
/* 左右按钮公共样式 */
 #arr span{
    width: 40px;
    height: 40px;
    background-color: rgba(0,0,0,0.7);
    position: absolute;
    top: 50%;
    cursor: pointer;
    text-align: center;
    line-height: 40px;
    color: white;
 }
 /* 左键按钮样式 */
 #arr #left {
    border-bottom-right-radius: 50%;
    border-top-right-radius: 50%;
    left: 0px;

}
/* 右键按钮样式 */
#arr #right {
    border-bottom-left-radius: 50%;
    border-top-left-radius: 50%;
    right: 0px;
}

 三、JavaScript部分

           一般轮播图有两种，一是切换轮播，二是无缝滚动轮播。前者优点是在进行编程是方便快捷可却不具备后者无缝滚动的优点，以下JavaScript则是无缝滚动的思路。

3.1 运动框架

        封装一个运动框架的优势是可重复调用，大大减少代码的书写量，并是电脑负载降低，更利于用户的使用体验，相对来说可以快速打开。

​
 //运动框架
        function startMove(dom,target){
            clearInterval(dom.timer);
            var iSpeed=null;
            var iCur=null;
            dom.timer = setInterval(function(){
                iCur = parseInt(getStyle(dom,"left"));
                iSpeed = (target-iCur)/7;
                iSpeed = target-iCur > 0? Math.ceil(iSpeed):Math.floor(iSpeed)
                if(iCur==target){
                    clearInterval(dom.timer)
                }else{
                    dom.style.left = iSpeed + iCur +'px'
                }

            }, 30)
        }
        //获取属性
        function getStyle(dom,arrt){
            return window.getComputedStyle(dom,null)[arrt]
        }

​

3.2鼠标移入移出事件

   //鼠标移入
        box.onmouseenter=function(){
            arr.style.display = 'block'
            clearInterval(timer)
        }

        //鼠标移出
        box.onmouseleave=function(){
            arr.style.display ='none'
            timer=setInterval(moveImg,2000)
        }

3.3左右按钮事件及自动轮播事件

//右播
        right.onclick=moveImg
        function moveImg(){
            if(index==btn.length){
                index = 0
                ul.style.left = -index * screen.offsetWidth
            }
                index++
               startMove(ul, -index * screen.offsetWidth)
               changeColor(index)
            }
        
        //自动轮播
        timer = setInterval(moveImg,1000)

        //左播
        left.onclick=function(){
            if(index==0){
                index = btn.length
                ul.style.left = -index* screen.offsetWidth +'px'
            }
               index--
               startMove(ul, -index * screen.offsetWidth)
               changeColor(index)
            }

3.4 轮播图下方小圆点按钮图片切换事件  

//小圆点点击
        for (var i = 0; i < btn.length; i++) {
            (function (i) {
                btn[i].onclick = function () {
                    index = i
                    startMove(ul, -index * screen.offsetWidth)
                    changeColor(index)
                }
            }(i))
        }

        //小圆点变色
        function changeColor(index) {
            for (var i = 0; i < btn.length; i++) {
                btn[i].className = ''
            }
            if (index > btn.length - 1) {
                btn[0].className = 'current'
            } else {
                btn[index].className = 'current'
            }
        }

 四 总结

        不管是切换轮播还是无缝滚动轮播又或者是其他的案例，都是通过HTML、CSS、JavaScript的知识点来实现的，我们要做的就是先思考一下如何布局，使其结构合理简单为js的编程打下基础，在写css样式按照结构顺序，js要结合控制台编程，多试错避免bug频发。这期的内容就到这里了，如果觉得对您有用，请留下一个，谢谢。

最后的最后整体代码在此奉上

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
    /* 清楚所有外边距和内边距 */
*{
    margin: 0;
    padding: 0;
}
/* 清除li前面的样式 */
li{
    list-style: none;
}
/* 大盒子样式 */
.all{
    width: 800px;
    height: 300px;
    border: 1px solid;
    margin: 100px auto;
    position: relative;
    cursor: pointer;
}
/* 视口样式 */
.screen{
    width: 800px;
    height: 300px;
    position: relative;
    overflow: hidden;
}
/* 图片存放盒子 */
.screen ul{
    width: 4800px;
    height: 300px;
    position: absolute;
    left: 0;
    margin: 0;
}
/* 图片排列样式 */
.screen ul li{
    float: left;
}
/* 图片样式 */
.screen ul li img{
    width: 800px;
    height: 300px;
}
/* 小圆点盒子 */
.screen ol{
    position: absolute;
    left: 40%;
    bottom: 17px;
}
/* 小圆点公共样式 */
.screen ol li{
    float: left;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    margin-right: 10px;
}
/* 小圆点单个样式 */
.screen .current{
   background-color: orangered;
   color: #fff;
}
/* 左右按钮清除样式 */
 #arr{
    display: none;
 }
/* 左右按钮公共样式 */
 #arr span{
    width: 40px;
    height: 40px;
    background-color: rgba(0,0,0,0.7);
    position: absolute;
    top: 50%;
    cursor: pointer;
    text-align: center;
    line-height: 40px;
    color: white;
 }
 /* 左键按钮样式 */
 #arr #left {
    border-bottom-right-radius: 50%;
    border-top-right-radius: 50%;
    left: 0px;

}
/* 右键按钮样式 */
#arr #right {
    border-bottom-left-radius: 50%;
    border-top-left-radius: 50%;
    right: 0px;
}
   </style>
</head>
<body>
    <div class="all" id="box">
        <div class="screen">
            <ul>
                <li><img src="../img/1.jpg" alt=""></li>
                <li><img src="../img/2.jpg" alt=""></li>
                <li><img src="../img/3.jpg" alt=""></li>
                <li><img src="../img/4.jpg" alt=""></li>
                <li><img src="../img/5.jpg" alt=""></li>
                <li><img src="../img/1.jpg" alt=""></li>
            </ul>
            <ol>
                <li class="current">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ol>
        </div>
        <div id="arr">
            <span id="left">&lt;</span>
            <span id="right">&gt;</span>
        </div>
    </div>
   <script>
    var box = document.getElementById('box');
        var screen =document.getElementsByClassName('screen')[0]
        var ul = document.getElementsByTagName('ul')[0]
        var lis = ul.children;
        var ol = document.getElementsByTagName('ol')[0];
        var btn = ol.children;
        var arr = document.getElementById('arr')
        var left = document.getElementById('left')
        var right = document.getElementById('right')
        var timer = null;
        var index =0;
        
        //鼠标移入
        box.onmouseenter=function(){
            arr.style.display = 'block'
            clearInterval(timer)
        }

        //鼠标移出
        box.onmouseleave=function(){
            arr.style.display ='none'
            timer=setInterval(moveImg,2000)
        }
        
        //右播
        right.onclick=moveImg
        function moveImg(){
            if(index==btn.length){
                index = 0
                ul.style.left = -index * screen.offsetWidth
            }
                index++
               startMove(ul, -index * screen.offsetWidth)
               changeColor(index)
            }
        
        //自动轮播
        timer = setInterval(moveImg,1000)

        //左播
        left.onclick=function(){
            if(index==0){
                index = btn.length
                ul.style.left = -index* screen.offsetWidth +'px'
            }
               index--
               startMove(ul, -index * screen.offsetWidth)
               changeColor(index)
            }
        

        //小圆点点击
        for (var i = 0; i < btn.length; i++) {
            (function (i) {
                btn[i].onclick = function () {
                    index = i
                    startMove(ul, -index * screen.offsetWidth)
                    changeColor(index)
                }
            }(i))
        }

        //小圆点变色
        function changeColor(index) {
            for (var i = 0; i < btn.length; i++) {
                btn[i].className = ''
            }
            if (index > btn.length - 1) {
                btn[0].className = 'current'
            } else {
                btn[index].className = 'current'
            }
        }
        
        //运动框架
        function startMove(dom,target){
            clearInterval(dom.timer);
            var iSpeed=null;
            var iCur=null;
            dom.timer = setInterval(function(){
                iCur = parseInt(getStyle(dom,"left"));
                iSpeed = (target-iCur)/7;
                iSpeed = target-iCur > 0? Math.ceil(iSpeed):Math.floor(iSpeed)
                if(iCur==target){
                    clearInterval(dom.timer)
                }else{
                    dom.style.left = iSpeed + iCur +'px'
                }
            }, 30)
        }
        //获取属性
        function getStyle(dom,arrt){
            return window.getComputedStyle(dom,null)[arrt]
        }
   </script>
       
</body>
</html>

      

            

          

m0_73745404
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用transition实现轮播图无缝衔接
weixin_73640652的博客
09-29 790
轮播图无缝衔接，可左右切换，并设有节流，防止频繁点击
无缝轮播图
qq_63831678的博客
04-07 60
<div class="wrap"> <div class="box"> <img src="images/1.jpg" /><img src="images/2.jpg" /><img src="images/3.jpg" /><img src="images/4.jpg" /><img src="images/1.jpg" /> </div> </div> .wrap{ marg...
js无缝轮播图，有过渡效果（详细解析）
qq_59599812的博客
02-20 1414
此时需要注意，需要在判断中用到setTimeout延时器，过渡效果有几秒，延时器也要写几秒。因为有过渡效果，不然会有问题，要把过渡清除，设置延时器是把延时器的时间当做过渡去使用。1.无缝轮播思路：复制轮播图第一张到最后一张，当轮播图到最后一张时，需要判断，到第一张。
编写可复用的无缝滚动轮播图
小白变怪兽
06-21 1661
无缝滚动
无缝轮播图Vue2 轮播图组件可拖拽无缝切换
huang_rui_min的博客
03-13 1552
此轮播图在普通轮播图的基础上优化，增加第一张切上一张接最后一张，最后一张切下一张接第一张，且无缝衔接的功能。增加拖拽切换功能；
JS经典案例-无缝滚动轮播图（纯JS）
Allen-
11-05 4484
JS无缝滚动轮播图案例
无缝切换轮播图
keji_123的博客
08-25 2091
轮播图大家都写过，但是怎么做到无缝切换对新手来说是个难点。 曾经也困惑了我很久，一直在研究，方法也很多，但是总是没有找到简便合适的。下面介绍一种。html部分：<div class="box"> <ul> <li><img src="images/pic_01.jpg" width="630" height="210"></li> <li><img src="images/pic_0
原生JS实现无缝滚动轮播图
03-11
本教程将深入探讨如何使用原生JavaScript（JS）实现一个无缝滚动轮播图，无需依赖任何外部库，如jQuery或其他轮播插件。 首先，我们需要创建HTML结构。一个简单的轮播图通常包含一个容器div，以及若干个用于展示...
无缝滚动轮播图.zip
05-30
本资源为《最全面的无缝滚动轮播图》配套资源，本资源提供了博文中的所有的源码。从轮播图的HTML出发到JavaScript的逐步实现，让你一步步深入走入动画的魅力，感知动画的强大，同时对动画产生浓郁的兴趣。逐步帮你...
js实现无缝滚动轮播图
11-27
无缝滚动轮播图则是这种展示方式的一种升级，它使得用户在浏览过程中感觉不到图片的切换，形成一种连续的滚动效果。本篇文章将详细介绍如何使用JavaScript和jQuery来实现这一功能，以及如何通过导航条进行左右切换。...
原生JS实现无缝滚动轮播图（附加无注释版+详解版）
03-12
在本文中，我们将深入探讨如何使用原生JavaScript实现一个无缝滚动轮播图。无缝轮播图是一种常见的网页元素，用于展示一系列图片或内容，并通过自动或手动切换来创建连续无中断的浏览体验。这种效果在现代网站设计中...
纯JavaScript实现无缝滚动轮播图效果
04-15
本教程将深入探讨如何使用纯JavaScript实现一个无缝滚动轮播图效果，不依赖任何外部库，如jQuery或其他框架。 首先，我们需要理解轮播图的基本结构。它通常包含一个容器，里面有几个图片（或内容）元素，以及可能的...
纯 CSS 实现轮播图（自动切换、无缝衔接、小圆点切换）
热门推荐
qq_53569667的博客
12-30 1万+
纯 css 实现一个简单的轮播图
轮播图 （无缝轮播图）
m0_46088512的博客
09-17 3300
1.无缝轮播核心:在最后多加一张第一张图,当达到最后一张t1的时候一瞬间将ul拉回到0的位置 结构： <div class="wrap"> <ul> <li><img src="./image/t1.png" alt=""></li> <li><img src="./image/t2.png" alt=""></li> ...
[微信小程序] Swiper无缝轮播完美衔接（图片最后一张和第一张可以衔接滑动）
qq_14993591的博客
02-09 5057
照文档上的去做实现的swiper轮播图，其效果是 每次图片轮播到最后一张时 页面会快速的倒退滚动到第一张 然后再轮播 这样效果实在太差。 解决方法：是加入circular属性即可实现无缝轮播。 <swiper class="swiper-item circular="true"> <swiper-item> <image src=""></image> </swiper-item> </swiper> 只需要在swi
最全面的无缝滚动轮播图（只为解放你的双手）
Jdoit CW的博客
05-30 1万+
文章目录1. 轮播图效果展示2. 轮播图剖析2.1. 原理简介2.2. 功能需求3. 代码分析3.1. HTML代码分析3.2. JavaScript代码逐步引导 写在前面：最近在给自己的二手网页添加动画时发现轮播图还真是无处不在，样式也是五花八门。于是手写轮播图的想法涌上心头，经过一番折腾之后，它诞生了。优化了些内容，对无js基础的小伙伴也很友好（只需改动样式，js动态变化）。 1. 轮播图效果展示 2. 轮播图剖析 2.1. 原理简介 2.2. 功能需求 3. 代码分析 3.1. HTML代码分析 3.
淘宝顶部header的居中布局
u011280778的博客
06-29 1920
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
js实现无缝轮播图
weixin_45571121的博客
09-11 4070
一、轮播图需求 需要实现每隔一定时间进行下一张图片的自动轮播 需要点击左右按钮可以进行上下图片的切换 显示当前位置的小圆点 点击小圆点可以切换到对应的图片上 鼠标移入可视区时，停止轮播，显示左右按钮 下面我们来看一下效果图： 二、轮播图的原理 图片移动实现原理：利用浮动将所有所有照片依次排成一行，给这一长串图片ul添加一个父级的遮罩（就是可视区），每次只显示一张图，其余的都隐藏起来。对图片添加绝对定位，通过控制left属性，实现照片的移动。 图片移动动画原理：从当前图片移动到下一张...
HTML_表单 和 表单案例
最新发布
secret010的博客
07-05 246
【代码】HTML_表单 和 表单案例。
vue3实现左右照片无缝滚动轮播图
09-21
Vue.js 3可以使用transition组件和v-for指令来实现左右照片无缝滚动轮播图。首先，你需要设置一个容器元素来包裹照片，并设置它的宽度为照片的宽度的n倍，其中n为照片的数量。然后，使用v-for指令在容器中循环渲染...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值