js进阶，轮播图实现原理（附可运行源码）

在网页的广告中，常常存在使用js代码实现图片轮播功能，在电商类网站中常遇到的开发任务，轮播广告效果通常的应用场景：企业宣传、产品促销、大事记展示等等。下面用精简的100多行的代码实现了5图轮播广告效果，当然，下面代码使用一种原生js的写法(还会有jquery的写法，vue的写法等)。作为js的进阶，原生写法可以锻炼js的编程水平，及html,css，js 的混合编程能力。当然也可将下列代码用在公司的现实开发场景中，减少编码时间。

代码效果:

附代码及其讲解：

图1

上图为文件的目录结构。建立img文件夹，并新建demo.html文件。

图2

图3

图4

图5

从第6行到77行结束为页面的css代码。此处css 主要是标签选择器，类选择器，及其属性与值，看不懂的，需学习css基础教程。

图6

上图中，79行的window.onload该方法用于在网页加载完毕后立刻执行的操作,即当html加载完毕后,立刻执行functiona()方法，80行到84行中的documnet.getElementById()是获取页面需要操作的元素(这句看不懂的需要，重新学习javascript基础教程)。80行是为取得轮播图父容器，81行是为取得图片列表。82行是获取图片切换圆点按钮组。83，84行为向左和向右侧切换箭头。此段js 涉及主要知识点是DOM事件和定时器的用法。88行获取的是style.left，是相对左边获取距离，所以第一张图后style.left都为负值，且style.left获取的是字符串，需要用parseInt()取整转化为数字。90行是无限滚动判断。

图7

此图中106行是重复执行的定时器

图8

此图中131行这里获得鼠标移动到小圆点的位置，用this把index绑定到对象buttons[i]上，去搜索js中this的用法。由于这里的index是自定义属性，需要用到getAttribute()这个DOM2级方法，去获取自定义index的属性，133行这个index是当前图片停留时的index。

图9

图9中145行166行为html代码。147行定义了一个容器holder，为了包含要展示的图片与按钮相关元素。以上代码轮播图主要原理是通过改变图片的偏移量来实现图片的切换。

东西，都值得被分享！这次给小伙伴们分享一个超强的css3属性 CSS Scroll Snap 实现轮播图功能。

vue-snap 基于 CSS Scroll Snap 实现轻量级轮播图组件。支持单个/多个滚动，不规则大小滚动及懒加载滚动，适配移动端。

特性

轻量级（比其他libs轻5-10倍）
没有计算或复杂的逻辑（性能）
大部分功能仅需css就可实现
自由设置需要显示的轮播图数量
完全自适应

CSS Scroll Snapping 简单用法

为了更方便学习和了解更多用法，为大家搜集了如下两个网址。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap
https://css-tricks.com/practical-css-scroll-snapping/

安装

$ npm i vue-snap -S

全局引入

import Vue from 'vue'
import VueSnap from 'vue-snap'
import 'vue-snap/dist/vue-snap.css'

Vue.use(VueSnap)

局部引入

import { Carousel, Slide } from 'vue-snap'
import 'vue-snap/dist/vue-snap.css'

export default {
  components: {
    Carousel,
    Slide
  }
}

提供各种演示实例及API说明

附上文档演示及仓库地址

# 文档地址
https://bartdominiak.github.io/vue-snap/

# 示例地址
https://vue-snap.vercel.app/

# 仓库地址
https://github.com/bartdominiak/vue-snap

ok，今天就分享到这里。感兴趣的同学可以去尝鲜下哈，欢迎一起留言讨论。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript 移动端轮播——原生</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
*{
    margin: 0;
    padding: 0px;
    list-style: none;
}
div{
    width: 100%;
    height: 66vw;
    overflow: hidden;
    position: relative;
}
div>ul{
    width: 1000%;
    height: 66vw;
    position: absolute;
    left: 0;
    top: 0;
}
div>ul>li{
    width: 10%;
    height: 66vw;
    float: left;
}
div>ul>li>img{
    width: 100%;
}
div>ol{
    position: absolute;
    left: 50%;
    bottom: 2vw;
    transform: translateX(-50%);
}
div>ol>li{
    width: 3vw;
    height: 3vw;
    float: left;
    margin: 1vw;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.5);
}
div>ol>li.active{
    background-color: orange;
}
</style>
</head>
<body>
<div>
<ul>
<li><img src="img/1.jpeg" alt="" /></li>
<li><img src="img/2.jpeg" alt="" /></li>
<li><img src="img/3.jpeg" alt="" /></li>
<li><img src="img/4.jpeg" alt="" /></li>
<li><img src="img/5.jpeg" alt="" /></li>
<li><img src="img/1.jpeg" alt="" /></li>
<li><img src="img/2.jpeg" alt="" /></li>
<li><img src="img/3.jpeg" alt="" /></li>
<li><img src="img/4.jpeg" alt="" /></li>
<li><img src="img/5.jpeg" alt="" /></li>
</ul>
<ol>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<script type="text/javascript">
    //求可视区的宽度
    var w = document.documentElement.clientWidth || document.body.clientWidth;
    //获取ul
    var ul = document.getElementsByTagName("ul")[0];
    //获取下面的点点点
    var lis = document.querySelectorAll("ol>li");
    //声明两个变量存储手指按下时到可视区的距离和ul的left值
    var startX,offsetLeft;
    //手指按下
    ul.addEventListener("touchstart",function(e){
    //把上一次手指抬起时加的过渡效果取消
    ul.style.transition = "none";

    console.log("啊啊啊啊啊")
    //手指按下时我做一个判断看看你当前在第几张图
    if(ul.offsetLeft===0){//第一套的第一张图
        ul.style.left = -5*w+"px";//第二套的第一张去
    }else if(ul.offsetLeft === -9*w){//第二套的第五张图
        ul.style.left = -4*w + "px";//调到第一套的第5张去
    }

    var ev = e || window.event;
    //求得手指到可视区的距离
    startX = ev.touches[0].clientX;
    //把ul的left值计算一下
    offsetLeft = ul.offsetLeft;
    //因为浏览器有一些默认行为(比如手指触摸会使网页前进后退)
    ev.preventDefault();
    },false)
    //手指移动
    ul.addEventListener("touchmove",function(e){
        var ev = e || window.event;
        //求得移动式手指到可视区的距离
        var moveX = ev.touches[0].clientX;
        //真实的ul的left值
        var left = moveX - startX + offsetLeft;
        ul.style.left = left + "px";
        //因为浏览器有一些默认行为
        ev.preventDefault();
        },false)
        //手指抬起
        ul.addEventListener("touchend",function(){
        var num = Math.round(ul.offsetLeft/w);
        for(var i=0;i<lis.length;i++){
        		lis[i].className = "";
        }
        //因为此处是两套图%5
        lis[Math.abs(num)%5].className = "active";

        //当手指抬起时我让他自动滑到第一张 注意加一个过渡
        ul.style.transition = "0.5s";
        ul.style.left = num * w + "px";
    },false)
</script>
</body>
</html>

片规格: 665px * 444px

在线咨询

上一篇：css隐藏内容样式方法（自适应页面常用）
下一篇：网页WEB集成IP视频监控不是梦，0基础不懂编程？你也可以做到

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

js进阶，轮播图实现原理（附可运行源码）

您的项目需求