本文实例为大家分享了纯js实现图片自动切换的具体代码，供大家参考，具体内容如下

1.鼠标经过的时候左右两个小按钮会自动弹出，自动播放停止，点击左右小按钮可以切换图片；

2. 鼠标离开，恢复自动播放；

3. 点击下方中间几个小圆圈，也会自动切换图片；

源代码：

document

* {

margin: 0;

padding: 0;

}

/* 轮播图盒子样式 */

.lunbotu {

position: relative;

width: 520px;

height: 280px;

margin: 50px auto;

background-color: blue;

overflow: hidden;

}

/* 左右按钮样式 */

.left,

.right {

display: none;

position: absolute;

top: 50%;

margin-top: -15px;

width: 30px;

height: 30px;

background-color: cornsilk;

border-radius: 15px;

text-align: center;

line-height: 30px;

cursor: pointer;

z-index: 1;

}

.left {

left: 0;

}

.right {

right: 0;

}

li {

list-style: none;

}

/* 设置图片的ul的样式 */

.firstul {

position: absolute;

top: 0;

left: 0;

width: 500%;

}

.firstul li {

float: left;

/* display: none; */

}

/* 设置小圆圈的样式 */

ol {

/* width: 90px; */

padding: 0 5px 0 5px;

position: absolute;

bottom: 10px;

left: 50%;

margin-left: -45px;

background-color: darkgrey;

text-align: center;

border-radius: 9px;

}

ol li {

display: inline-block;

width: 15px;

height: 15px;

border-radius: 50%;

margin-right: 5px;

background-color: white;

cursor: pointer;

}

.current {

background-color: red;

}

// 1.获取事件源

var lunbotu = document.queryselector('.lunbotu');

var leftbox = document.queryselector('.left');

var rightbox = document.queryselector('.right');

var ul = lunbotu.queryselector('ul');

var ol = lunbotu.queryselector('ol');

var right = document.queryselector('.right');

var left = document.queryselector('.left');

var lunbotuwidth = lunbotu.offsetwidth;

// console.log(ul)

// console.log(ol)

// 第一步：

// 鼠标经过轮播图的时候，左右小按钮弹出

lunbotu.addeventlistener('mouseenter', function () {

leftbox.style.display = 'block';

rightbox.style.display = 'block';

// 鼠标经过轮播图的时候，停止定时器

clearinterval(timer);

})

// 鼠标离开轮播图的时候，左右小按钮隐藏

lunbotu.addeventlistener('mouseleave', function () {

leftbox.style.display = 'none';

rightbox.style.display = 'none';

timer = setinterval(function () {

right.click();

}, 2000)

})

// 第二步：

// 1.动态生成小圆圈

// 2.小圆圈的个数要跟图片一样

// 3.先得到ul里面图片的张数(图片放入li里面，所以就是li的个数)

// 4.利用循环动态生成小圆圈(这个小圆圈要放入ol里面)

// 5.创建节点createelement('li')]

// 6.插入节点ol.appendchild(li)

// 7.第一个小圆圈需要添加current类

for (var i = 0; i < ul.children.length; i++) {

// 创建一个li

var li = document.createelement('li')

// 记录当前小圆圈的索引号 通过自定义属性来做

li.setattribute('index', i);

// 把li添加到ol

ol.appendchild(li);

}

// 排他思想：让小li变白色

for (var i = 0; i < ol.children.length; i++) {

ol.children[i].addeventlistener('click', function () {

for (var i = 0; i < ol.children.length; i++) {

ol.children[i].classname = '';

} this.classname = 'current';

// 点击小圆圈的时候切换到对应的图片

// 得到索引号 index

var index = this.getattribute('index');

// 解决小bug

num = index;

num_ol = index;

// console.log(lunbotuwidth);

// console.log(index)

animation(ul, - index * lunbotuwidth)

})

}

// 给第一个li变颜色

ol.children[0].classname = 'current';

// 克隆第一个li

var first = ul.children[0].clonenode(true);

ul.appendchild(first);

// 第三步:

// 点击右边按钮事件

var num = 0;

// 点击右侧按钮的时候小圆圈跟着滚动

var num_ol = 0;

// 节流阀，防止点击过快，最后才加这句优化

var flag = true;

// 右侧按钮：

right.addeventlistener('click', function () {

if (flag) {

flag = false; // 关闭节流阀

if (num == ul.children.length - 1) {

ul.style.left = 0;

num = 0;

}

num++;

animation(ul, -num * lunbotuwidth, function () {

flag = true;

});

num_ol++;

if (num_ol == ol.children.length) {

num_ol = 0

}

for (var i = 0; i < ol.children.length; i++) {

ol.children[i].classname = '';

}

ol.children[num_ol].classname = 'current';

}

});

// 左侧按钮：

left.addeventlistener('click', function () {

if (flag) {

flag = false;

if (num == 0) {

ul.style.left = -(ul.children.length - 1) * lunbotuwidth + 'px';

num = ul.children.length - 1;

}

num--;

animation(ul, -num * lunbotuwidth, function () {

flag = true;

});

num_ol--;

// num_ol=0的时候需要，点击左侧按钮，需要转跳到ol.children.length-1的位置

if (num_ol < 0) {

num_ol = ol.children.length - 1

}

for (var i = 0; i < ol.children.length; i++) {

ol.children[i].classname = '';

}

ol.children[num_ol].classname = 'current';

}

});

// 自动播放图片

var timer = setinterval(function () {

right.click();

}, 2000)

5.js文件的代码

// 封装了一个动画js文件

function animation(obj,target,fn1){

// console.log(fn1);

// fn是一个回调函数，在定时器结束的时候添加

// 每次开定时器之前先清除掉定时器

clearinterval( obj.timer);

obj.timer = setinterval(function(){

// 步长计算公式 越来越小

// 步长取整

var step = (target - obj.offsetleft) /10;

step = step > 0 ? math.ceil(step) :math.floor(step);

if(obj.offsetleft == target){

clearinterval( obj.timer);

// 如果fn1存在，调用fn

if(fn1){

fn1();

}

}else{

// 每50毫秒就将新的值给obj.left

obj.style.left = obj.offsetleft +step +'px';

}

},30)

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持萬仟网。