JS 轮播图是网页特效中最长使用的, 下面用原生 JS 将无缝轮播写出来. 代码中存在大量重复, 不够简洁, 希望各位大神多多指点![for 循环中最好不要直接写函数, 在外部直接定义个命名函数, 然后调用即可, 节省内存. 时间紧就不更改了]
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>
- Document
- </title>
- <style>
- * { margin: 0; padding: 0; } .div { position: relative; width: 600px;
- height: 315px; margin: 100px auto; overflow: hidden; } .tu { position:
- absolute; top: 0; left: 0; width: 9999px; } .tu>li { float: left; } .sort
- { position: absolute; bottom: 10px; right: 20px; width: 120px; height:
- 15px; } .sort li { float: left; width: 15px; height: 15px; list-style:
- none; background-color: yellow; margin-left: 5px; line-height: 15px; text-align:
- center; } .left { position: absolute; top: 50%; left: 0; margin-top: -10px;
- width: 20px; height: 20px; color: #fff; background-color: #000; text-decoration:
- none; line-height: 20px; text-align: center; } .right { position: absolute;
- top: 50%; right: 0; margin-top: -10px; width: 20px; height: 20px; line-height:
- 20px; text-align: center; color: #fff; background-color: #000; text-decoration:
- none; } .sort li { cursor: pointer; } .sort .red { background-color: red;
- }
- </style>
- </head>
- <body>
- <div class="div">
- <ul class="tu">
- <li>
- <img src="https://fz.fp.ps.netease.com/file/5c53b7527f9d2a8f582f6edal74sVUk802"
- alt="">
- </li>
- <li>
- <img src="https://fz.fp.ps.netease.com/file/5c53adb96f049437b27ba42azVaeguom02"
- alt="">
- </li>
- <li>
- <img src="https://fz.fp.ps.netease.com/file/5c52ce2a7f9d2a0c4f659a995VesWReX02"
- alt="">
- </li>
- <li>
- <img src="https://fz.fp.ps.netease.com/file/5c4fbc768b74274b9aa53699mHOOXwZ702"
- alt="">
- </li>
- <li>
- <img src="https://fz.fp.ps.netease.com/file/5c4e8341143cfaf25b0f31b9ll2RB0F202"
- alt="">
- </li>
- </ul>
- <a href="javascript:;" class="left">
- <</a>
- <a href="javascript:;" class="right">
- >
- </a>
- <ul class="sort">
- </ul>
- </div>
- <!-- 原生 js 轮播图 -->
- <script>
- //dom 获取相应的元素
- var lis = document.querySelectorAll('.tu li');
- var sort = document.querySelector('.sort');
- var tu = document.querySelector('.tu');
- var left = document.querySelector('.left');
- var right = document.querySelector('.right');
- // 获取图片的宽度
- var wd = document.querySelector('.div').offsetWidth;
- console.log(wd);
- //1.1 根据图片的数量动态创建序号
- for (var i = 0; i < lis.length; i++) {
- var li = document.createElement('li');
- li.innerText = i + 1;
- sort.appendChild(li);
- }
- // 实现访问到序号上跳转到相应的图片上
- var lis2 = document.querySelectorAll('.sort>li');
- lis2[0].className = 'red';
- for (var i = 0; i < lis2.length; i++) {
- lis2[i].abc = i;
- lis2[i].onmouseover = function() {
- animate(tu, -this.abc * wd);
- for (var j = 0; j < lis2.length; j++) {
- lis2[j].className = '';
- }
- this.className = 'red';
- t_index = this.abc;
- }
- }
- // 无缝轮播
- // 克隆第一张图片
- var li1 = lis[0].cloneNode(true);
- tu.appendChild(li1);
- // 自己封装的动画方法函数
- var timeId = null;
- function animate(ul, target) {
- if (timeId) {
- clearInterval(timeId);
- timeId = null;
- }
- timeId = setInterval(function() {
- var step = 20;
- var current = tu.offsetLeft;
- if (target < current) {
- step = -step;
- }
- if (Math.abs(target - current) <= Math.abs(step)) {
- ul.style.left = target + 'px';
- return;
- }
- current += step;
- ul.style.left = current + 'px';
- },
- 20);
- }
- // 实现点击下一页跳转
- // 假设当前为第一张
- var t_index = 0;
- right.onclick = function() {
- if (t_index > 4) {
- tu.style.left = 0;
- t_index = 1;
- lis2[t_index].onmouseover();
- animate(tu, -t_index * wd);
- return;
- }
- if (t_index > 3) {
- for (var j = 0; j < lis2.length; j++) {
- lis2[j].className = '';
- }
- lis2[0].className = 'red';
- animate(tu, -(t_index + 1) * wd);
- t_index++
- return;
- }
- t_index++;
- lis2[t_index].onmouseover();
- animate(tu, -t_index * wd);
- }
- // 点击上一张
- left.onclick = function() {
- if (t_index <= 0) {
- t_index = 5;
- tu.style.left = -t_index * wd + 'px';
- for (var j = 0; j < lis2.length; j++) {
- lis2[j].className = '';
- }
- lis2[4].className = 'red';
- }
- t_index--;
- lis2[t_index].onmouseover();
- animate(tu, -t_index * wd);
- }
- </script>
- </body>
- </HTML>
来源: http://www.qdfuns.com/article/51720/7a63249e6051bba1d43aa4355ff4d9a3.html