js实现简单轮播图效果

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

使用transform = translateX()实现的图片切换

<style>
        .box {
            position: relative;
            overflow: hidden;
            margin: 200px auto;
            width: 600px;
            height: 400px;
        }

        .img {
            width: 3000px;
            height: 400px;
        }

        img {
            float: left;
            width: 600px;
            height: 400px;
        }

        .btn {
            position: absolute;
            top: 350px;
            left: 245px;
            width: 110px;
            height: 20px;
        }

        .dian {
            float: left;
            margin: 5px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.3);
            cursor: pointer;
        }

        .left,
        .right {
            display: none;
            box-sizing: border-box;
            position: absolute;
            top: 150px;
            width: 50px;
            height: 100px;
            background-color: rgba(0, 0, 0, 0.521);
            font-size: 40px;
            line-height: 100px;
            color: #fff;
        }

        .box:hover .left,
        .box:hover .right {
            display: block;
        }

        .left {
            padding-left: 10px;
            left: 0;
        }

        .right {
            padding-right: 10px;
            text-align: right;
            right: 0;
        }
</style>
<div class="box">
        <div class="img">
            <img src="./img/1.jpeg" alt="">
            <img src="./img/2.jpeg" alt="">
            <img src="./img/3.jpeg" alt="">
            <img src="./img/4.jpeg" alt="">
            <img src="./img/5.jpeg" alt="">
        </div>

        <div class="btn">
            <span class="dian"></span>
            <span class="dian"></span>
            <span class="dian"></span>
            <span class="dian"></span>
            <span class="dian"></span>
        </div>

        <div class="left">&lt; </div>
        <div class="right">&gt;</div>
</div>
<script>
        var btn = document.getElementsByClassName('btn')[0];
        var imgBox = document.getElementsByClassName('img')[0];
        var imgs = imgBox.getElementsByTagName('img');
        var btnChild = document.getElementsByClassName('dian');

        var k = 0;
        // 向按钮添加自定义属性
        for (var i = 0; i < btnChild.length; i++) {
            btnChild[i].dataset.num = i * 600;
        }
        // 默认为 第一张图片,第一个按钮为白色
        btnChild[0].style.background = 'rgba(255, 255, 255, 0.8)';

        // 点击按钮切换图片,按钮变色
        btn.onclick = function(e) {

            if (e.target.nodeName === 'SPAN') {
                // 先让所有按钮为默认颜色
                for (var i = 0; i < btnChild.length; i++) {
                    btnChild[i].style.background = 'rgba(255, 255, 255, 0.4)';
                }
                // 点击的按钮变色
                k = +e.target.dataset.num;
                console.log(k);
                btnChild[k / 600].style.background = 'rgba(255, 255, 255, 0.8)';
                // 切换图片
                imgBox.style.transform = `translateX(-${e.target.dataset.num}px)`;
            }
        }

        // 获取图片长度
        // var imgWidth = +getComputedStyle(imgs[0]).width.slice(0, -2);
        var imgWidth = imgs[0].offsetWidth;

        // 定时器 移动图片
        var interval1 = setInterval(move, 1000);
        var interval;

        // 函数 移动图片,改变按钮
        function move() {
            k += imgWidth;
            if (k === imgWidth * imgs.length) {
                k = 0;
            }
            // 移动图片
            imgBox.style.transform = `translateX(-${k}px)`;
            // 改变按钮颜色
            for (var i = 0; i < btnChild.length; i++) {
                btnChild[i].style.background = 'rgba(255, 255, 255, 0.4)';
            }

            btnChild[k / 600].style.background = 'rgba(255, 255, 255, 0.8)';

        }

        // 鼠标移动到图片上 删除定时器
        var box = document.getElementsByClassName('box')[0];
        box.onmouseover = function() {
            clearInterval(interval1);
            clearInterval(interval);
        }

        // 鼠标移出 启动定时器
        box.onmouseout = function() {
            interval = setInterval(move, 1000);
        }

        var leftBtn = document.getElementsByClassName('left')[0];
        var rightBtn = document.getElementsByClassName('right')[0];

        rightBtn.onclick = function() {

            k += imgWidth;
            if (k === imgWidth * imgs.length) {
                k = 0;
            }
            // 移动图片
            imgBox.style.transform = `translateX(-${k}px)`;
            // 改变按钮颜色
            for (var i = 0; i < btnChild.length; i++) {
                btnChild[i].style.background = 'rgba(255, 255, 255, 0.4)';
            }

            btnChild[k / 600].style.background = 'rgba(255, 255, 255, 0.8)';

        }
        leftBtn.onclick = function() {
            k -= imgWidth;
            if (k < 0) {
                k = imgWidth * (imgs.length - 1);
            }
            imgBox.style.transform = `translateX(-${k}px)`;
            // 改变按钮颜色
            for (var i = 0; i < btnChild.length; i++) {
                btnChild[i].style.background = 'rgba(255, 255, 255, 0.4)';
            }

            btnChild[k / 600].style.background = 'rgba(255, 255, 255, 0.8)';

        }
</script>

效果图:

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

时间: 2021-09-12

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

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

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

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

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

本文实例为大家分享了js实现简单轮播图效果的具体代码,供大家参考,具体内容如下 效果如下: 分析: 分析效果: 分析实现: 1.通过 document.querySelector('.类名') 的形式获取到装轮播图的大盒子(.carousel).装轮播图左右按钮的标签的父元素(.chevron).获取左右按钮(.chevron-left ..chevron-right).获取放轮播图图片的父元素ul(.carousel-body)[注:这里获取ul而不是回去li,是因为移动轮播图的时候是整个ul

JS轮播图实现简单代码

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

用js实现轮播图效果

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

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实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)

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

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

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

js实现轮播图的完整代码

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

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

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

JavaScript实现旋转木马轮播图

本文实例为大家分享了JavaScript实现旋转木马轮播图的具体代码,供大家参考,具体内容如下 html代码段 图片自己添加,或者使用本人的上传照片,拉到最下面即可看见 <div class="wrap" id="wrap"> <div class="slide" id="slide"> <ul> <li><a href="#" ><img

使用原生的javascript来实现轮播图

下面看下js轮播图的实现代码,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0; list-style: none; border: 0;

原生js通过一行代码实现简易轮播图

这是一个简易的js无限循环轮播图,只用了一行js代码就实现了无限循环,记录一下三目运算符的伟大! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l

Vue中如何实现轮播图的示例代码

这个功能我感觉在任何项目中都会涉及到,今天我就把我的实现方法跟大家分享一下,有不对的地方还请指出,我好更新. 下面是整体代码,我把轮播图单独做了一个组件,大家可以拿来就用,具体代码如下: <template> <div class="content"> <div class="focus"> <!-- focus begin --> <swiper :options="swiperOption"

用vue写一个仿简书的轮播图的示例代码

1.先展示最终效果: 2.解决思路 Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果.写好css样式,只需改变每张图片的class即可实现轮播效果.动画效果交给transition完成.可以将轮播图看成两个(mainSlide和extraSlide),各个图片的位置如图所示: 3.代码实现 各个slide的样式: $width: 800px; // 容器宽度 $height: 300px; // 容器高度 $bWidth: 500px; // 大图片宽度 $

JavaScript实现简单轮播图效果

本文实例为大家分享了js实现简单轮播图效果的具体代码,可以实现左右翻转,图片切换显示等效果,供大家参考,具体内容如下 效果展示: 代码展示: <!doctype html> <html> <!-- 学习功能:使用JavaScript实现图片轮播,左右翻转,图片切换显示等. author: lisa于2018-5-30 --> <title> <meta charset="utf-8"> </title> <b

轮播图组件js代码

本文实例为大家分享了JavaScript轮播图组件代码,供大家参考,具体内容如下 //轮播图组件 function Rolling(o) { this.index = ++o.index || 1; //当前滚动的位置,当index大于可轮播的次数listLength或者等于0,为不可滚动状态 this.num = o.num || 1; //默认滚动一个列表 this.obj = o.obj || null; //要轮播的对象ul this.perObj = o.perObj || null;

使用Require.js封装原生js轮播图的实现代码

index.html页面: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>require.js封装轮播图</title> <style type="text/css"> *{ margin: 0; padding: 0; list-style: none; } #banner{ width: 830px; he