滑动轮播图

最新推荐文章于 2024-01-15 18:56:46 发布
最新推荐文章于 2024-01-15 18:56:46 发布
阅读量455 收藏 1
点赞数 1
分类专栏： JavaScript案例 文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HAI6545/article/details/122243581
版权 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
.carousel{
    width: 600px;
    height: 300px;
    border:1px solid #000;
    position:relative;
    overflow: hidden;
    margin:50px auto;
}
.carousel ul,.carousel ol{
    list-style: none;
    padding: 0;
    margin: 0;
}
.carousel ul{
    width: 3000px;
    height: 300px;
    position:absolute;
    left:0;
    top:0;
}
.carousel ul li{
    float:left;
    width: 600px;
    height: 300px;
}
.carousel ul li a img{
    width: 600px;
    height: 300px;
}
.carousel ol{
    height: 20px;
    border-radius: 10px;
    background-color:rgba(255,255,255,.7);
    position: absolute;
    bottom:10px;
    left: 50%;
    transform: translateX(-50%);
}
.carousel ol li{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #000;
    float:left;
    margin: 5px;
}
.carousel ol li.active{
    background-color: #f00;
}
.carousel:hover{
    cursor: pointer;
}
.carousel>a{
    width: 20px;
    height: 40px;
    color:#fff;
    background-color:rgba(0,0,0,.7);
    text-align: center;
    line-height: 40px;
    position:absolute;
    top:50%;
    transform: translateY(-50%);
    text-decoration: none;
}
.carousel>a.leftBtn{
    left: 0;
}
.carousel>a.rightBtn{
    right: 0;
}
</style>
<body>
<div class="carousel">
    <ul>
        <li>
            <a href="">
                <img src="./images/1.jfif" alt="">
            </a>
        </li>
        <li>
            <a href="">
                <img src="./images/2.webp" alt="">
            </a>
        </li>
        <li>
            <a href="">
                <img src="./images/3.jfif" alt="">
            </a>
        </li>
    </ul>
    <ol>
        <li class="active"></li>
        <li></li>
        <li></li>
    </ol>
    <a href="javascript:;" class="leftBtn">&lt;</a>
    <a href="javascript:;" class="rightBtn">&gt;</a>
</div>
</body>
<script src="./js/utils.js"></script>
<script>
// 1.获取元素
// 2.给ul的前后各复制一个li
// 3.调整ul的left值
// 4.开始轮播图效果 - 都是在操作下标 - 从右箭头点击开始
var ul = document.querySelector('.carousel ul');
// 复制
var firstLi = ul.firstElementChild.cloneNode(true)
// console.log(firstLi);
var lastLi = ul.lastElementChild.cloneNode(true)
// 分别放在末尾和最前面
ul.appendChild(firstLi)
ul.insertBefore(lastLi, ul.firstElementChild)
// 调整left
ul.style.left = -firstLi.offsetWidth + 'px'

// 获取ol
var ol = document.querySelector('.carousel ol');
// 定义下标
var index = 1
// 定义开关
var flag = true
// 右箭头点击
var rightBtn = document.querySelector('.carousel>a.rightBtn');
rightBtn.onclick = function(){
    // 判断开关
    if(!flag) return false
    // 动画开始 - 开关关闭
    flag = false
    // 操作下标
    index++;
    // 让ul开始动画
    animate(ul, {
        left: -index * firstLi.offsetWidth
    }, function(){
        // 限制index 的最大值
        if(index === ul.children.length-1){
            index = 1
            ul.style.left = -index * firstLi.offsetWidth + 'px'
            console.log(-index * firstLi.offsetWidth);
        }
        // 动画结束后
        // 操作小圆点
        // 将所有小圆点的active去掉
        for(var i=0;i<ol.children.length;i++){
            ol.children[i].className = ''
        }
        // 给当前对应的小圆点添加active
        ol.children[index-1].className = 'active'
        // 动画结束 - 打开开关
        flag = true
    })
}

// 左箭头点击
var leftBtn = document.querySelector('.carousel>a.leftBtn');
leftBtn.onclick = function(){
    if(!flag) return false
    flag = false
    // 操作下标
    index--;
    // 让ul开始动画
    animate(ul, {
        left: -index * firstLi.offsetWidth
    }, function(){
        // 限制index 的最大值
        if(index === 0){
            index = ul.children.length-2
            ul.style.left = -index * firstLi.offsetWidth + 'px'
            console.log(-index * firstLi.offsetWidth);
        }
        // 动画结束后
        // 操作小圆点
        // 将所有小圆点的active去掉
        for(var i=0;i<ol.children.length;i++){
            ol.children[i].className = ''
        }
        // 给当前对应的小圆点添加active
        ol.children[index-1].className = 'active'
        flag = true
    })
}

// 小圆点点击
for(var j=0;j<ol.children.length;j++){
    (function(j){
        ol.children[j].onclick = function(){
            if(!flag) return false
            flag = false
            index = j+1
            animate(ul, {
                left: -index * firstLi.offsetWidth
            }, function(){
                // 限制index 的最大值
                if(index === 0){
                    index = ul.children.length-2
                    ul.style.left = -index * firstLi.offsetWidth + 'px'
                    console.log(-index * firstLi.offsetWidth);
                }
                // 动画结束后
                // 操作小圆点
                // 将所有小圆点的active去掉
                for(var i=0;i<ol.children.length;i++){
                    ol.children[i].className = ''
                }
                // 给当前对应的小圆点添加active
                ol.children[index-1].className = 'active'
                flag = true
            })
        }
    })(j)
}

// 自动轮播
var timerId = setInterval(function(){
    rightBtn.onclick()
}, 500)

// 大盒子的移入移出
var carousel = document.querySelector('.carousel');
carousel.onmouseover = function(){
    clearInterval(timerId)
}

carousel.onmouseout = function(){
    timerId = setInterval(function(){
        rightBtn.onclick()
    }, 500)
}
</script>
</html>
/**
 * 进行动画的函数
 * @param {node} ele 要进行动画的元素
 * @param {object} obj 动画的属性和值组成的键值对
 * @param {function} fn 动画结束后要执行的函数
 */
function animate(ele, obj, fn){ 
    // 定义计数器 - 计算有多少个定时器
    var k = 0
    // 动画 - 定时器
    // 定时器的数量取决于obj中键值对数量
    // 通过for in 遍历obj，在循环中创建定时器
    for(var key in obj){
        k++ // 统计定时器数量
        // 在循环中嵌套了异步代码，异步代码中就无法准确的获取到每次遍历的变量了
        // 在定时器中的key是循环结束以后的key - 使用自调用函数解决
        (function(key){
            var timerId = setInterval(function(){
                // 获取left
                // console.log(key);
                var currentStyle = getComputedStyle(ele)[key] // 带px
                var target = obj[key]
                // 如果属性是opacity - 将当前的透明度扩大100被来处理
                if(key === 'opacity'){
                    currentStyle *= 100
                    target *= 100
                }
                
                // 取整，将px去掉
                currentStyle = parseInt(currentStyle)
                // 因为有的距离远，有的距离近，所以以同样的速度动画，多个属性不均匀
                // 每次走 剩下的距离 / 10 - 瑕疵：走不都头 - 取整
                var speed = (target - currentStyle) / 20
                // 取整 - 正数就向上取整，负数就向下取整
                if(speed > 0){
                    speed = Math.ceil(speed)
                }else{
                    speed = Math.floor(speed)
                }
                // 把数字加大
                currentStyle += speed
                // 限制left的最大值 - 将>=换成===，因为最后移动的距离，1px  1px 挪过去的，所以一定不会跳过目标值
                
                // 将数字设置为box的left
                if(key === 'opacity'){
                    ele.style[key] = currentStyle / 100
                }else{
                    ele.style[key] = currentStyle + 'px'
                }
                if(currentStyle === target){
                    currentStyle = target
                    clearInterval(timerId)
                    // 每清除一次定时器，就让计数器--
                    k--
                    // 当k=0的时候，所有定时器就都结束了
                    if(k === 0){
                        // ele.style.backgroundColor = '#0f0'
                        // alert('动画结束')
                        // 希望这里的代码固定不变的，不要每次修改 - 每次都能满足调用的需求
                        fn()
                    }
                }
            }, 20)
        })(key)
    }
}

封装后代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
.carousel{
    width: 600px;
    height: 300px;
    border:1px solid #000;
    position:relative;
    overflow: hidden;
    margin:50px auto;
}
.carousel ul,.carousel ol{
    list-style: none;
    padding: 0;
    margin: 0;
}
.carousel ul{
    width: 3000px;
    height: 300px;
    position:absolute;
    left:0;
    top:0;
}
.carousel ul li{
    float:left;
    width: 600px;
    height: 300px;
}
.carousel ul li a img{
    width: 600px;
    height: 300px;
}
.carousel ol{
    height: 20px;
    border-radius: 10px;
    background-color:rgba(255,255,255,.7);
    position: absolute;
    bottom:10px;
    left: 50%;
    transform: translateX(-50%);
}
.carousel ol li{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #000;
    float:left;
    margin: 5px;
}
.carousel ol li.active{
    background-color: #f00;
}
.carousel:hover{
    cursor: pointer;
}
.carousel>a{
    width: 20px;
    height: 40px;
    color:#fff;
    background-color:rgba(0,0,0,.7);
    text-align: center;
    line-height: 40px;
    position:absolute;
    top:50%;
    transform: translateY(-50%);
    text-decoration: none;
}
.carousel>a.leftBtn{
    left: 0;
}
.carousel>a.rightBtn{
    right: 0;
}
</style>
<body>
<div class="carousel">
    <ul>
        <li>
            <a href="">
                <img src="./images/1.jfif" alt="">
            </a>
        </li>
        <li>
            <a href="">
                <img src="./images/2.webp" alt="">
            </a>
        </li>
        <li>
            <a href="">
                <img src="./images/3.jfif" alt="">
            </a>
        </li>
    </ul>
    <ol>
        <li class="active"></li>
        <li></li>
        <li></li>
    </ol>
    <a href="javascript:;" class="leftBtn">&lt;</a>
    <a href="javascript:;" class="rightBtn">&gt;</a>
</div>
</body>
<script src="./js/utils.js"></script>
<script>
// 1.获取元素
// 2.给ul的前后各复制一个li
// 3.调整ul的left值
// 4.开始轮播图效果 - 都是在操作下标 - 从右箭头点击开始
var ul = document.querySelector('.carousel ul');
// 复制
var firstLi = ul.firstElementChild.cloneNode(true)
// console.log(firstLi);
var lastLi = ul.lastElementChild.cloneNode(true)
// 分别放在末尾和最前面
ul.appendChild(firstLi)
ul.insertBefore(lastLi, ul.firstElementChild)
// 调整left
ul.style.left = -firstLi.offsetWidth + 'px'

// 获取ol
var ol = document.querySelector('.carousel ol');
// 定义下标
var index = 1
// 定义开关
var flag = true
// 右箭头点击
var rightBtn = document.querySelector('.carousel>a.rightBtn');
rightBtn.onclick = function(){
    // 判断开关
    if(!flag) return false
    // 动画开始 - 开关关闭
    flag = false
    // 操作下标
    index++;
    move()
}

// 左箭头点击
var leftBtn = document.querySelector('.carousel>a.leftBtn');
leftBtn.onclick = function(){
    if(!flag) return false
    flag = false
    // 操作下标
    index--;
    // 让ul开始动画
    move()
}

// 小圆点点击
for(var j=0;j<ol.children.length;j++){
    (function(j){
        ol.children[j].onclick = function(){
            if(!flag) return false
            flag = false
            index = j+1
            move()
        }
    })(j)
}

// 自动轮播
var timerId
auto()

// 大盒子的移入移出
var carousel = document.querySelector('.carousel');
carousel.onmouseover = function(){
    clearInterval(timerId)
}

carousel.onmouseout = function(){
    auto()
}

// 封装轮播核心代码
function move(){
    animate(ul, {
        left: -index * firstLi.offsetWidth
    }, function(){
        // 限制index 的最大值
        if(index === 0){
            index = ul.children.length-2
            ul.style.left = -index * firstLi.offsetWidth + 'px'
            console.log(-index * firstLi.offsetWidth);
        }
        if(index === ul.children.length-1){
            index = 1
            ul.style.left = -index * firstLi.offsetWidth + 'px'
            console.log(-index * firstLi.offsetWidth);
        }
        // 动画结束后
        // 操作小圆点
        // 将所有小圆点的active去掉
        for(var i=0;i<ol.children.length;i++){
            ol.children[i].className = ''
        }
        // 给当前对应的小圆点添加active
        ol.children[index-1].className = 'active'
        flag = true
    })
}

// 封装自动轮播
function auto(){
    timerId = setInterval(function(){
        rightBtn.onclick()
    }, 500)
}
</script>
</html>

HAI6545
关注
专栏目录
左右滑动效果轮播图
weixin_55753367的博客
03-04 3776
图片轮播的方式有很多种，下面我们使用js原生代码来写出其中一种方式——左右滑动效果。 js原生和jQuery、还有Css都可以实现这个效果，jQuery因为封装了很多用法，所有使用起来 很简单、也方便了许多，其实也就是用js原生模拟出的这些用法。不管怎样，构造出一个基本的表现层那是必须的。 对于左右滑动效果轮播： 1.首先是外围部分跟图片组，外围部分宽高度只是你轮播的大小，而图片组需要设置你图片组里面全部加起来的宽度。因为需要左右滑动效果。所以运用了左浮动（float属性），将图片并排显示。 再通过超出
前端实战：小实例2——滚动轮播图
weixin_43328954的博客
06-07 1796
前言 实现思路 用 div 封装轮播图，用 img 标签放置所有图片，图片均初始化为不可见（display : none） HTML + CSS + JavaScript
滑动的轮播图，纯jquery书写，注释清晰可读！
qq_44890362的博客
10-07 588
一提到轮播图，相信大家都不陌生。这个轮播图无非就两种形式。 第一种通过切换的方式去更换图片，这种方式往往是采取的是更换路径！ 第二种就是通过滑动的方式去更换图片，而这种就是通过改变top值或者是margin值。 今天想和大家分享的是第二种方式！ 1.首先我还是将结构搭建起来，html结构其实是非常简单的。 <!-- 内容 --> <div class="container"> <ul> <li>&l
轮播图动画滑动动画效果
qq_44697681的博客
01-19 4350
轮播图的实现原理并不难，但是步骤有些繁琐。最近练习了一个轮播图，大部分是跟着网上的教程写的，然后自己做了一点兼容ie8的修改，加了点击切换图片的特效和手机端的滑动特效，让这个轮播图可以在响应式的网站中使用，同时兼容pc端和触屏端。 轮播图的样式也分很多种，淡入淡出的轮播图很容易实现，只需要把图片全都叠在一起，让相应的图片轮流显示就行了，但是滚动能的轮播图就要复杂很多。这里介绍的是滚动的轮播图： 原理： 实现的原理就是将所有的图片横向的排列起来，...
【图片轮播】Vue如何实现移动端图片轮播效果，支持左右滑动（附图文及代码）
赏樱看雪撸代码
06-15 9578
vue实现移动端图片轮播，移动端相册制作，vant3实现图片轮播效果，swipe轮播实现过程，swipe轮播组件实现照片轮播，vant3中swipe轮播组件应用。
原生JS无缝滑动轮播图
10-16
【原生JS无缝滑动轮播图】是一种常见的网页动态效果，用于展示一系列图片或内容。在本实例中，我们将探讨如何使用纯JavaScript实现一个淡入淡出的无缝轮播图，无需依赖任何外部库如jQuery。以下是实现该功能的关键...
js实现固定宽高滑动轮播图效果
10-20
在PC端实现固定宽度和高度的滑动轮播图效果，通常会借助JavaScript，特别是利用jQuery这样的库来简化DOM操作和动画效果的实现。 本文将会详细阐述如何使用JavaScript实现一个PC端固定宽度和高度的滑动轮播图，所...
移动端滑动轮播图
06-08
在移动端开发中，滑动轮播图是一种常见的用户体验设计元素，用于展示多张图片或内容。本项目基于Zepto.js库构建了一个移动端滑动轮播图插件，它具有独特的视觉效果：当用户滑动时，中间的图片会放大，而两侧的图片则...
原生js实现滑动轮播图
07-06
本文将详细讲解如何使用原生JavaScript实现一个具备基础功能的滑动轮播图，包括点击左右按钮切换图片、点击小圆点定位到相应图片以及自动播放与鼠标悬停暂停的功能。我们将涉及到的主要技术栈是HTML、CSS和...
移动端可滑动轮播图
02-24
很实用的移动端可滑动轮播图代码，有多种类型供选择
支持手机触摸屏左右滑动的js轮播效果代码
05-10
今天个小伙伴们分享一个好东西，webApp轮播效果，支持手机上用手左右滑动的效果，因为手机的触摸事件和PC端用鼠标操作的事件是不同的，所以我就需要针对移动端的设备触摸事件做相应的轮播特效。大家可以去看下易迅的：http://m.yixun.com/t/ 和淘宝的http://m.taobao.com/ 他们的轮播刚刚就是针对手机做的，在手机观看下你触摸滑动屏幕就可以切换幻灯片。
支持手机触摸滑动图片轮播
01-05
插件描述：支持手机触摸滑动图片幻灯片轮播切换代码. 参考示例：http://www.jq22.com/jquery-info5440
微信小程序——滑块视图容器swiper（轮播图）
weixin_61972561的博客
05-15 462
微信小程序——滑块视图容器swiper（轮播图）
DOM节点的一些常见操作
TianGog的博客
10-10 363
DOM（document object model,文档对象模型）是JS操作HTML文档的接口，使文档操作变得非常优雅简便
JS常用插件 Swiper插件 实现轮播图
最新发布
christmassss的博客
01-15 2808
Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架中文官网地址:点击查看Swiper演示，里面的功能和样式十分丰富，根据自己的需求选择确认插件实现的功能去官网查看使用说明下载插件打开demo实例文件，查看需要引入的相关文件，并且引入复制demo实例文件中的结构html，样式css以及js代码。
Js原生实现无缝滑动轮播图(完整功能)
热门推荐
sxjit的博客
03-24 1万+
实现轮播图是前端学习的一门必修课，也是用来训练js能力。今天我用原生js写了个轮播图，包含无缝衔接、指示器、左右控制器等功能，跟大家分享。先看看效果图： 1. 设计html+css部分 结构很简单，图片部分用ul作容器(本人习惯ul，你们也可以div)，flex布局让里面的li排成一排，因为我们要做的是滑动效果而不是简单显隐。注意，要在最后另外多一个li存放第一张图，这是为了后面实现无缝轮播。 ...
Vue中如何实现轮播图、滑块选择器
Java徐师兄的博客
06-13 2822
},},})},<p>当前值：{{ value }}</p>
创建轮播（Swiper）
01-09 1724
组件提供滑动轮播显示的能力。Swiper本身是一个容器组件，当设置了多个子组件后，可以对这些子组件进行轮播显示。通常，在一些应用首页显示推荐的内容时，需要用到轮播显示的能力。
JavaScript实现左滑动轮播图效果
轮播图的核心在于利用CSS控制图片的定位和显示，而JavaScript则负责图片的自动切换和用户交互功能。" 在实现滑动式轮播图时，首先需要理解其基本原理。轮播图通常包含一系列相同大小的图片，这些图片在HTML结构中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值