代码

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>轮播图</title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         ul{
  12.             list-style: none;
  13.         }
  14.         img{
  15.             display: block;
  16.             width: 100%;
  17.             height: 100%;
  18.         }
  19.         .content{
  20.             width: 1080px;
  21.             margin: 100px auto;
  22.         }
  23.         .banner{
  24.             position: relative;
  25.             overflow: hidden;
  26.         }
  27.         .banner>div{
  28.             width: 790px;
  29.             position: absolute;
  30.             transform: translateX(140px) scale(0.8);
  31.             transform-origin: center bottom;
  32.             transition: .4s;
  33.         }
  34.         .banner .first_item{
  35.             z-index: 10;
  36.             transform: translateX(140px) scale(1);
  37.         }
  38.         .banner .second_item{
  39.             z-index: 1;
  40.             transform: translateX(540px) scale(0.8);
  41.         }
  42.         .banner .last_item{
  43.             z-index: 1;
  44.             transform: translateX(-250px) scale(0.8);
  45.         }
  46.         /* 左右切换按钮 */
  47.         .btn{
  48.             width: 40px;
  49.             height: 40px;
  50.             position: absolute;
  51.             top: 60%;
  52.             margin-top: -20px;
  53.             background-color: rgba(0, 0, 0, 0.2);
  54.             z-index: 1;
  55.             text-align: center;
  56.             color: rgba(255, 255, 255, 0.6);
  57.             line-height: 40px;
  58.             font-size: 20px;
  59.             font-style: normal;
  60.             cursor: pointer;
  61.             user-select: none;
  62.         }
  63.         .btn_right{
  64.             right: 0;
  65.         }
  66.         .btn:hover{
  67.             background-color: rgba(0, 0, 0, 0.4);
  68.             color: rgba(255, 255, 255, 1);
  69.         }
  70.         /* banner状态点 */
  71.         .track{
  72.             display: flex;
  73.             justify-content: center;
  74.             overflow: hidden;
  75.         }
  76.         .track>span{
  77.             display: block;
  78.             width: 25px;
  79.             height: 4px;
  80.             background-color: #ccc;
  81.             float: left;
  82.             margin: 10px 6px;
  83.             transition: .4s;
  84.         }
  85.         .track .focus{
  86.             background-color: #c60023;
  87.             transform: scale(1.2);
  88.         }
  89.     </style>
  90. </head>
  91. <body>
  92.     <div class="content">
  93.         <div class="banner">
  94.             <div class="first_item">
  95.                 <a href="#"><img src="img/banner/banner1.jpg" alt=""></a>
  96.             </div>
  97.             <div class="second_item">
  98.                 <a href="#"><img src="img/banner/banner2.jpg" alt=""></a>
  99.             </div>
  100.             <div class="">
  101.                 <a href="#"><img src="img/banner/banner3.jpg" alt=""></a>
  102.             </div>
  103.             <div class="">
  104.                 <a href="#"><img src="img/banner/banner4.jpg" alt=""></a>
  105.             </div>
  106.             <div class="last_item">
  107.                 <a href="#"><img src="img/banner/banner5.jpg" alt=""></a>
  108.             </div>
  109.             <!-- 这里切换按钮用大于小于号代替，如果自己有icon图标自行替换 -->
  110.             <i class="btn_left btn"><</i>
  111.             <i class="btn_right btn">></i>
  112.         </div>
  113.         <div class="track"></div>
  114.     </div>
  115.     <script>
  116.         window.onload = function(){
  117.             // 获取节点，变量声明
  118.             var banner      = document.querySelector('.banner'),
  119.                 btn_left    = document.querySelector('.btn_left'),
  120.                 btn_right   = document.querySelector('.btn_right'),
  121.                 track       = document.querySelector('.track'),
  122.                 list_items  = banner.querySelectorAll('div'),
  123.                 listArr     = [],
  124.                 index       = 0,
  125.                 trackHtml   = '',
  126.                 tracks,
  127.                 timer;
  128.             // 初始化
  129.             function init(){
  130.                 // 根据图片高度自适应
  131.                 banner.style.height = list_items[0].offsetHeight + 'px';
  132.                 // 生成track坐标点元素
  133.                 for(var i = 0, len = list_items.length; i < len; i ++){
  134.                     listArr.push(list_items[i].className)
  135.                     trackHtml += '<span></span>'
  136.                 }
  137.                 track.innerHTML = trackHtml;
  138.                 // 获取坐标点元素
  139.                 tracks = track.querySelectorAll('span');
  140.                 tracks[0].setAttribute('class', 'focus');
  141.                 play();
  142.             }
  143.             // 切换动画 target=1 下一张 target=-1 上一张
  144.             function move(target){
  145.                 list_items.forEach((item, i) => {
  146.                     item.setAttribute('class', listArr[i])
  147.                 });
  148.                 // 计算index下标值
  149.                 index = (index + listArr.length + target) % listArr.length;
  150.                 tracks.forEach((item, i) => {
  151.                     item.setAttribute('class', '')
  152.                 });
  153.                 tracks[index].setAttribute('class', 'focus')
  154.             }
  155.             // 下一张
  156.             function next(){
  157.                 listArr.unshift(listArr[listArr.length - 1]);
  158. 			   listArr.pop();
  159.                 move(1)
  160.             }
  161.             // 上一张
  162.             function previous(){
  163.                 listArr.push(listArr[0]);
  164. 			   listArr.shift();
  165.               	move(-1)
  166.             }
  167.             // 自动轮播
  168.             function play(){
  169.             	timer = setInterval(next, 4000);
  170.             }
  171.             // 下一张绑定点击事件
  172.             btn_right.onclick = function(){
  173.                 clearInterval(timer);
  174.                 next();
  175.                 play();
  176.             };
  177.             // 上一张绑定点击事件
  178.             btn_left.onclick = function(){
  179.                 clearInterval(timer);
  180.                 previous();
  181.                 play();
  182.             };
  183.             // track绑定点击事件
  184.             track.addEventListener('click', function(e){
  185.                 var e = e || window.e,
  186.                     //标准浏览器用ev.target，IE浏览器用event.srcElement
  187.                     target = e.target || e.srcElement,
  188.                     n = 0;
  189.                 if(target.className !== 'track'){
  190.                     clearInterval(timer);
  191.                     for(var i = 0, len = tracks.length; i < len; i ++){
  192.                         tracks[i].setAttribute('class', '')
  193.                         if(tracks[i] === target){
  194.                             n = i;
  195.                             tracks[i].setAttribute('class', 'focus');
  196.                         }
  197.                     }
  198.                     // 向右滑动
  199.                     if(n-index >= 0){
  200.                         for(var i = 0; i < n-index; i ++){
  201.                             setTimeout(next, 160*i);
  202.                         }
  203.                     }
  204.                     // 向左滑动
  205.                     else{
  206.                         for(var i = 0; i < index-n; i ++){
  207.                             setTimeout(previous, 160*i);
  208.                         }
  209.                     }
  210.                     play();
  211.                 }
  212.             })
  213.             init();
  214.         }
  215.     </script>
  216. </body>
  217. </html>

前言

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

效果

这里提供一张轮播图图片

思路

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

注意

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

说明

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

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

  1. .banner .first_item{
  2.   z-index: 10;
  3.   transform: translateX(140px) scale(1);
  4. }
  5. .banner .second_item{
  6.   z-index: 1;
  7.   transform: translateX(540px) scale(0.8);
  8. }
  9. .banner .last_item{
  10.   z-index: 1;
  11.   transform: translateX(-250px) scale(0.8);
  12. }

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

  1. //方法一
  2. .track{
  3.   display: flex;
  4.   justify-content: center;
  5.   overflow: hidden;
  6. }
  7. //方法二
  8. .track{
  9.   width: fit-content;
  10.   margin: auto;
  11.   overflow: hidden;
  12. }

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

  1. <div class="first_item">
  2.   <a href="#"><img src="img/banner/banner1.jpg" alt=""></a>
  3. </div>
  4. <div class="second_item">
  5.   <a href="#"><img src="img/banner/banner2.jpg" alt=""></a>
  6. </div>
  7. <div class="">
  8.   <a href="#"><img src="img/banner/banner3.jpg" alt=""></a>
  9. </div>
  10. <div class="">
  11.   <a href="#"><img src="img/banner/banner4.jpg" alt=""></a>
  12. </div>
  13. <div class="last_item">
  14.   <a href="#"><img src="img/banner/banner5.jpg" alt=""></a>
  15. </div>

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

  1. //向右滑动
  2. if(n-index >= 0){
  3.   for(var i = 0; i < n-index; i ++){
  4.     setTimeout(next, 160*i);
  5.   }
  6. }
  7. //向左滑动
  8. else{
  9.   for(var i = 0; i < index-n; i ++){
  10.     setTimeout(previous, 160*i);
  11.   }
  12. }
  13. play();

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

  1. JavaScript焦点轮播图

    在慕课学习了JavaScript焦点轮播图特效,在此做一个整理. 首先是html结构,我用的是本地同文件夹下的三张图片,多出来的第一张(pic3副本)和最后一张图片(pic1副本)是为了实现无缝切换效 ...

  2. HTML+CSS+Javascript实现轮播图效果

    HTML+CSS+Javascript实现轮播图效果 注意:根据自己图片大小来更改轮播图大小. <!doctype html> <html> <head> < ...

  3. 原生javascript焦点轮播图

    刚刚学会,写了一个轮播图效果,不过bug蛮多,请高手指点一下,谢谢 <!DOCTYPE html> <html> <head> <meta charset=& ...

  4. JavaScript实现轮播图效果

    我又来了,同志们.老想你们了 捕获小可爱一枚. 下面进入正题:用JavaScript原生代码写轮播图效果. 具体效果就不多说了,网站上面的轮播效果我们都知晓.下面是展示代码 html代码: <d ...

  5. 【JavaScript】轮播图

    代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...

  6. 前端-SuperSlide自动分页控制、自适应轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. javascript简单轮播图

    **轮播图实现原理: 通过多张图片平铺,用overflow:hidden只显示一张图片.其他的隐藏,无缝滚动用定时器改变元素的left值让图片呈现左右滚动的效果.** HTML布局和内容: 1.容器c ...

  8. javaScript实现轮播图

    一.需求分析 在首页完成对轮播图的效果实现,完成自动切换图片的功能. 二.技术分析 获取元素 document.getElementById(“id 名称”) 事件(onload) 定时操作: set ...

  9. 原生JavaScript实现轮播图

    ---恢复内容开始--- 实现原理 通过自定义的animate函数来改变元素的left值让图片呈现左右滚动的效果 HTML: <!DOCTYPE html> <html> &l ...

随机推荐

  1. 转：JSON与Map互转

    JSON字符串与Map互转   //一.map转为json字符串 public static String map2jsonstr(Map<String,?> map){ return J ...

  2. Flink系统之Table API 和 SQL

    Flink提供了像表一样处理的API和像执行SQL语句一样把结果集进行执行.这样很方便的让大家进行数据处理了.比如执行一些查询,在无界数据和批处理的任务上,然后将这些按一定的格式进行输出,很方便的让大 ...

  3. 浅谈CC攻击原理与防范

    概念         CC攻击的原理就是攻击者控制某些主机不停地发大量数据包给对方服务器造成服务器资源耗尽,一直到宕机崩溃.CC主要是用来攻击页面的,每个人都有这样的体验:当一个网页访问的人数特别多的 ...

  4. 排查 Kubernetes HPA 通过 Prometheus 获取不到 http_requests 指标的问题

    部署好了 kube-prometheus 与 k8s-prometheus-adapter (详见之前的博文 k8s 安装 prometheus 过程记录),使用下面的配置文件部署 HPA(Horiz ...

  5. hadoop local、伪分布 模式

    local模式: 把安装包 解压到 /usr/local  下 [hadoop@master local]$ sudo tar -zxvf hadoop-2.7.3.tar.gz   创建一个软连接 ...

  6. MS14-068提权和impacket工具包提权

    ms14-068提权 工具利用 a)拿下边界机win7,并已经有win7上任意一个账号的密码 -u 用户名@域 -p 用户密码 -s 用户sid -d 域控 ms14-068.exe -u test3 ...

  7. Android开发当中ListView的使用

    首先我们看ListView实现之后的的效果,如下图所示: 现在我们来看看如何来实现这个可以进行上下活动的ListView: 首先是主界面Activity_Main.xml的代码: <?xml v ...

  8. 【Java】实验代码整理（多线程、自定义异常、界面）

    1.界面+文件输入输出流 package finalExam; import java.awt.BorderLayout; import java.awt.Container; import java ...

  9. FPGA分频与倍频的简单总结（涉及自己设计，调用时钟IP核，调用MMCM原语模块）

    原理介绍 1.分频 FPGA设计中时钟分频是重要的基础知识,对于分频通常是利用计数器来实现想要的时钟频率,由此可知分频后的频率周期更大.一般而言实现偶数系数的分频在程序设计上较为容易,而奇数分频则相对 ...

  10. 走进MEasy的世界：基于STM32MP1的IOT参考设计

    前言:在万物互联快速发展的趋势下,板卡处理器性能.内存大小.接口外设等都是人们非常关心的硬件参数,但是如何让硬件的作用实现它的功能最大化,一套完善的软件支持尤为重要. 背景:随着HTML5技术的发展, ...