html5ul 轮播按钮,01-原生js轮播图(自动轮播+左右点击+轮播按钮)

* {

padding: 0;

margin: 0;

list-style: none;

border: 0;

}

.all {

width: 500px;

height: 200px;

padding: 7px;

border: 1px solid #ccc;

margin: 100px auto;

position: relative;

}

.screen {

width: 500px;

height: 200px;

overflow: hidden;

position: relative;

}

.screen li {

width: 500px;

height: 200px;

overflow: hidden;

float: left;

}

.screen ul {

position: absolute;

left: 0;

top: 0px;

width: 3000px;

}

.all ol {

position: absolute;

right: 10px;

bottom: 10px;

line-height: 20px;

text-align: center;

}

.all ol li {

float: left;

width: 20px;

height: 20px;

background: #fff;

border: 1px solid #ccc;

margin-left: 10px;

cursor: pointer;

}

.all ol li.current {

background: #DB192A;

}

#arr {

display: none;

}

#arr span {

width: 40px;

height: 40px;

position: absolute;

left: 5px;

top: 50%;

margin-top: -20px;

background: #000;

cursor: pointer;

line-height: 40px;

text-align: center;

font-weight: bold;

font-family: '黑体';

font-size: 30px;

color: #fff;

opacity: 0.3;

border: 1px solid #fff;

}

#arr #right {

right: 5px;

left: auto;

}

• 
• 
• 
• 
• 

< >

// 第一步：

// 获取最大的父元素盒子

// 获取轮播图盒子

// 获取轮播图盒子宽度

// 获取ul

// 获取ul下的所有li

// 获取ol

// 第二步：

// 为ol下添加等同轮播图数量的小按钮

// 鼠标移入到li中，显示下标相等的图片

// 第三步：

// 鼠标移入到元素中，显示左右点击焦点按钮

// 第四步：

// 为左右点击焦点按钮添加点击事件

// 定义移动函数

// 第五步：

// 为轮播图加定时器

// 鼠标移入盒子，停止计时器，鼠标移出，开启计时器

//根据id获取元素对象

function my$(id) {

return document.getElementById(id);

}

// 第一步：获取所有的盒子，保存到变量

// 获取最外面id 为 box的div

var box = document.getElementById('box');

// 获取轮播图盒子

var screen = box.children[0];

// 获取照片的宽度

var imgWidth = screen.offsetWidth;

console.log(imgWidth)

// 获取ul

var ulObj = screen.children[0];

// 获取ul下的li

var list = ulObj.children;

// 获取ol

var olObj = screen.children[1];

// 获取左右焦点父元素

var arr = document.getElementById('arr');

// 声明临时变量pic

var pic = 0;

// 第二步：为ol下添加等同轮播图数量的小按钮

// 遍历ul下的所有li

for (let i = 0; i < list.length; i++) {

// 为ol下创建li标签

var liObj = document.createElement("li");

// 创建好的il添加到ol中

olObj.appendChild(liObj);

// 遍历出来的每个索引的值，赋值给ol下的li中

liObj.innerHTML = [i + 1];

// 在每个ol中的li标签上添加自定义属性，存储索引值

liObj.setAttribute("index",i);

// 为ol下的li注册鼠标进入事件

liObj.onmouseover = function () {

// 遍历ol下的所有li

for (let i = 0; i < olObj.children.length; i++) {

// 移除ol下的每个li的类名

olObj.children[i].removeAttribute("class")

}

// 为当前li动态添加类名

this.className = "current";

// 获取当前的li索引值，声明全局变量pic，保存在变量pic中

pic = this.getAttribute("index");

// 移动ulObj 负(当前索引值乘相框的宽度)

animate(ulObj, -pic * imgWidth);

}

}

// 为ol下的第一个li添加名为current的类

olObj.children[0].className = "current";

// 克隆第一个li加入到ul的最后

ulObj.appendChild(list[0].cloneNode(true));

// 第三步：鼠标移入到元素中，显示左右点击焦点按钮

box.onmouseover = function () {

arr.style.display = "block";

//鼠标进入废掉之前的定时器

clearInterval(timeId);

}

box.onmouseout = function () {

arr.style.display = "none";

//鼠标离开自动播放

timeId = setInterval(clickHandle, 1000);

}

// 第四步：为左右点击焦点按钮添加点击事件

// 点击右边焦点按钮

my$("right").onclick = clickHandle;

function clickHandle() {

// 如果ol下的索引值等于ul下的li长度 -1

if(pic == list.length - 1){

// 初始化索引值

pic = 0;

// 移动ul至距离左边距为0像素

ulObj.style.left = 0 + "px";

}else{

// 索引值++

pic++;

// 相册向左移动距离 == 负(索引值*相框宽度)

animate(ulObj, -pic * imgWidth);

// 如果当前ol下的索引值等于ul下的长度-1;

if (pic == list.length - 1) {

// ol下的所有li清空添加的class名

olObj.children[olObj.children.length - 1].className = "";

// 为ol下的第一个li添加名为curren的类名

olObj.children[0].className = "current";

}else{

// 遍历ol下的所有li

for (let i = 0; i < olObj.children.length; i++) {

// 清空ol下的所有li类属性

olObj.children[i].removeAttribute("class");

}

// 为ol下的第pic个的li添加名为current的类

olObj.children[pic].className = "current";

}

}

}

// 点击左边焦点按钮

my$("left").onclick = function () {

// 如果当前的ol下的li索引值等于0

if( pic == 0 ){

// pic默认为ul下的li长度-1

pic = list.length-1;

// 相框移动距离 = 为第pic个图片乘相框宽度

ulObj.style.left = -pic * imgWidth + "px";

}else{

pic--;

// 相框移动距离 = 向左移动(为第pic个图片乘相框宽度)

animate(ulObj, -pic * imgWidth);

for (let i = 0; i < olObj.children.length; i++) {

// 清空ol下的所有li的类

olObj.children[i].removeAttribute("class")

}

// 为ol下的第pic个添加名为 current 的类

olObj.children[pic].className = "current";

}

}

// 第五步：为轮播图加定时器

var timeId = setInterval(clickHandle, 5000);

// 获取元素的当前位置,移动,每次移动多少像素

function animate(element, target) {

//每次调用这个函数的时候先清理之前的计时器

clearInterval(element.setId);

element.setId = setInterval(function () {

//获取元素当前的位置

var walk = element.offsetLeft;

//每次移动的像素

var step = 15;

//判断移动的步数应该是正数还是负数

step = walk < target ? step : -step;

//当前的位置=之前的当前位置+移动的步数

walk = walk + step;

if (Math.abs(target - walk) < Math.abs(step)) {

//把计时器清理

clearInterval(element.setId);

element.style.left = target + "px";

} else {

//赋值给要移动的元素

element.style.left = walk + "px";

}

}, 20);

}