js 无缝轮播/原型方法封装

最新推荐文章于 2021-01-06 10:13:16 发布
最新推荐文章于 2021-01-06 10:13:16 发布
阅读量118 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42448623/article/details/102781655
版权

文章目录

无缝轮播

<!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: 0;
            list-style: none;
        }
        .flex{
            display: flex;
        }
        .com{   
            width: 400px;
            height: 200px;
            margin: 100px auto;
            position: relative;
            border: 1px solid black;
            overflow: hidden;
        }
        .sliderPage{
            height: 100%;
            position: absolute;
            top: 0;
            left: -400px;
            transition: all .3s;
        }
        .sliderPage li,
        .sliderPage img{
            width: 400px;
            height: 100%;
        }
        .cut{
            position: absolute;
            top: 50%;
            left: 0;
            height: 0;
            width: 100%;
            justify-content: space-between;
        }
        .cut div{
            height: 40px;
            width: 30px;
            line-height: 40px;
            text-align: center;
            margin-top: -20px;
            color: white;
            background-color: rgba(0, 0, 0, .4);
            cursor: pointer;
        }
        .dots{
            position: absolute;
            bottom: 10px;
            left: 0;
            width: 100%;
            justify-content: center;
        }
        .dots li{
            width: 10px;
            height: 10px;
            margin: 0 5px;
            border-radius: 50%;
            background-color: gray;
            cursor: pointer;
        }
        .dots li.dotsAct{
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div class="com">
        <ul class="sliderPage flex">
            <!-- 最后一张图片 -->
            <li><img src="./img/cat4.jpg" alt=""></li>

            <!-- 真正的图片列表 -->
            <li><img src="./img/cat1.jpg" alt=""></li>
            <li><img src="./img/cat2.jpg" alt=""></li>
            <li><img src="./img/cat3.jpg" alt=""></li>
            <li><img src="./img/cat4.jpg" alt=""></li>

            <!-- 第一张图片 -->
            <li><img src="./img/cat1.jpg" alt=""></li>
        </ul>
        <div class="cut flex">
            <div class="prev"><</div>
            <div class="next">></div>
        </div>
        <ul class="dots flex">
            <li data-index='1' class="dotsAct"></li>
            <li data-index='2' class=""></li>
            <li data-index='3' class=""></li>
            <li data-index='4' class=""></li>
        </ul>
    </div>
    <script>
        let sliderPage = document.querySelector('.sliderPage')
            prev = document.querySelector('.prev')
            next = document.querySelector('.next')
            dots = document.querySelector('.dots')
            timer = null
            index = 1
            initdirection = 'right' // 初始方向
            direction = 'right' // 运动时方式
            isMove = true
            len = sliderPage.children.length - 1
            moveWidth = sliderPage.children[0].clientWidth 
        
        autoPlay()
        function autoPlay(){
            timer = setInterval(()=>{
                direction = initdirection
                direction === 'right' ? index++ : index--
                autoMove()
            }, 1000);
        }
        function autoMove(){
            isMove = false
            let move = index * moveWidth
            sliderPage.style.transition = 'all .3s'
            sliderPage.style.left = -move + 'px'
            dotsHandle(index)
        }
        
        function dotsHandle(i){
            let ls = i-1
            let dlen = dots.children.length - 1
            ls = ls < 0 ? dlen : ls
            ls = ls > dlen ? 0 : ls
            Object.values(dots.children).forEach((el, index) => {
                el.classList.remove('dotsAct')
                if(ls === index){
                    el.classList.add('dotsAct')
                }
            });
        }
       
        sliderPage.addEventListener('transitionend',function(){
            console.log(index)
            if(index >= len && direction == 'right'){ // 最后一张 方向 向后
                sliderPage.style.transition = 'none'
                sliderPage.style.left = -moveWidth+'px' // 最后一张就切换到第一张
                index = 1
            }
            if(index <= 0 && direction == 'left'){ // 向前移动 到第一张 向前
                sliderPage.style.transition = 'none'
                sliderPage.style.left = -moveWidth*(len-1) +'px' 
                index = len-1
            }
            isMove = true
        })

        dots.onclick = function(e){
            let target = e.target
            if(target.nodeName == 'LI'){
                clearInterval(timer)
                index = target.dataset.index
                autoMove()
                autoPlay()
            }
        }

        prev.onclick = function(){
            if(!isMove) return
            clearInterval(timer)
            direction = 'left'
            index--
            autoMove()
            autoPlay()
        }
        next.onclick = function(){
            if(!isMove) return
            clearInterval(timer)
            direction = 'right'
            index++
            autoMove()
            autoPlay()
        }



    </script>
</body>
</html>

原型方法封装

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        
        .flex {
            display: flex;
        }

        .div {
            width: 400px;
            height: 200px;
            margin: 100px auto;
            position: relative;
            border: 1px solid black;
            overflow: hidden;
        }

        .sliderPage {
            height: 100%;
            position: absolute;
            top: 0;
            left: -400px;
            transition: all .3s;
        }

        .sliderPage li,
        .sliderPage img {
            width: 400px;
            height: 100%;
        }

        .cut {
            position: absolute;
            top: 50%;
            left: 0;
            height: 0;
            width: 100%;
            justify-content: space-between;
        }

        .cut div {
            height: 40px;
            width: 30px;
            line-height: 40px;
            text-align: center;
            margin-top: -20px;
            color: white;
            background-color: rgba(0, 0, 0, .4);
            cursor: pointer;
        }

        .dots {
            position: absolute;
            bottom: 10px;
            left: 0;
            width: 100%;
            justify-content: center;
        }

        .dots li {
            width: 10px;
            height: 10px;
            margin: 0 5px;
            border-radius: 50%;
            background-color: gray;
            cursor: pointer;
        }

        .dots li.dotsAct {
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <div class="div"></div>
    <script>
        HTMLDivElement.prototype.createTurnPage = function (option) {
            
            const {
                imgArr,
                isDots,
                isCut
            } = Object.assign({
                // 默认配置
                imgArr: [],
                isDots: true, // 是否需要小点
                isCut: true, // 是否需要左右切换
            }, option)
            const leng = imgArr.length

            // 创建图片容器
            const imgCon = creataEl('ul',['sliderPage','flex'])
            let lisArr = [imgArr[imgArr.length-1],...imgArr,imgArr[0]]
            lisArr.forEach(item=>{
                let li = creataEl('li')
                li.appendChild(creataEl('img',null,null,{src:item}))
                // creataEl('li').creataEl('img',null,null,{src:item}) li直接被img覆盖？？
                imgCon.appendChild(li)
            })
            this.appendChild(imgCon)

            // 创建切换部分
            const cut = creataEl('div',['cut','flex'])
            const prev = creataEl('div',['prev'])
            const next = creataEl('div',['next'])
            prev.innerHTML = '<'
            next.innerHTML = '>'
            cut.appendChild(prev)
            cut.appendChild(next)
            if(isCut) this.appendChild(cut)

            // 创建点部分
            const dots = creataEl('ul',['dots','flex'])
            if(isDots){
                imgArr.forEach((s,i)=>{
                    let classList = []
                    if(i == 0) classList.push('dotsAct')
                    dots.appendChild(creataEl('li',classList,null,{'data-index':i+1}))
                })
                this.appendChild(dots)
            }
            
            // 轮播图运行
            turnPage(imgCon, prev, next, dots)
            function turnPage(sliderPage, prev, next, dots){
                let timer = null
                    index = 1
                    initdirection = 'right' // 初始方向
                    direction = 'right' // 运动时方式
                    isMove = true
                    len = sliderPage.children.length - 1
                    moveWidth = sliderPage.children[0].clientWidth 
                   
                autoPlay()
                function autoPlay(){
                    timer = setInterval(()=>{
                        direction = initdirection
                        direction === 'right' ? index++ : index--
                        autoMove()
                    }, 1000);
                }
                function autoMove(){
                    isMove = false
                    let move = index * moveWidth
                    sliderPage.style.transition = 'all .3s'
                    sliderPage.style.left = -move + 'px'
                    dotsHandle(index)
                }
                
                function dotsHandle(i){
                    let ls = i-1
                    let dlen = dots.children.length - 1
                    ls = ls < 0 ? dlen : ls
                    ls = ls > dlen ? 0 : ls
                    Object.values(dots.children).forEach((el, index) => {
                        el.classList.remove('dotsAct')
                        if(ls === index){
                            el.classList.add('dotsAct')
                        }
                    });
                }
            
                sliderPage.addEventListener('transitionend',function(){
                    if(index >= len && direction == 'right'){ // 最后一张 方向 向后
                        sliderPage.style.transition = 'none'
                        sliderPage.style.left = -moveWidth+'px' // 最后一张就切换到第一张
                        index = 1
                    }
                    if(index <= 0 && direction == 'left'){ // 向前移动 到第一张 向前
                        sliderPage.style.transition = 'none'
                        sliderPage.style.left = -moveWidth*(len-1) +'px' 
                        index = len-1
                    }
                    isMove = true
                })
                dots.onclick = function(e){
                    let target = e.target
                    if(target.nodeName == 'LI'){
                        clearInterval(timer)
                        index = target.dataset.index
                        autoMove()
                        autoPlay()
                    }
                }
                prev.onclick = function(){
                    if(!isMove) return
                    clearInterval(timer)
                    direction = 'left'
                    index--
                    autoMove()
                    autoPlay()
                }
                next.onclick = function(){
                    if(!isMove) return
                    clearInterval(timer)
                    direction = 'right'
                    index++
                    autoMove()
                    autoPlay()
                }
            }

            /**
             * 创建dom
             * @param {String} nodeName 节点名称 
             * @param {Array} classList class列表
             * @param {Object} styleObj 样式对象
             * @param {Object} propObj 固有属性对象
             */
            function creataEl(nodeName, classList=[], styleObj={}, propObj={}){
                const node = document.createElement(nodeName)
                node.classList = classList ? classList.join(" ") : ''
                styleObj && Object.keys(styleObj).forEach(key => {
                    let rkey = kaseSmallHump(key) // 处理 background-color
                    node.style[rkey] = styleObj[key]
                });
                propObj && Object.keys(propObj).forEach(key => {
                    if(key.indexOf('data-') != -1){ // 处理data-属性
                        let str = key.split('data-')[1]
                        let rstr = kaseSmallHump(str)
                        node.dataset[rstr]  = propObj[key]
                    }else{
                        node[key] = propObj[key]
                    }
                    
                })
                return node
            }

            // 短横杠兼容 -> 小驼峰
            function kaseSmallHump(str){
                return str.replace(/-\w/g,function($){
                    return $.split('')[1].toLocaleUpperCase()
                })
            }
        }

        const div = document.getElementsByClassName('div')[0]
        div.createTurnPage({
            imgArr: [
                "./img/cat1.jpg",
                "./img/cat2.jpg",
                "./img/cat3.jpg",
                "./img/cat4.jpg"
            ]
        })
    </script>
</body>

</html>
tianmeng1999
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生js无缝轮播插件使用详解
12-28
这篇博文主要讲如何使用原生js来实现一个兼容 IE9+ 的无缝轮播图。主要知识点如下： 面向对象 js优化之节流函数 js运动 效果 html结构 5 1 <li class=slider style=background:bei
原型封装轮播图
zyhyouGOD的博客
12-25 219
只要用dom元素调用这个方法，传一个数组进去，里面放的是图片的路径。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <
原生JS实现无缝滚动轮播图
03-11
原生JS实现无缝滚动轮播图，使用相对定位进行无缝滚动，五张图的轮播只需五张图
js实现无缝轮播图插件封装
10-15
主要为大家详细介绍了js实现无缝轮播图插件封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
原生js封装无缝轮播功能
qq_46239972的博客
01-06 193
原生js封装无缝轮播插件 说明： 这是一个使用原生js、es5语法写出的无缝轮播程序，代码中对相关api进行了封装，使得在引入该轮播js文件后，只需要在自己的js文件中添加两行代码即可在网页中实现一个基本的无缝轮播图效果。 基本使用步骤为：获取dom元素数组、向轮播对象中传参、轮播对象调用自动轮播方法。 除基本的定时器自动轮播功能外，该程序还支持设置过渡动画时间、设置鼠标移入元素自动轮播停止、设置点击左右侧边按钮时轮播、设置点击下方按钮时轮播功能。 该程序不需要依赖css、html文件、但需要你的css、h
原生js实现无缝轮播图
10-15
【原生JS实现无缝轮播图】是一种常见的网页动态效果，用于展示一组连续的图片或内容，给用户带来流畅的视觉体验。本文将详细介绍如何利用JavaScript实现这一功能，并提供具体的代码示例。 首先，理解无缝轮播图的...
VUE 3D轮播图封装实现方法
01-19
本文为大家分享了VUE 3D轮播图封装的具体代码，供大家参考，具体内容如下 一、体验地址 VUE 3D轮播图 二、实现功能点 （1）、无缝轮播 （2）、进入变大、离开缩小（类3d切换效果） 三、js代码 <!--轮播图...
css轮播图_浅谈无缝轮播图插件封装
weixin_39932479的博客
11-27 201
页面中轮播图，对于一个前端开发者来说，是最基本的技能，不论是的商城网站，还是企业站，轮播图已经成为不可缺少的一个模块，而常见的轮播图不外乎两种，一种是渐隐渐现轮播图，一种是无缝轮播图。网上关于轮播图的插件也有很多，但是用人家的代码总会出现各种各样的bug，我们修改bug往往要耗费很多时间，而且有些插件的效果还不符合我们的需求，那么我们该如何封装一个自己的轮播插件呢？这就是今天要分享的内容——封装轮...
纯原生JS写封装左右无缝链接轮播图插件(完整代码及注释，可参考可直接使用)
mister、奎
06-24 1080
（前言：小编也是一个刚入行的小白，所以写不出来多么高深的东西，若有错误欢迎指证或者其他的什么相互验证，但是不接受大神的鄙视，谢谢，转载请注明出路） css body,div,ul,li,a,p{ margin: 0; padding: 0; -webkit-user-select: none; } li{ list-style: none; } .Banner1{ margin: 20px a...
js面向对象---无缝轮播图（附面向过程代码）
sweetllh的博客
06-29 1986
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> <style type="text/css"> *{ padding: 0; margin: 0;
微信小程序书店（微信端）+源代码+演示视频.zip
09-04
互联网发展至今，无论是其理论还是技术都已经成熟，而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播，搭配信息管理工具可以很好地为人们提供服务。针对高校教师成果信息管理混乱，出错率高，信息安全性差，劳动强度大，费时费力等问题，采用微信小程序书店可以有效管理，使信息管理能够更加科学和规范。 微信小程序书店使用Java语言进行编码，使用Mysql创建数据表保存本系统产生的数据。系统可以提供信息显示和相应服务，其管理微信小程序书店信息，查看微信小程序书店信息，管理微信小程序书店。 总之，微信小程序书店集中管理信息，有着保密性强，效率高，存储空间大，成本低等诸多优点。它可以降低信息管理成本，实现信息管理计算机化。 关键词：微信小程序书店；Java语言；Mysql
用户调研问题清单SOP（以燕窝行业为例）.xlsx
09-04
用户调研问题清单SOP（以燕窝行业为例）
jquery swiper插件使用案例demo.rar
09-04
Swiper是一个纯JavaScript打造的滑动特效插件，面向手机、平板电脑等移动终端，同时也支持桌面浏览器。Swiper开源、免费、稳定、使用简单且功能强大，是架构移动终端网站的重要选择。 【加载插件】 首先加载插件，需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件，不同Swiper版本用到的文件名略有不同。可下载Swiper文件或使用CDN。 使用Swiper插件的步骤主要包括以下几个部分： ‌1、下载Swiper插件‌：首先，需要从Swiper的官网(https://swiper.com.cn/)下载Swiper插件。官网提供了多种版本的下载链接，包括压缩版和未压缩版，以及包含动画效果的版本等，可以根据项目需求选择合适的版本下载。 ‌2、引入Swiper文件‌：下载完成后，将Swiper的CSS和JS文件引入到项目中。通常，这两个文件分别是swiper-bundle.min.css和swiper-bundle.min.js（文件名可能因版本而异）。例如，在HTML中引入这些文件的代码
A New Semantic Similarity Scheme for more Accurate
09-04
A New Semantic Similarity Scheme for more Accurate
2019-2021office2019-2021office
09-04
2019-2021office2019-2021office
cdr x4 菜单透明修复补丁
09-04
cdr x4 菜单透明修复补丁， 按照里面的说明放置就能解决这个问题
解聘通知书.doc
最新发布
09-04
解聘通知书
无人机航拍红外人车识别数据集
09-04
YOLO与VOC格式的无人机航拍红外人车识别数据集，适用于YOLO系列、Faster Rcnn、SSD等模型训练，共5个类别，Person、Car、Bicycle、OtherVehicle、DontCare，图片数量2866。文件中包含图片、txt标签、指定类别信息的yaml文件、xml标签，已将图片和txt标签划分为训练集、验证集和测试集，可直接用于YOLOv5、YOLOv6、YOLOv7、YOLOv8、YOLOv9、YOLOv10等YOLO系列算法的训练。
原生JavaScript打造无缝轮播图示例与封装
文档标题“无缝轮播图-原生js封装”表明了主要内容围绕着使用JavaScript编写代码来创建一个具有平滑过渡和连续显示图片的轮播组件。 首先，HTML部分定义了文档的基本结构，设置了`lang`属性为`en`，表示英语版本。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值