原生JS实现简单的轮播图效果

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

实现效果:

功能需求:

1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮

2.点击右侧按钮一次,图片往左播放一张,左侧按钮同理。

3.图片播放的同时,下面的小圆圈模块也跟随一起变化。

5.鼠标不经过轮播图,轮播图会自动向右播放图片,经过轮播图之后停止自动播放图片。

轮播图向右移动的时候要用到缓动画的函数,具体见博客:JS实现添加缓动画的方法

(1)布局:轮播图部分的图片用ul进行布局,里面的每个li放a标签,a标签里面再放img;ul需要采用定位,目的是为了后面使用缓动画(要使用缓动画必须有定位),然后ul里面的li都浮动起来在一行显示,ul的宽度可以设置成轮播图宽度的600%(这里只要比400%大就可以,因为这里放的是四张轮播图),然后给轮播图模块设置overflow:hidden就只会展示一张图片了。下面小圆点采用绝对定位,左右两边按钮也采用绝对定位。

(2)功能1:鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮

非常简单,就是给轮播图模块添加mouseenter和mouseleave事件即可。

(3)功能2:根据图片张数动态添加小圆点

通过获得ul里面li的个数来判断一共需要添加多少个小圆点,但是这里要注意,因为后面需要实现轮播图效果,所以最后一张图片放的第一张图片,相当于会比原本的图片多一张,所以这里小圆点生成的个数是图片张数减一,通过document.createElement('li')创建小圆点,然后通过appendChild添加到小圆点列表中。

(4)功能3:点击右侧按钮一次,图片往左播放一张,左侧按钮同理。

这个功能是最复杂的功能,这个功能做好了,后面的自动播放功能就很简单了,那么现在来说说这个功能的思路:

 (5)功能4:图片播放的同时,下面的小圆圈模块也跟随一起变化。

再声明一个变量circle,点击一次按钮,自增1,然后这个变量对应小圆点坐标,把当前坐标的小圆点的类改为current(即变色),但是要注意,在滚动到最后一张图片的时候,因为ul会快速不做动画跳到最左侧,同时把num设置为0,然后再进行num++执行滑动到第二张图片,相当于这一次点击操作执行了两个步骤:滑动到最左侧同时执行缓动画移动到第二张图片,这样看起来就会很顺畅,看起来像是从最后一张图片滚动到第一张图片。但是小圆点并没有最后一张图的坐标,也就是小圆点数量和图片数量并不是相等的,这样就会导致当滑动到最后一张图片(与第一张图片相同的那张图片)的时候小圆点一个都没有选中,所以需要提前判断是否滑动到最后一张,要是滑动到最后一张就把最后一个小圆点的类设置成current。

(6)功能5:点击小圆圈,可以播放相应的图片。

这个功能采用给小圆圈设置自定义属性实现。

(7)功能6:鼠标不经过轮播图,轮播图会自动向右播放图片,经过轮播图之后停止自动播放图片。

这个功能其实就是鼠标离开的时候手动调用点击右边按钮的函数,放上去的时候就清除定时器即可。

完整代码如下:

<!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>轮播图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        a {
            text-decoration: none;
        }
        
        .w {
            overflow: hidden;
            position: relative;
            width: 720px;
            height: 454px;
            margin: 200px auto;
        }
        
        ul li {
            list-style: none;
        }
        
        .main .focus ul {
            position: absolute;
            left: 0;
            top: 0;
            width: 600%;
        }
        
        .main .focus ul li {
            float: left;
        }
        
        .main .focus ul li img {
            width: 720px;
        }
        
        a[class^='arrow'] {
            /* 开始时隐藏箭头 */
            display: none;
            z-index: 1;
            position: absolute;
            cursor: pointer;
            width: 30px;
            height: 50px;
            color: #fff;
            text-align: center;
            line-height: 50px;
            font-weight: 700;
            background-color: rgba(0, 0, 0, .3);
        }
        
        .arrow-left {
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }
        
        .arrow-right {
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }
        
        .main .focus ol {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 10px;
            border-radius: 15px;
            background-color: rgba(255, 255, 255, .5);
        }
        
        .main .focus ol li {
            cursor: pointer;
            float: left;
            margin: 6px 6.5px;
            list-style: none;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: #fff;
        }
        
        .main .focus .current {
            background-color: #f76211;
        }
    </style>
</head>
 
<body>
    <div class="main w">
        <div class="focus">
            <!-- 左边按钮 -->
            <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="arrow-left">&lt;</a>
            <!-- 右边按钮 -->
            <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="arrow-right">&gt;</a>
            <!-- 轮播图部分 -->
            <ul>
                <li>
                    <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><img src="../upload/focus.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><img src="../upload/focus1.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><img src="../upload/focus2.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><img src="../upload/focus3.jpg" alt=""></a>
                </li>
                <!-- 这一张的作用是为了后面做无缝链接 -->
                <li>
                    <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><img src="../upload/focus.jpg" alt=""></a>
                </li>
            </ul>
            <!-- 下面小圆点部分 -->
            <ol class="circle">
            </ol>
        </div>
    </div>
</body>
<script>
    // 滑动函数
    function moves(obj, target, callback) {
        window.clearInterval(obj.timer);
        obj.timer = window.setInterval(function() {
            var step = (target - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (obj.offsetLeft == target) {
                window.clearInterval(obj.timer);
                if (callback) {
                    callback();
                }
            } else {
                obj.style.left = obj.offsetLeft + step + 'px';
            }
        }, 15)
    }
    // 移动到图片上的时候左右的箭头才显示出来 离开后又隐藏
    var focusing = document.querySelector('.focus');
    // 获取左箭头
    var arrowleft = document.querySelector('.arrow-left');
    // 获取右箭头
    var arrowright = document.querySelector('.arrow-right');
    var ul = document.querySelector('ul');
    // 获得图片张数
    var len = ul.children.length;
    // 动态生成下面的小圆点
    var ol = document.querySelector('ol');
    for (var i = 0; i < len - 1; i++) {
        var newcircle = document.createElement('li');
        ol.appendChild(newcircle);
    }
    // 把ol里面的第一个li的类名设置成current
    ol.children[0].className = 'current';
    // 收移动到focus的时候显示箭头
    focusing.addEventListener('mouseenter', function() {
            // 鼠标移动到图片的时候清除定时器
            window.clearInterval(timer);
            timer = null;
            arrowleft.style.display = 'block';
            arrowright.style.display = 'block';
 
        })
        // 鼠标离开又隐藏
    focusing.addEventListener('mouseleave', function() {
            // 鼠标离开又重新设置定时器
            // 自动播放轮播图
            timer = window.setInterval(function() {
                // 手动调用点击事件
                arrowright.click();
            }, 2000)
            arrowleft.style.display = 'none';
            arrowright.style.display = 'none';
        })
        // 给每个小圆点设置自定义属性
    for (var i = 0; i < len - 1; i++) {
        ol.children[i].setAttribute('index', i);
    }
    // 点击哪个小圆圈哪个小圆圈就变色 -排他思想
    for (var i = 0; i < len - 1; i++) {
        ol.children[i].addEventListener('click', function() {
            for (var j = 0; j < len - 1; j++) {
                ol.children[j].className = '';
            }
            // 点击第几个小圆点ul就移动小圆点坐标乘以图片宽度
            // alert(-(this.getAttribute('index') * ul.children[0].offsetWidth));
            moves(ul, -this.getAttribute('index') * ul.children[0].offsetWidth)
            num = this.getAttribute('index');
            circle = this.getAttribute('index');
            this.className = 'current';
            // ul.style.left = "-720px";
        })
    }
    // 点击右边箭头 设置一个num进行移动距离
    var num = 0;
    // 点击右边的箭头小圆圈也变色
    var circle = 0;
    arrowright.addEventListener('click', function() {
            if (num == len - 1) {
                ul.style.left = 0;
                num = 0;
                circle = 0
            }
            num++;
            moves(ul, -num * ul.children[0].offsetWidth);
            circle++;
            for (var i = 0; i < len - 1; i++) {
                ol.children[i].className = '';
            }
            // 在加到最后一张重复图片的时候就把第一个圆点变色
            if (circle == len - 1) {
                // alert('haha')
                ol.children[0].className = 'current';
            }
            ol.children[circle].className = 'current';
        })
        // 点击左边箭头
    arrowleft.addEventListener('click', function() {
            if (num == 0) {
                num = len - 1;
                ul.style.left = -num * ul.children[0].offsetWidth;
                circle = len - 1;
            }
            num--;
            moves(ul, -num * ul.children[0].offsetWidth);
            circle--;
            for (var i = 0; i < len - 1; i++) {
                ol.children[i].className = '';
            }
            // 在减到最后一张重复图片的时候就把第一个圆点变色
            if (circle == 0) {
                // alert('haha')
                ol.children[0].className = 'current';
            }
            ol.children[circle].className = 'current';
        })
        // 自动播放轮播图
    var timer = window.setInterval(function() {
        // 手动调用点击事件
        arrowright.click();
    }, 2000)
</script>
 
</html>

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

(0)

相关推荐

  • 原生js实现无限循环轮播图效果

    知识要点 1.实现无限循环的原理: 以偏移的距离来判断是否跳回第一张和最后一张 也可以利用循环判断图片的当前索引值 var newLeft=parseInt(list.style.left)+offset;//当前的偏移量+下一次的偏移量=新的偏移量 list.style.left=newLeft+"px";//当前的偏移值=新的偏移值 //以偏移的距离来判断是否跳回第一张和最后一张 if(newLeft>-600){ list.style.left=-3000+"px

  • 使用html+js+css 实现页面轮播图效果(实例讲解)

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=

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

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

  • JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)

    1.本文使用js+jQuery实现轮播图,需要引用jquery包,另种实现分别是animate实现自适应的轮播,以及transform平滑轮播(在注释代码中). 2.代码中的图片大家自己更换就可以了,样式和逻辑均写在js里. 3.html标签代码,js代码 <div class="slider"> //轮播箭头 <p class="lastpic"><img src="../images/prev.png">&

  • 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

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

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

  • js实现从左向右滑动式轮播图效果

    轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实现第一种效果的方法. 原理 相同大小的图片并成一列,但只显示其中一张图片,其余的隐藏,通过修改left值来改变显示的图片. 点击查看效果 html部分 nav为总容器,第一个ul列表#index为小圆点列表,鼠标覆盖哪个小圆点就显现第几张图片,on是一个给小圆点添加背景颜色属性的类:第二个ul列表#

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

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

  • JS实现左右无缝轮播图代码

    废话不多说了,直接给大家贴代码了. 无缝轮播图: <title>无缝轮播图</title> <style> *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;} .img{position: absolu

  • JS轮播图实现简单代码

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

随机推荐