最简单的无缝轮播图

木子兮
460 阅读4分钟

原理：

通过最外面的盒子宽度为100%,图片盒子的宽度为500%,每次移动图片盒子宽度的100%,来完成轮播效果

html中：

<!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">
    <link rel="icon" type="image/x-icon" href="images/icon_book.png">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/SpecialEffect.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery-3.6.0.js"></script>
    <title>滚动轮播图</title>
</head>
<body>
    <!-- 通过最外面的盒子宽度为100%,图片盒子的宽度为500%,每次移动图片盒子宽度的20%,来完成轮播效果 -->
<div class="wrap pr">
    <div class="lantern">
        <img src="images/轮播1.jpg" alt="">
        <img src="images/轮播2.jpg" alt="">
        <img src="images/轮播3.jpg" alt="">
        <img src="images/轮播4.jpg" alt="">
        <img src="images/轮播5.jpg" alt="">
    </div>
    <button class="prev pa" disabled>〈</button>
    <button class="next pa">〉</button>
    <ul class="tabs pa df-sb">
        <li class="active" lz="0"></li>
        <li lz="1"></li>
        <li lz="2"></li>
        <li lz="3"></li>
        <li lz="4"></li>
    </ul>
</div>




    <script src="js/index.js"></script>
    <script src="js/SpecialEffect.js"></script>
</body>

</html>

index.css

.wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.lantern {
  width: 500%;
  height: 100%;
   position: absolute;
   left: 0;
   top: 0;
}

.lantern > img {
  width: 20%;
  height: 100%;
  float:left;
 
}

/* 设置左右点击按钮 */
.prev,
.next {
  width: 40px;
  height: 80px;
  position: absolute;
  top: 50%;
  margin-top: -20px;
  border-radius: 10px;
  cursor: pointer;
  background: transparent;
  text-align: center;
  font-size: 9px;
  border: 1px solid;
}
.prev {
  left: 10px;
}
.next {
  right: 10px;
}
.prev:hover,.next:hover{
    /* 背景变为黑色透明度为.7 */
    background: rgba(0,0,0,.7);
}

/* 设置小圆点 */
.tabs{
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width:240px;
    height:30px;
    /* border:1px solid gray; */
}
.tabs>li{
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background:#a6b67a;
    opacity: .6;
    transition: width ease-in-out .3s;
}
.tabs>li.active,.tabs>li:hover{
  border: 2px solid #c37bd1;
  width:44px;
  opacity: 1;
}

index.js

//轮播图函数
function rotation() {
  var tabs = document.getElementsByClassName("tabs")[0],
    lis = tabs.getElementsByTagName("li"),
    lantern = document.getElementsByClassName("lantern")[0],
    prev = document.getElementsByClassName("prev")[0],
      next = document.getElementsByClassName("next")[0],
      count = 0;
    // console.log(lantern)
    // 开启一个定时器,让lantern每2s向左移动100%
    timer = setInterval(function () {
    count++
    if(count==lis.length){
        lantern.style.left = "0";
        count=0
    }
    lantern.style.left = count * -100 + "%";
       //小圆点也随着变化
        for (var i = 0; i < lis.length; i++) { 
        lis[i].className = "";
    }
    parseInt(lantern.style.left)==count*-100?lis[count].className="active":null;
  },2000);

   //点击next按钮,让lantern向右移动100%
    next.onclick = function () {
      count++;
      count == lis.length && (count = 0);
      for (var i = 0; i < lis.length; i++) {
        lis[i].className = "";
      }
      lis[count].className = "active";
      lantern.style.left = -count * 100 + "%";
      //next按钮最后一张图片时,让next按钮不可点击
        (count == lis.length - 1) ? next.setAttribute("disabled", "") : next.removeAttribute("disabled");
        //点击的时候顺便移除掉prev按钮的disabled属性
        prev.removeAttribute("disabled");
    }
    //点击prev按钮,让lantern向左移动100%
    prev.onclick = function () { 
        count--;
        count == -1 && (count = lis.length - 1);
        for (var i = 0; i < lis.length; i++) {
            lis[i].className = "";
        }
        lis[count].className = "active";
        lantern.style.left = -count * 100 + "%";
        //prev按钮第一张图片时,让prev按钮不可点击
        (count == 0) ? prev.setAttribute("disabled", "") : prev.removeAttribute("disabled");
        //点击的时候顺便移除掉next按钮的disabled属性
        next.removeAttribute("disabled");
    }

    for (var i = 0; i < lis.length; i++) { 
        //点击小圆点,让lantern向相应的位置移动
        lis[i].onclick = function () { 
            for (var j = 0; j < lis.length; j++) {
                lis[j].className = "";
            }
            this.className = "active";
            lantern.style.left = -this.getAttribute("lz") * 100 + "%";
            //点击的时候顺便移除掉prev按钮的disabled属性
            prev.removeAttribute("disabled");
            //点击的时候顺便移除掉next按钮的disabled属性
            next.removeAttribute("disabled");
        }
    }
}
rotation();

reset.css

* {
    margin: 0;
    padding: 0;
  }

a {
    text-decoration: none;
    display: block;
    color: inherit;
}

a:active, a:hover {
    outline: 0
}

li {
    list-style: none;
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -0.5em
}

sub {
    bottom: -0.25em
}

img {
    border: 0;
    display: block;
}

button,input{
    outline: none;
    border: none;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

common.css

/* 禁止选中文本 */
.usn {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

/* 垂直居中（4种） */
.df-c {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tb-c {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
.pt-c {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.pm-c {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}

/* 遮罩 */
.mask-fixed-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 999;
}

/* 设置弹性盒子 */
.df{
  display: flex;
}

/* 两端对齐 */
.df-sb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}
/* 两侧间隔相等 */
.df-sa {
  display: flex;
  align-items: center;
  justify-content: space-around;
  text-align: center;
}

/* 改变主轴方向为列后的对齐方式 */
/* 两端对齐 */
.df-sb-col {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  text-align: center;
}
/* 两侧间隔相等 */
.df-sa-col {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  text-align: center;
}

/* 定位方式 */
.ps {
  position: sticky;
}
.pr {
  position: relative;
  zoom: 1;
}
.pa {
  position: absolute;
}
.pf {
  position: fixed;
}

/* 浮动 */
.fl {
  float: left;
}
.fr {
  float: right;
}
/* 清除浮动 */
.clear::after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  height: 0;
  width: 0;
  overflow: hidden;
  transform: scale(0);
  opacity: 0;
  color: transparent;
  zoom: 1;
}

/* 文字排版 */
.tl {
  text-align: left;
}
.tc {
  text-align: center;
}
.tr {
  text-align: right;
}
.tj {
  text-align: justify;
  text-justify: inter-ideograph;
}

/*注：inter-ideograph : 为表意字文本提供完全两端对齐。他增加或减少表意字和词间的空格*/

/* 元素类型 */
.db {
  display: block;
}
.dn {
  display: none;
}
.di {
  display: inline;
}
.dib {
  display: inline-block;
}

/* 强制不换行 */
.wn {
  word-wrap: normal;
  white-space: nowrap;
}
/* 强制换行 */
.wb {
  white-space: normal;
  word-wrap: break-word;
  word-break: break-all;
}

/* 用于一行省略 */
.wes {
  overflow: hidden;
  word-wrap: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* 用于二行省略 */
.wes-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
/* 用于三行省略 */
.wes-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
/* 用于四行省略 */
.wes-4 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

/* 垂直对齐方式 */
.vt {
  vertical-align: top;
}
.vm {
  vertical-align: middle;
}
.vb {
  vertical-align: bottom;
}

/* 鼠标样式 */
.csd {
  cursor: default;
}
.csp {
  cursor: pointer;
}
.csh {
  cursor: help;
}
.csm {
  cursor: move;
}

/* margin水平居中 */
.m0a {
  margin: 0 auto;
}

body,
html {
  height: 100%;
}

/* 边框 */
.border{
  border: 1px solid gray;
}

/* 颜色 */
.red{
  background: red;
}
.blue{
  background: blue;
}
.green{
  background: green;
}
.tomato{
  background: tomato;
}
.gray{
  background: gray;
}
avatar
文章
阅读
粉丝