| 【Javascript】入门之实现图片切换与轮播 | 您所在的位置：网站首页 › js轮播图点击左右切换 › 【Javascript】入门之实现图片切换与轮播 |
【Javascript】入门之实现图片切换与轮播
|
目录 1.图片切换之点击切换 2.图片切换之点击切换与圆点切换 3.图片切换之定时器切换 1.图片切换之点击切换 描述: 点击右箭头向后切换图片,切换到第四张返回第一张 1--2--3--4-(判断)-1 点击左箭头向前切换图片, 切换到第一张返回第四张 4--3--2--1-(判断)-4
1/4 动漫1 /* 描述： 1--2---3---4-(判断)-1 4--3--2--1--(判断)-4*/ //2.1 点击右箭头, 图片往后移一个1--2--3--4--(判断)--1 //2.1.1 获取左右箭头, 图片img,序号, 描述 var rightbtn = document.getElementById("rightbtn"); var leftbtn = document.getElementById("leftbtn"); var img = document.getElementById("img"); var sequence = document.getElementById("sequence"); var desc = document.getElementById("desc"); console.log(leftbtn,rightbtn,img,sequence,desc); //2.1.2 用数组存储四张图片 var arr = ["./img/11.jpg","./img/22.jpg","./img/33.jpg","./img/44.jpg"] console.log(arr); //2.1.3 不知道当前什么状态, 假设为第一张图片 var i = 0; //2.1.4 给右箭头添加点击事件 rightbtn.onclick = function(){ // 切换到下一张 i++; // 判断 if(i > 3) i = 0; console.log(i); // 修改图片地址 img.src = arr[i]; // 修改序号 sequence.innerHTML = (i+1) + "/4"; // 修改描述 desc.innerHTML = "动漫"+ (i+1); } // 2.1.5 给左箭头添加点击事件 leftbtn.onclick = function(){ // 切换到前一张 i--; // 判断 if(i < 0) i = 3; console.log(i); // 修改图片地址 img.src = arr[i]; // 修改序号 sequence.innerHTML = (i+1) + "/4"; // 修改描述 desc.innerHTML = "动漫"+ (i+1); } 2.图片切换之点击切换与圆点切换 描述: 点击右箭头，图片切换1 - 2 - 3 - 4 - 1 点击左箭头，图片切换 4 - 3 - 2 - 1 - 4 点击圆点，图片切换到对应图片
1/4 美女1 /* 描述： 1--2---3---4-(判断)-1 4--3--2--1--(判断)-4 点击左右箭头, 将图片切换到对应的图片 */ //2. 点击右箭头, 图片往后移一个1--2--3--4--(判断)--1 //2.1 获取box, 左右箭头, 图片img,序号, 描述, lis var box = document.getElementById("box"); var rightbtn = document.getElementById("rightbtn"); var leftbtn = document.getElementById("leftbtn"); var img = box.getElementsByTagName("img")[0]; var sequence = document.getElementById("sequence"); var desc = document.getElementById("desc"); var lis = box.getElementsByTagName('li'); console.log(box,leftbtn,rightbtn,img,sequence,desc,lis); //2.2 用数组存储四张图片 var arr = ["./images/1.jpg","./images/2.jpg","./images/3.jpg","./images/4.jpg"] console.log(arr); //2.3 不知道当前什么状态, 假设为第一张图片 var n = 0; //2.4 给右箭头添加点击事件 rightbtn.onclick = function(){ // 切换到下一张 n++; // 调用move()方法 move(); } // 2.5 给左箭头添加点击事件 leftbtn.onclick = function(){ // 切换到前一张 n--; // 调用move()函数 move(); } /* 3. 点击切换按钮, 切换到对应图片 */ // 3.1 不知道是第几张图, 假设存一下 // 对每一个li进行遍历 for(var i = 0; i < lis.length; i++){ // 使用自定义索引对i进行保存 lis[i].index = i; lis[i].onclick = function(){ // 由于小圆点和图片一一对应, 小圆点的下标对应为图片的下标 // 用自定义索引切换n, 获取小圆点的下标 console.log(this.index); // n随着小圆点改变 n = this.index; // 调用函数 move(); } } // 函数封装 function move(){ // 判断 if(n > 3) n = 0; if(n < 0) n = 3; console.log(n); // 修改图片地址 img.src = arr[n]; // 修改序号 sequence.innerHTML = (n+1) + "/4"; // 修改描述 desc.innerHTML = "美女"+ (n+1); // 更改小圆点背景色 // 利用排他清空所有样式 for(var j = 0; j < lis.length; j++){ lis[j].className = ''; } // 给当前点击的圆点添加active样式 lis[n].className = 'active'; } 3.图片切换之定时器切换 描述: 每隔3s, 将图片切换成下一张间隔定时器: setInterval(函数, 时间) 时间单位: ms 每隔一段时间就让函数调用一次 应用: 轮播图、计数器 、定时器 、倒计时等
/*
数组存图片地址
*/
var arr = ['../img/1.jpg','../img/2.jpg','../img/3.jpg','../img/4.jpg'];
var img = document.getElementsByTagName('img')[0];
// 每隔3s, 将图片切换成下一张
// 不知道是第几张
var n = 0;
// 清除定时器
clearInterval(img.t);
img.t = setInterval(function(){
// 将图片切换成下一张 图片地址存储在arr数组中
// 改变的是下标
n++;
// 判断是不是最后一张
if(n == arr.length){
n = 0;
}
console.log(arr[n]);
// 改变图片的地址
img.src = arr[n];
}, 3000)
|
【本文地址】
公司简介
联系我们