目前自己在学习 JS 中, 用目前学到的东西写了一个轮播图, 能完整的实现轮播图的功能, 但是肯定还是有不完善的地方, 也希望大家能留言交流, 一起学习.
一, 思路
首先将功能一个一个理顺, 主要功能分为三大块:
(一) 点击左右按钮, 实现更换图片并循环.
(二) 图片自动定时切换, 当鼠标在图片上时暂停切换, 移出时恢复.
(三) 轮播图上导航点变换与点击切换
二, 实现
- <!doctype html>
- <head>
- <title > 轮播图 </title>
- <meta charset="utf-8">
- <style>
- *{
- padding:0;
- margin:0;
- box-sizing: content-box;
- text-decoration: none;
- }
- #container {
- width:600px;
- height:300px;
- border:1px red solid;
- overflow: hidden;
- position: relative;
- }
- #list {
- position: absolute;
- z-index: 1;
- width: 3000px;
- }
- #list img {
- width: 600px;
- height: 300px;
- padding: 0;
- margin: 0;
- }
- #prev {
- position: absolute;
- top: 40%;
- left: 0;
- height:70px;
- width: 30px;
- z-index: 2;
- }
- #next {
- position: absolute;
- top: 40%;
- right: 0;
- height:70px;
- width: 30px;
- z-index: 2;
- }
- #list-buttons {
- position: absolute;
- bottom: 5%;
- z-index: 2;
- width:600px;
- text-align: center;
- }
- #list-buttons span{
- display: inline-block;
- width: 10px;
- height: 10px;
- background-color: #ffffff;
- border-radius: 100%;
- }
- #list-buttons .on{
- background-color: #b2b2b2;
- }
- </style>
- </head>
- <body>
- <div id="container">
- <div id="list" style="left: 0px;"> <!-- 0px 为初始位置 -->
- <img src="img-01.jpg" alt="1">
- <img src="img-02.jpg" alt="1">
- <img src="img-03.jpg" alt="1">
- </div>
- <div id="list-buttons">
- <span class="on"></span>
- <span></span>
- <span></span>
- </div>
- <div>
- <button id="prev" class="button" type="button"><</button>
- <button id="next" class="button" type="button">></button>
- </div>
- </div>
- <body>
(一) 左右按钮切换图片
首先取得操作切换图片的元素:
- var prev = document.getElementById('prev');
- var next = document.getElementById('next');
然后我用三张图片组成了一串图片条, 以图片条的左边缘作为图片的起始位置, 通过不断修改图片的起始位置, 从而让图片显示在可显示的区域里.
这里写了两个函数, 分别对应左右的切换按钮.
这里图片的宽段是 600px, 要点击 next 按钮让图片切换下一张, 那就得在让图片条向左移动 600px. 为了让切换的图片能够循环, 当到达最后一张图片的位置时, 再点击下一张按钮, 就会重置到第一张图片, 以此循环.
- var initial = parseInt(list.style.left); //listImage 的初始数值
- function nextMove(){
- initial -= 600; // 图片向左滑动
- if(initial <-1200){
- initial = 0;
- }
- list.style.left = initial + 'px';
- // 调用 dot 函数, 判断当前点的位置
- dot();
- }
- function prevMove(){
- initial += 600; // 图片向右滑动
- if(initial> 0){
- initial = -1200;
- }
- list.style.left = initial + 'px';
- }
(二) 图片自动定时切换与当鼠标在图片上时暂停切换, 移出时恢复
要实现定时自动播放, 那就得用 window.setInterval() 方法, 在指定的时间间隔调用函数, 同时将它返回的值赋给变量 time, 这里就实现了自动切换.
var time = window.setInterval(nextMove, 2000);
.setInterval() 方法还有一个对应的 clearInterval() 方法, 用来取消调用函数. 所以我就写了一个函数, 来判断鼠标的状态是移进还是移出, 并给图片区域绑定了事件处理程序, 这样当鼠标移进就会暂停, 移出继续.
- var container = document.getElementById('container');
- container.addEventListener('mouseenter', state, false);
- container.addEventListener('mouseleave', state, false);
- function state(eventName){
- switch(eventName.type){
- case 'mouseenter':
- window.clearInterval(time);
- break;
- case 'mouseleave':
- time = window.setInterval(nextMove, 2000);
- break;
- }
- }
(三) 轮播图上导航点变换与点击切换
首先要实现点跟着图片进行变换, 所以声明一个函数, 判断当前图片条的位置, 来对应设置相应位置的导航点样式, 并取消其他导航点的样式.
- var listBtn = document.getElementsByTagName('span');
- function dot(){
- switch(initial){
- case 0:
- console.log('0px');
- listBtn[0].className = 'on';
- listBtn[1].className = '';
- listBtn[2].className = '';
- break;
- case -600:
- console.log('-600px');
- listBtn[0].className = '';
- listBtn[1].className = 'on';
- listBtn[2].className = '';
- break;
- case -1200:
- console.log('-1200px');
- listBtn[0].className = '';
- listBtn[1].className = '';
- listBtn[2].className = 'on';
- break;
- }
- }
最后就是当点击相应的导航点时, 跳转到对应的图片上了. 为此, 我给每个导航点添加了一个索引属性, 再通过判断点击的是第几个导航点, 切换到对应的图片位置就可以了.
- for(let i = 0; i < listBtn.length; i++){
- listBtn[i].index = i;
- listBtn[i].addEventListener('click', function(){
- switch(listBtn[i].index){
- case 0:
- initial = 0;
- dot();
- list.style.left = '0px';
- break;
- case 1:
- initial = -600;
- dot();
- list.style.left = '-600px';
- break;
- case 2:
- initial = -1200;
- dot();
- list.style.left = '-1200px';
- break;
- }
- }, false);
- }
以上就是整个轮播图的实现过程.
2018-07-20
来源: http://www.bubuko.com/infodetail-2693423.html