JavaScript 自适应轮播图

贡菜干 發表於 2020-2-22 17:08:00

<h3 id="代码">代码</h3>
<blockquote>
<p>话不多说，先上代码，方便复制粘贴。演示</p>
</blockquote>
<pre><code class="language-html"><!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>
   
   <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.offsetHeight + 'px';
   // 生成track坐标点元素
   for (var i = 0, len = list_items.length; i < len; i++) {
      listArr.push(list_items.className)
      trackHtml += '<span></span>'
   }
   track.innerHTML = trackHtml;
   // 获取坐标点元素
   tracks = track.querySelectorAll('span');
   tracks.setAttribute('class', 'focus');
   play();
   }
   // 切换动画 target=1 下一张 target=-1 上一张
   function move(target) {
   list_items.forEach((item, i) => {
      item.setAttribute('class', listArr)
   });
   // 计算index下标值
   index = (index + listArr.length + target) % listArr.length;
   tracks.forEach((item, i) => {
      item.setAttribute('class', '')
   });
   tracks.setAttribute('class', 'focus')
   }
   // 下一张
   function next() {
   listArr.unshift(listArr);
   listArr.pop();
   move(1)
   }
   // 上一张
   function previous() {
   listArr.push(listArr);
   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.setAttribute('class', '')
         if (tracks === target) {
         n = i;
         tracks.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>
</code></pre>
<h3 id="前言">前言</h3>
<p>这里是我按照自己的想法写的一个原生javascript轮播图，给初学者提供一个思路。写轮播图的方法有很多，这里只是其中一种，最重要的还是能学有所得，举一反三。</p>
<h3 id="效果">效果</h3>
<p><img src="https://upload-images.jianshu.io/upload_images/19853472-0239f3c1eeaf9830.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="0.PNG" loading="lazy"></p>
<h3 id="思路">思路</h3>
<p>大部分轮播图都是通过banner左右移动的，这里用的是固定css布局，通过改变class来实现轮播的效果。</p>
<h3 id="注意">注意</h3>
<p>本篇文章仅供学习使用，并未做浏览器兼容处理，建议使用谷歌或者第三方最新浏览器，对于IE这个神经病，不用也罢。</p>
<h3 id="说明">说明</h3>
<p>这里简要说明一些问题，其实代码里大部分都注释过了。</p>
<blockquote>
<p>这里的css样式部分，选择器一定要加上<code>.banner</code>，否则会有权重问题导致无法覆盖上面的css样式。</p>
</blockquote>
<pre><code class="language-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);
}
</code></pre>
<blockquote>
<p>方法一的状态点用的是flex布局做的自适应，也可以使用方法二，但是兼容性貌似还不如方法一，win10自带的浏览器都不支持，索性就用了flex布局。</p>
</blockquote>
<pre><code class="language-css">//方法一
.track{
display: flex;
justify-content: center;
overflow: hidden;
}
//方法二
.track{
width: fit-content;
margin: auto;
overflow: hidden;
}
</code></pre>
<blockquote>
<p>这里注意要保留前两个和最后一个div的class名（也就是<code>first_item</code>、<code>second_item</code>、<code>last_item</code>），中间可以自适应随意添加图片，最少三张。有人可能会有疑惑，为什么不自动生成class名？这样就可以随意添加了，答案是：懒得写了，如果自己感兴趣，可以自己去改造。</p>
</blockquote>
<pre><code class="language-html"><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>
</code></pre>
<blockquote>
<p>track绑定点击事件函数使用了事件委托，其中的这种切换方式我觉得是最和谐的，也可以用其他的方法。</p>
</blockquote>
<pre><code class="language-javascript">//向右滑动
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();
</code></pre>

</div>
<div id="MySignature" role="contentinfo">
完结～<br><br>
来源：https://www.cnblogs.com/lwlblog/p/12346178.html

頁: [1]

琼殿技术论坛's Archiver

JavaScript 自适应轮播图