JavaScript 自适应轮播图

代码

话不多说，先上代码，方便复制粘贴。演示

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>轮播图</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        ul{

            list-style: none;

        }

        img{

            display: block;

            width: 100%;

            height: 100%;

        }

        .content{

            width: 1080px;

            margin: 100px auto;

        }

        .banner{

            position: relative;

            overflow: hidden;

        }

        .banner>div{

            width: 790px;

            position: absolute;

            transform: translateX(140px) scale(0.8);

            transform-origin: center bottom;

            transition: .4s;

        }

        .banner .first_item{

            z-index: 10;

            transform: translateX(140px) scale(1);

        }

        .banner .second_item{

            z-index: 1;

            transform: translateX(540px) scale(0.8);

        }

        .banner .last_item{

            z-index: 1;

            transform: translateX(-250px) scale(0.8);

        }

        /* 左右切换按钮 */

        .btn{

            width: 40px;

            height: 40px;

            position: absolute;

            top: 60%;

            margin-top: -20px;

            background-color: rgba(0, 0, 0, 0.2);

            z-index: 1;

            text-align: center;

            color: rgba(255, 255, 255, 0.6);

            line-height: 40px;

            font-size: 20px;

            font-style: normal;

            cursor: pointer;

            user-select: none;

        }

        .btn_right{

            right: 0;

        }

        .btn:hover{

            background-color: rgba(0, 0, 0, 0.4);

            color: rgba(255, 255, 255, 1);

        }

        /* banner状态点 */

        .track{

            display: flex;

            justify-content: center;

            overflow: hidden;

        }

        .track>span{

            display: block;

            width: 25px;

            height: 4px;

            background-color: #ccc;

            float: left;

            margin: 10px 6px;

            transition: .4s;

        }

        .track .focus{

            background-color: #c60023;

            transform: scale(1.2);

        }

    </style>

</head>

<body>

    <div class="content">

        <div class="banner">

            <div class="first_item">

                <a href="#"><img src="img/banner/banner1.jpg" alt=""></a>

            </div>

            <div class="second_item">

                <a href="#"><img src="img/banner/banner2.jpg" alt=""></a>

            </div>

            <div class="">

                <a href="#"><img src="img/banner/banner3.jpg" alt=""></a>

            </div>

            <div class="">

                <a href="#"><img src="img/banner/banner4.jpg" alt=""></a>

            </div>

            <div class="last_item">

                <a href="#"><img src="img/banner/banner5.jpg" alt=""></a>

            </div>

            <!-- 这里切换按钮用大于小于号代替，如果自己有icon图标自行替换 -->

            <i class="btn_left btn"><</i>

            <i class="btn_right btn">></i>

        </div>

        <div class="track"></div>

    </div>

    <script>

        window.onload = function(){

            // 获取节点，变量声明

            var banner      = document.querySelector('.banner'),

                btn_left    = document.querySelector('.btn_left'),

                btn_right   = document.querySelector('.btn_right'),

                track       = document.querySelector('.track'),

                list_items  = banner.querySelectorAll('div'),

                listArr     = [],

                index       = 0,

                trackHtml   = '',

                tracks,

                timer;

            // 初始化

            function init(){

                // 根据图片高度自适应

                banner.style.height = list_items[0].offsetHeight + 'px';

                // 生成track坐标点元素

                for(var i = 0, len = list_items.length; i < len; i ++){

                    listArr.push(list_items[i].className)

                    trackHtml += '<span></span>'

                }

                track.innerHTML = trackHtml;

                // 获取坐标点元素

                tracks = track.querySelectorAll('span');

                tracks[0].setAttribute('class', 'focus');

                play();

            }

            // 切换动画 target=1 下一张 target=-1 上一张

            function move(target){

                list_items.forEach((item, i) => {

                    item.setAttribute('class', listArr[i])

                });

                // 计算index下标值

                index = (index + listArr.length + target) % listArr.length;

                tracks.forEach((item, i) => {

                    item.setAttribute('class', '')

                });

                tracks[index].setAttribute('class', 'focus')

            }

            // 下一张

            function next(){

                listArr.unshift(listArr[listArr.length - 1]);

			   listArr.pop();

                move(1)

            }

            // 上一张

            function previous(){

                listArr.push(listArr[0]);

			   listArr.shift();

              	move(-1)

            }

            // 自动轮播

            function play(){

            	timer = setInterval(next, 4000);

            }

            // 下一张绑定点击事件

            btn_right.onclick = function(){

                clearInterval(timer);

                next();

                play();

            };

            // 上一张绑定点击事件

            btn_left.onclick = function(){

                clearInterval(timer);

                previous();

                play();

            };

            // track绑定点击事件

            track.addEventListener('click', function(e){

                var e = e || window.e,

                    //标准浏览器用ev.target，IE浏览器用event.srcElement

                    target = e.target || e.srcElement,

                    n = 0;

                if(target.className !== 'track'){

                    clearInterval(timer);

                    for(var i = 0, len = tracks.length; i < len; i ++){

                        tracks[i].setAttribute('class', '')

                        if(tracks[i] === target){

                            n = i;

                            tracks[i].setAttribute('class', 'focus');

                        }

                    }

                    // 向右滑动

                    if(n-index >= 0){

                        for(var i = 0; i < n-index; i ++){

                            setTimeout(next, 160*i);

                        }

                    }

                    // 向左滑动

                    else{

                        for(var i = 0; i < index-n; i ++){

                            setTimeout(previous, 160*i);

                        }

                    }

                    play();

                }

            })

            init();

        }

    </script>

</body>

</html>

前言

这里是我按照自己的想法写的一个原生javascript轮播图，给初学者提供一个思路。写轮播图的方法有很多，这里只是其中一种，最重要的还是能学有所得，举一反三。

效果

这里提供一张轮播图图片

思路

大部分轮播图都是通过banner左右移动的，这里用的是固定css布局，通过改变class来实现轮播的效果。

注意

本篇文章仅供学习使用，并未做浏览器兼容处理，建议使用谷歌或者第三方最新浏览器，对于IE这个神经病，不用也罢。

说明

这里简要说明一些问题，其实代码里大部分都注释过了。

这里的css样式部分，选择器一定要加上.banner，否则会有权重问题导致无法覆盖上面的css样式。
.banner .first_item{

  z-index: 10;

  transform: translateX(140px) scale(1);

}

.banner .second_item{

  z-index: 1;

  transform: translateX(540px) scale(0.8);

}

.banner .last_item{

  z-index: 1;

  transform: translateX(-250px) scale(0.8);

}
方法一的状态点用的是flex布局做的自适应，也可以使用方法二，但是兼容性貌似还不如方法一，win10自带的浏览器都不支持，索性就用了flex布局。
//方法一

.track{

  display: flex;

  justify-content: center;

  overflow: hidden;

}

//方法二

.track{

  width: fit-content;

  margin: auto;

  overflow: hidden;

}
这里注意要保留前两个和最后一个div的class名（也就是first_item、second_item、last_item），中间可以自适应随意添加图片，最少三张。有人可能会有疑惑，为什么不自动生成class名？这样就可以随意添加了，答案是：懒得写了，如果自己感兴趣，可以自己去改造。
<div class="first_item">

  <a href="#"><img src="img/banner/banner1.jpg" alt=""></a>

</div>

<div class="second_item">

  <a href="#"><img src="img/banner/banner2.jpg" alt=""></a>

</div>

<div class="">

  <a href="#"><img src="img/banner/banner3.jpg" alt=""></a>

</div>

<div class="">

  <a href="#"><img src="img/banner/banner4.jpg" alt=""></a>

</div>

<div class="last_item">

  <a href="#"><img src="img/banner/banner5.jpg" alt=""></a>

</div>
track绑定点击事件函数使用了事件委托，其中的这种切换方式我觉得是最和谐的，也可以用其他的方法。
//向右滑动

if(n-index >= 0){

  for(var i = 0; i < n-index; i ++){

    setTimeout(next, 160*i);

  }

}

//向左滑动

else{

  for(var i = 0; i < index-n; i ++){

    setTimeout(previous, 160*i);

  }

}

play();

JavaScript 自适应轮播图的更多相关文章

JavaScript焦点轮播图
在慕课学习了JavaScript焦点轮播图特效,在此做一个整理. 首先是html结构,我用的是本地同文件夹下的三张图片,多出来的第一张(pic3副本)和最后一张图片(pic1副本)是为了实现无缝切换效 ...
HTML+CSS+Javascript实现轮播图效果
HTML+CSS+Javascript实现轮播图效果注意:根据自己图片大小来更改轮播图大小. <!doctype html> <html> <head> < ...
原生javascript焦点轮播图
刚刚学会,写了一个轮播图效果,不过bug蛮多,请高手指点一下,谢谢 <!DOCTYPE html> <html> <head> <meta charset=& ...
JavaScript实现轮播图效果
我又来了,同志们.老想你们了捕获小可爱一枚. 下面进入正题:用JavaScript原生代码写轮播图效果. 具体效果就不多说了,网站上面的轮播效果我们都知晓.下面是展示代码 html代码: <d ...
【JavaScript】轮播图
代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...
前端-SuperSlide自动分页控制、自适应轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
javascript简单轮播图
**轮播图实现原理: 通过多张图片平铺,用overflow:hidden只显示一张图片.其他的隐藏,无缝滚动用定时器改变元素的left值让图片呈现左右滚动的效果.** HTML布局和内容: 1.容器c ...
javaScript实现轮播图
一.需求分析在首页完成对轮播图的效果实现,完成自动切换图片的功能. 二.技术分析获取元素 document.getElementById(“id 名称”) 事件(onload) 定时操作: set ...
原生JavaScript实现轮播图
---恢复内容开始--- 实现原理通过自定义的animate函数来改变元素的left值让图片呈现左右滚动的效果 HTML: <!DOCTYPE html> <html> &l ...

随机推荐

css浮动(float)详解
一.什么是浮动? 浮动,顾名思义,就是漂浮的意思.指的是一个元素脱离文档流,悬浮在父元素之上的现象. 二.如何产生浮动? 给元素本身添加float属性 float值: left 元素向左浮动. rig ...
web前后端交互，nodejs
手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元 web前后端交互前后端交互可以采用混合 ...
String实例（练习）
练习题1:用户输入一段字符串,要求统计出在该段字符串中,数字,字母以及其他字符各出现过几次??? 代码实现: 运行结果: 补充:1. 连接符的使用: +用作连接符时,只能连接字符串,即“ ”双 ...
Java连载89-SorteSet、Comparable接口
一. SortedSet集合直接举例 package com.bjpowernode.java_learning; import java.util.*; /** * java.util.Set * ...
Android中点击按钮启动另一个Activity以及Activity之间传值
场景点击第一个Activity中的按钮,启动第二个Activity,关闭第二个Activity,返回到第一个Activity. 在第一个Activity中给第二个Activity传递值,第二个Act ...
Android中Chronometer计时器的简单使用
场景实现效果如下注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获取编程相关电子书.教程推送与免费下载. 实现将布局改 ...
MySQL基础（4） | 视图
MySQL基础(4) | 视图基本语法 1.创建 CREATE VIEW <视图名> AS <SELECT语句> 语法说明如下. <视图名>:指定视图的名称.该名 ...
Python基础之基础知识
目录 Python基础知识 Python 变量 Python 字符编码 Python 二进制 Python 十六进制 Python bytes Python 注释 Python 用户输入 Python ...
【Java】基于RXTX的Java串口通信
本篇内容参考转载自https://blog.csdn.net/kong_gu_you_lan/article/details/80589859 环境搭建下载地址:http://fizzed.com/ ...
发ajax响应json格式数据
1.maven依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="h ...

JavaScript 自适应轮播图

代码

前言

效果

思路

注意

说明

JavaScript 自适应轮播图的更多相关文章

随机推荐

热门专题