原生js实现简单轮播图效果

本文实例为大家分享了js实现简单轮播图效果的具体代码,供大家参考,具体内容如下

效果如下:

分析:

分析效果:

分析实现:

1、通过 document.querySelector('.类名') 的形式获取到装轮播图的大盒子(.carousel)、装轮播图左右按钮的标签的父元素(.chevron)、获取左右按钮(.chevron-left 、.chevron-right)、获取放轮播图图片的父元素ul(.carousel-body)【注:这里获取ul而不是回去li,是因为移动轮播图的时候是整个ul一起移动的】、最后还要获取装轮播图图片的li(.indicators  li)

//装轮播图的大盒子
let oCarousel = document.querySelector('.carousel')
//装轮播图左右按钮的标签的父元素
let oChevron = document.querySelector('.chevron')
//左按钮
let oLeft = document.querySelector('.chevron-left')
//右按钮
let oRight = document.querySelector('.chevron-right')
//获取放轮播图图片的父元素ul
let oUl = document.querySelector('.carousel-body')
//获取装轮播图图片的li
let oActives = document.querySelectorAll('.indicators li')

2、实现通过点击左右按钮使轮播图实现上一张、下一张的效果:

先封装一个animation()函数,便于多次调用

function animation(obj,target){
    // 清除定时器
        clearInterval(obj.timer)
        obj.timer=setInterval(()=>{
            // 读取元素当前位置
            let curX=obj.offsetLeft

            //定义一个步长
            let step=10
            // 判断将要移动的方向(比较目标位置与当前位置的大小)
            if(target<curX){
                step=-10
            }
            // 根据当前位置与目标位置,以及步长的关系判断
            // 只要目标位置与当前位置之间的距离 < 步长,就直接将元素的位置设置为目标为位置即可
            if(Math.abs(target-curX)<Math.abs(step)){
                obj.style.left=target+'px'
                clearInterval(obj.timer)
            }else{
                // 计算下一步的位置
                let nextX=curX+step
                // 将下一步的位置赋值给obj.style.left
                obj.style.left=nextX+'px'
            }
        },10)
    }

①由于鼠标移入轮播图的时候前,轮播图中的左右箭头是隐藏的,当鼠标移入时显示;因此需要为装轮播图的大盒子(.carousel)绑定鼠标移入(onmouseover)和鼠标移出事件(onmouseout)

oCarousel.onmouseover = function () {
        oChevron.style.display = "block"
    }

    oCarousel.onmouseout = function () {
        oChevron.style.display = "none"
    }

②为左右按钮绑定点击事件,定义一个计数器全局变量n,代表轮播图中图片的位置,因为这里一个li的大小为500px,所以设置一个全局变量步长step为500(步长作为每次移动轮播图中ul的距离)

let n = 0
let step = 500
    oLeft.onclick = function () {
        n--

        if (n == -1) {
       //当移到第一张(n=0),再次点击时(n=-1),将n设置为4,跳转到最后一张图片的位置
       //装轮播图图片的ul的位置改为最后一张图片的位置(因为一张图片width为500px,所以最后一张在5*500=2500的位置)
            oUl.style.left = -2500 + 'px'
            n = 4
        }
        //target为移动距离,即:第n张图片 * 每张图片的width
        let target = -n * step
        animation(oUl, target)

    }
    oRight.onclick = function () {
        n++
        if (n == 6) {
        //当移到第最后一张(n=5),再次点击时(n=6),将n设置为1,跳转到第一张图片的位置
            oUl.style.left = 0 + 'px'
            n = 1
        }
        let target = -n * step
        animation(oUl, target)

    }

3、通过点击下面的数字来实现轮播图切换

//因为上面通过document.querySelectorAll('.indicators li') 获取到的li是通过伪数组的形式返回的,使用需要遍历该伪数组为每个li绑定点击事件
for (let i = 0; i < oActives.length; i++) {
        oActives[i].onclick = function () {
            //为被点击的第i个设置样式为高亮
            setActive(i)
            //并且把i的值赋值给n(相当于记录当前应该显示第i张图片)
            n = i
            //设置移动的距离
            let target = -n * step
            animation(oUl, target)
        }
    }

    // 封装一个函数,实现li的高亮
    function setActive(ind) {
        //使用排他思想:清除全部,然后在单独设置类名
        for (let j = 0; j < oActives.length; j++) {
            oActives[j].className = ''
        }
        oActives[ind].className = 'active'
    }

修改第2步中点击左右箭头滑动轮播图下面页面高亮不变的情况

oLeft.onclick = function () {
        n--
        if (n == -1) {
            oUl.style.left = -2500 + 'px'
            n = 4
        }
        //调用setActive()函数,修改第n张图片页码的高亮状态
        setActive(n)
        let target = -n * step
        animation(oUl, target)

    }
    oRight.onclick = function () {
        n++
        if (n == 6) {
            oUl.style.left = 0 + 'px'
            n = 1
        }
        //如果n为5时,表示已经到了第6张图片(而第六张图片是和第1张一样的,只是用来滑动过渡,防止瞬间跳转的效果)所以需要设置页码为0(即第一张图片)的高亮状态
        //这里使用了三元表达式,如果n为5,则设置第1张图片为高亮,否则设置第n张为高亮
        n == 5 ? setActive(0) : setActive(n)
        let target = -n * step
        animation(oUl, target)

    }

4、设置定时器,在移入轮播图时清除定时器,移出时开启定时器(实现移入时停止自动播放,移出时开启自动播放)

//在加载页面时应该先开启定时器,否则轮播图不能自动播放,需要等待一次移入且移出事件才会开启定时器
timer = setInterval(function () {
            //调用右侧按钮绑定的点击事件
            oRight.onclick()
        }, 2000)

    //鼠标移入时,显示左右箭头,并且清除定时器
    oCarousel.onmouseover = function () {
        oChevron.style.display = "block"
        clearInterval(timer)
    }

    //鼠标移出时,隐藏左右箭头,并且开启定时器
    oCarousel.onmouseout = function () {
        oChevron.style.display = "none"
        timer = setInterval(function () {
            oRight.onclick()
        }, 2000)
    }

完整代码如下:

CSS样式如下:

* {
     margin: 0;
     padding: 0;
        }

        .carousel {
            width: 500px;
            height: 200px;
            border: 1px solid red;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }
        .carousel li {
            list-style: none;
        }

        /* 轮播内容 */
        .carousel-body {
            width: 3000px;
            height: 200px;
            position: absolute;
        }
        .carousel-body li {
            list-style: none;
            float: left;
            width: 500px;
            height: 200px;
        }

        .carousel-body li img {
            width: 100%;
            height: 100%;
        }

        /* 左右焦点按钮 */
        .carousel .chevron {
            position: absolute;
            top: 50%;
            height: 40px;
            width: 100%;
            transform: translateY(-50%);
            display: none;
        }

        .carousel .chevron-left,
        .carousel .chevron-right {
            width: 40px;
            height: 40px;
            background: #000;
            cursor: pointer;
            text-align: center;
            line-height: 40px;
            font-size: 30px;
            font-weight: bold;
            color: #fff;
            opacity: .3;
            border: 1px solid #fff;
        }

        .carousel .chevron-left {
            float: left;
            margin-left: 10px;
        }

        .carousel .chevron-right {
            float: right;
            margin-right: 10px;
        }

        /* 5.2 轮播指示器结构 */
        .carousel .indicators {
            position: absolute;
            right: 30px;
            bottom: 20px;
        }

        .carousel .indicators li {
            float: left;
            width: 20px;
            height: 20px;
            margin-right: 10px;
            background: rgba(255, 255, 255, .8);
            text-align: center;
            line-height: 20px;
            cursor: pointer;
            color: rgba(0, 0, 0, .5);
        }

        .carousel .indicators li.active {
            background: #09f;
            color: red;
 }

HTML如下:

<div class="carousel">
        <!-- 轮播内容 -->
        <ul class="carousel-body">
            <li><a href="#"><img src="./images/1.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/2.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/3.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/4.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/5.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/1.jpg" alt=""></a></li>
            <!-- a3.1 新增1个li与第1张相同 -->
            <!-- <li><a href="#"><img src="./images/1.jpg" alt=""></a></li> -->
        </ul>
        <!-- 左右焦点按钮 -->
        <div class="chevron">
            <div class="chevron-left">&laquo;</div>
            <div class="chevron-right">&raquo;</div>
        </div>
        <!-- 5.1 轮播指示器结构 -->
        <ol class="indicators">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
</div>

js如下:

let oCarousel = document.querySelector('.carousel')
let oChevron = document.querySelector('.chevron')
let oLeft = document.querySelector('.chevron-left')
let oRight = document.querySelector('.chevron-right')
let oUl = document.querySelector('.carousel-body')
let oActives = document.querySelectorAll('.indicators li')

    let n = 0
    let step = 500
    let timer
    timer = setInterval(function () {
            oRight.onclick()
        }, 2000)
    oCarousel.onmouseover = function () {
        oChevron.style.display = "block"
        clearInterval(timer)
    }

    oCarousel.onmouseout = function () {
        oChevron.style.display = "none"
        timer = setInterval(function () {
            oRight.onclick()
        }, 2000)
    }
    oLeft.onclick = function () {
        n--
        if (n == -1) {
            oUl.style.left = -2500 + 'px'
            n = 4
        }
        setActive(n)
        let target = -n * step
        animation(oUl, target)

    }
    oRight.onclick = function () {
        n++
        if (n == 6) {
            oUl.style.left = 0 + 'px'
            n = 1
        }
        n == 5 ? setActive(0) : setActive(n)
        let target = -n * step
        animation(oUl, target)

    }
    for (let i = 0; i < oActives.length; i++) {
        oActives[i].onclick = function () {
            setActive(i)
            n = i
            let target = -n * step
            animation(oUl, target)
        }
    }

    // 封装一个函数,实现li的高亮
    function setActive(ind) {
        for (let j = 0; j < oActives.length; j++) {
            oActives[j].className = ''
        }
        oActives[ind].className = 'active'
    }

    function animation(obj,target){
        // 清除定时器
        clearInterval(obj.timer)
        obj.timer=setInterval(()=>{
            // 读取元素当前位置
            let curX=obj.offsetLeft

            //定义一个步长
            let step=10
            // 判断将要移动的方向(比较目标位置与当前位置的大小)
            if(target<curX){
                step=-10
            }
            // 根据当前位置与目标位置,以及步长的关系判断
            // 只要目标位置与当前位置之间的距离 < 步长,就直接将元素的位置设置为目标为位置即可
            if(Math.abs(target-curX)<Math.abs(step)){
                obj.style.left=target+'px'
                clearInterval(obj.timer)
            }else{
                // 计算下一步的位置
                let nextX=curX+step
                // 将下一步的位置赋值给obj.style.left
                obj.style.left=nextX+'px'
            }
        },10)
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 使用JavaScript实现轮播图特效

    本文实例为大家分享了JavaScript实现轮播图特效的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .aaa { width: 600px; height: 350px; position: relative

  • 用js实现轮播图效果

    今天来说一下利用js实现轮播图效果,供大家参考,具体内容如下 思路 1.首先我们要把需要用到的元素获取过来 <div class="all" id='box'> <div class="screen"> <!-- 无序列表 --> <ul> <li><img src="./wf1.jpg" width="500" height="200" /

  • 原生js实现轮播图的示例代码

    很多网站上都有轮播图,但却很难找到一个系统讲解的,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局 如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> </hea

  • js实现点击左右按钮轮播图片效果实例

    本文实例讲述了js实现点击左右按钮轮播图片效果的方法.分享给大家供大家参考.具体实现方法如下: $(function () { var index = 1; var pPage = 1; var $v_citemss = $(".citemss"); var $v_show = $v_citemss.find("ul"); v_width = $v_citemss.width();//图片展示区外围div的大小 //注:若为整数,前边不能再加var,否则会被提示un

  • JavaScript实现简易轮播图最全代码解析(ES6面向对象)

    本文实例为大家分享了JavaScript实现简易轮播图的具体代码,供大家参考,具体内容如下 完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ES6轮播图</title> <script></script> <style> * { margin: 0; padding: 0; } .box { wi

  • JavaScript实现简易轮播图最全代码解析(ES5)

    本文实例为大家分享了JavaScript实现简易轮播图效果的具体代码,供大家参考,具体内容如下 全部代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ES5轮播图</title> <style> * {padding: 0;margin: 0;} #wrapper { position: relative; margin: 5

  • JS轮播图实现简单代码

    本文实例为大家分享了js轮播图实现代码,供大家参考,具体内容如下 思路: 1.首先要有个盛放图片的容器,设置为单幅图片的宽高,且overflow:hidden,这样保证每次可以只显示一个图片 2.Container内有个放图片的list进行position的定位 ,其中的图片采用float的方式,同时当图片进行轮播时,改变list的Left值使得其显示的图片发生变化. 3.图片的轮播使用定时器,通过定时器改变list的Left值是的图片循环展示 4.当鼠标滑动到图片上时,清除定时器,图片停止轮播

  • js实现轮播图的完整代码

    今天写一个完整的轮播图,首先它需要实现三个功能: 1.鼠标放在小圆点上实现轮播 2.点击焦点按钮实现轮播 3.无缝自动轮播 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量(封装一个动画函数)自动播放,或通过手动点击事件切换图片. html布局: <div id="box" class="all"> <div class="inner"> <!-- 相框-->

  • 用JavaScript实现轮播图效果

    本文实例为大家分享了JavaScript实现轮播图效果的具体代码,供大家参考,具体内容如下 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } ul { list-style: non

  • js实现支持手机滑动切换的轮播图片效果实例

    本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu

随机推荐