[JavaScript]用JS实现轮播图

最新推荐文章于 2024-04-05 18:17:54 发布

akueq

最新推荐文章于 2024-04-05 18:17:54 发布

阅读量388

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/fqq_5280/article/details/81434486

版权

JavaScript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

- - 用JavaScript实现轮播图效果

用JavaScript实现轮播图效果

先附上github地址 lunbotu

第一步：HTML

先写html代码

我将图片放进了<li>标签内，圆点和左右箭头放进了<span>标签内

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <link rel="stylesheet" type="text/css" href="lun.css">
</head>
<body>
<div id="wrapper" class="slider">
  <div style="width: 400px" id="imgbox">
    <div class="img">
      <ul>
        <li><a href="#"><img src="7777.jpeg"></a></li>

        <li><a href="#"><img src="1111.jpeg"></a></li>
        <li><a href="#"><img src="2222.jpg"></a></li>
        <li><a href="#"><img src="333.jpeg"></a></li>
        <li><a href="#"><img src="4444.jpeg"></a></li>
        <li><a href="#"><img src="555.jpg"></a></li>
        <li><a href="#"><img src="666.jpeg"></a></li>
        <li><a href="#"><img src="7777.jpeg"></a></li>

        <li><a href="#"><img src="1111.jpeg"></a></li>
      </ul>
    </div>
    <div class="span">
      <span index="1" class="current"></span>
      <span index="2" class=""></span>
      <span index="3" class=""></span>
      <span index="4" class=""></span>
      <span index="5" class=""></span>
      <span index="6" class=""></span>
      <span index="7" class=""></span>
    </div>
    <div class="arrow">
      <span class="arrow-left" style="float:left"></span>
      <span class="arrow-right" style="float:right"></span>
    </div>
  </div>
</div>

<script src="lun.js" type="text/javascript"></script>

</body>
</html>

注意一下这里，我复制了第一张图和最后一张图放到最后和最前。这是为了实现第一张图和最后一张图的无缝转换。所以一开始 ul 是在（- 400px）的位置。

1533349700932

将<script src="lun.js" type="text/javascript"></script>放到html的最后，防止html等待js下载，也防止 js 在页面没加载之前实现，出现执行失败的情况（也可以使用windows.onload来防止后一种情况）

第二步：css样式

代码放在github里面。我们直接下一步！

第三步：js代码

实现移动

function moveleft(want) {
flag = false;
var now;
now = parseInt(nowIndex) / 400;
wantIndex = (want + now) * 400;
if (wantIndex > -400) {
  iUl.style.left = "-3200px";
  nowIndex = "-3200px";
  wantIndex = -2800;
  now = parseInt(nowIndex) / 400;
}
if (wantIndex < -2800) {
  iUl.style.left = "0";
  nowIndex = "0";
  wantIndex = -400;
  now = parseInt(nowIndex) / 400;
}
once = (wantIndex - parseInt(nowIndex)) / 50;
dotsColorChange(-(now + want));

move();
}

function move() {
timer = setInterval(function () {
  if (parseInt(nowIndex) !== wantIndex) {
    iUl.style.left = parseInt(nowIndex) + once + "px";
    nowIndex = parseInt(nowIndex) + once + "px";
//      console.log(nowIndex);
  }
  else {
    flag = true;
    clearInterval(timer);
  }
}, 2);
}

这两个函数上面一个计算移动距离和左右（通过想要移动的左右个数和现在的位置）

下面一个实现移动，通过setInterval函数实现过渡动画，（改变<ul>标签的 left 值）

这个js代码一共只有一个移动函数，这个move()函数的参数（once）我设置成了全局变量，这是一种不可取的做法，最好还是老老实实的使用参数传递。

为了防止在一次点击之后快速点击（出现移动到一半再重新移动的情况）设置了一个flag来标记，当flag值为true时允许点击，当flag值为false时点击不会进入moveleft()函数，只有移动结束这个值才会被重置。

实现无缝移动（第一张和最后一张的切换）我放进moveleft()函数中实现。先跳转到位置然后计算once最后调用move()函数。

实现左右移动箭头

javascript lArrow.onclick = function () { if (flag) { var want = 1; moveleft(want); } }; rArrow.onclick = function () { if (flag) { var want = -1; //want是想要走多少 moveleft(want); } };

实现自动轮播

javascript function moveauto() { timer1 = setInterval(rArrow.onclick, 3000); // console.log(rArrow.onclick); //定时效果就是。。让他3秒触发一次 }

因为自动轮播的效果其实和点击右箭头是一个效果，所以使用每3秒触发一次 rArrow.onclick 的形式来实现自动轮播。再在全局调用轮播函数就好了。

我的自动轮播会在鼠标移动到图片上之后自动停止，在移出后重新开始计时。这只需要在 iDiv.onmouseout 事件中调用轮播函数，在 iDiv.onmouseover 事件中调用 clearInterval(timer1); 就可以了。

实现点击圆点移动

javascript function dotsClick() { var len = dots.length; for (var i = 0; i < len; i++) { //考虑闭包这个事情 (function (j) { dots[j].onclick = function () { flag = false; var now = parseInt(nowIndex) / 400; moveleft(-(j + 1) - now); } })(i); } }

这里面有一个闭包，用( func(){} )();这种立即执行函数来使其正常执行。这个函数主要还是使用这样的形式来按照点击调用移动函数。同样在全局调用这个函数。

实现圆点根据所在变色

function dotsColorChange(i) {
//第 i 个圆点class变curent
i --;
console.log(i);
var len = dots.length;
for (var j = 0; j < len; j++) {

  if (j !== i) {
    dots[j].className = "";
  } else {
    dots[i].className = "current";
  }
}
}

这个函数就是给所在的span标签 clsss="current";
这样一个轮播图就结束了。写这个的时候遇见了很多问题，如果发现这篇博客中错误的地方，希望能够给我评论谢谢！

akueq

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
[JavaScript]用JS实现轮播图

用JavaScript实现轮播图效果第一步：HTML第二步：css样式第三步：js代码实现移动实现左右移动箭头实现自动轮播实现点击圆点移动实现圆点根据所在变色用JavaScript实现轮播图效果先附上github地址 lunbotu第一步：HTML先写html代码我将图片放进了&lt;li&gt;标签内，圆点和左右箭头放进...
复制链接

扫一扫