学习笔记-原生JS实现轮播图
这几天在学习前端的相关知识，想到写一个轮播图练练手。本本章基于下面的这篇博文。
如何用原生JS实现简单轮播图（仿京东商城效果）
但是在实际项目中轮播图中的图片和数量是不确定的。
所以图片<img>和 小圆点<span>还有图片所在的<div>的宽度是要在js代码里动态生成。
根据图片个数生成对应<img>数量和所在<div>的宽度：
var list = document.getElementById('list');//<img>所在的div
var imglist = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"];
window.onload = funcation(){
function $(id) {return document.getElementById(id);}
//设置所在<div>的宽度
list.setAttribute("style","width:"+(imglist.length*600)+"px; left: 0px;");
//动态加载图片
for(var i=0;i<imglist.length;i++){
var img = document.createElement("img");//生成img标签
list.appendChild(img);
(list.children)[i].setAttribute("src",imglist[i]);//给img标签设置图片
}
}
这里我们新建一个imglist来存所有的图片，在window.onload中根据imglist中图片的个数来生成<img>标签,然后通过setAttribute方法来设置属性。
根据图片个数生成对应<span>小圆点：
//动态生成轮播图小圆点
var cicle = document.createElement("div");
cicle.setAttribute("id", "buttons");
for (var i = 0; i < imglist.length; i++) {
var span = document.createElement("span");
// span.innerHTML = i + 1;
cicle.appendChild(span);
}
$("container").appendChild(cicle);
var spanChildren = cicle.children;
spanChildren[0].setAttribute("class", "on");
for (var i = 0; i < spanChildren.length; i++) {
//设置点击事件
spanChildren[i].setAttribute("onclick", "spanClick(" + i + ")");
}
//小圆点已经添加完成了，可以进行赋值
var buttons = document.getElementById("buttons").getElementsByTagName('span');
bts = buttons;
先生成小圆点所在的<div>,设置id为buttons，再创建小圆点<span><小圆点的个数等于图片的数量，把这个div加到整个轮播图的最外层的<div>中，然后给第一个小圆点增加class样式(因为首先显示的是第一张)，给所有的小圆点增加点击事件。
然后还有其他的修改在源码里查看吧，在css文件里，可以把list的样式中的width注释掉
源码：
<!DOCTYPE html>
<html>
<!-- 实现了动态添加小圆点 -->
<head>
<meta charset="utf-8" />
<title>Page Title</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="container">
<!--图片-->
<div id="list" style="left: 0px;">
<!-- <img src="img/1.jpg" />
<img src="img/2.jpg" />
<img src="img/3.jpg" />
<img src="img/4.jpg" />
<img src="img/5.jpg" /> -->
</div>
<!--圆点按钮-->
<!-- <div id="buttons">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div> -->
<!--左右切换按钮-->
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div>
<script>
var timer;
var index = 0;
var list = document.getElementById('list');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var container = document.getElementById('container');
// var buttons = document.getElementById('buttons').getElementsByTagName('span');
//因为小圆点换成了动态的了，所以在窗口加载过程(window.onload)中给bts赋值。
//要等到小圆点全部添加完成后才能进行赋值。
var bts;
//假数据
var imglist = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"];
//600是这个图片的宽度
window.onload = function () {
function $(id) {
return document.getElementById(id);
}
list.setAttribute("style","width:"+(imglist.length*600)+"px; left: 0px;");
//动态加载图片
for(var i=0;i<imglist.length;i++){
var img = document.createElement("img");
list.appendChild(img);
(list.children)[i].setAttribute("src",imglist[i]);
}
//动态生成轮播图小圆点
var cicle = document.createElement("div");
cicle.setAttribute("id", "buttons");
for (var i = 0; i < imglist.length; i++) {
var span = document.createElement("span");
// span.innerHTML = i + 1;
cicle.appendChild(span);
}
$("container").appendChild(cicle);
var spanChildren = cicle.children;
spanChildren[0].setAttribute("class", "on");
for (var i = 0; i < spanChildren.length; i++) {
spanChildren[i].setAttribute("onclick", "spanClick(" + i + ")");
}
//小圆点已经添加完成了，可以进行赋值
var buttons = document.getElementById("buttons").getElementsByTagName('span');
bts = buttons;
prev.onclick = function () {
index -= 1;
if (index == -1) {
index = 4;
}
buttonShow();
animate(600, "prev");
}
next.onclick = function () {
//由于上边定时器的作用，index会一直递增下去，我们只有5个小圆点，所以需要做出判断
index += 1;
if (index == 5) {
index = 0;
}
buttonShow();
animate(600, "next");
}
//圆点点击切换图片
// for (var i = 0; i < buttons.length; i++) {
// buttons[i].onclick = function () {
// //偏移量获取：这里获取鼠标移动到小圆点的位置，用this把index绑定到对象buttons[i]上
// //由于这里的index是自定义的属性，需要用到getAttribute()这个DOM2级方法，去获取自定义indexde的属性
// var clickIndex = parseInt(this.getAttribute('index'));
// var offset = 600 * (index - clickIndex);
// animate(offset);
// index = clickIndex;
// buttonShow(buttons);
// }
// }
}
/*
offset:移动的距离
operating:操作的按钮
*/
function animate(offset, operating) {
//获取的是style.left，是相对左边获取距离，所以第一张图后style.left都为负值，
//且style.left获取的是字符串，需要用parseInt()取整转化为数字。
if (operating == "next") {
console.log("进入了next");
var newLeft = parseInt(list.style.left) - offset;
if (newLeft < -((imglist.length-1) * offset)) {
list.style.left = 0 + 'px';
} else {
list.style.left = newLeft + 'px';
}
} else if (operating == "prev") {
console.log("进入了prev");
var newLeft = parseInt(list.style.left) + offset;
if (newLeft > 0) {
list.style.left = -((imglist.length-1) * offset) + 'px';
} else {
list.style.left = newLeft + 'px';
}
} else {
console.log("圆点点击");
var newLeft = offset;
list.style.left = newLeft + 'px';
}
}
function spanClick(i) {
console.log("圆点点击:" + i);
if (i == index) {
return
}
var clickIndex = i;
var offset = -(600 * clickIndex);
console.log("offset:" + offset);
animate(offset, "spanclick");
index = clickIndex;
buttonShow();
}
function play() {
timer = setInterval(function () {
next.onclick()
}, 1500)
}
play();
function stop() {
clearInterval(timer);
}
container.onmouseover = stop;
container.onmouseout = play;
function buttonShow() {
//这里需要清除之前的样式
for (var i = 0; i < bts.length; i++) {
if (bts[i].className == "on") {
bts[i].className = "";
}
}
//数组从0开始，index也从0开始
bts[index].className = "on";
}
</script>
</body>
</html>
535
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
