JS实现简单图片轮播效果
更新时间：2021年05月19日 15:32:08 作者：一纸岚风
这篇文章主要为大家详细介绍了JS实现简单图片轮播效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JS实现简单图片轮播效果的具体代码，供大家参考，具体内容如下
实现效果
- 左右按钮可点击左右移动显示图片进行无缝滚动
- 下面的小圆圈点击可跳到对应的图片索引
- 不进行上述操作时，图片自动轮播
html源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carousel chart</title>
<link rel="stylesheet" href="./style.css" >
<script src="./index.js"></script>
<script src="./animate.js"></script>
</head>
<body>
<div class="carousel_box" id="carousel-box">
<a href="javascript:;" class="arrow-l">
< </a>
<a href="javascript:;" class="arrow-r"> > </a>
<ul class="move">
<li><img src="./images/xuezhong_1.jpg" alt=""></li>
<li><img src="./images/guimizhizhu_2.jpg" alt=""></li>
<li><img src="./images/jianlai_3.jpg" alt=""></li>
<li><img src="./images/yichang_4.jpg" alt=""></li>
</ul>
<ol class="circle">
</ol>
</div>
</body>
</html>
一个大的div盒子里面，两个左右悬浮于中间的按钮，四张图片，一行相对于下面的小圆圈
CSS源码
*{
padding: 0;
margin: 0;
}
li {
list-style-type: none;
}
#carousel-box {
position: relative;
width: 700px;
height: 300px;
background-color: pink;
margin: 100px auto;
overflow: hidden;
}
.arrow-l,.arrow-r {
display: none;
position:absolute;
width: 24px;
height: 40px;
top: 50%;
margin-top: -20px;
background: rgba(0, 0, 0, 0.3);
text-align:center;
line-height: 40px;
color: #fff;
font-size: 18px;
font-family: 'icomoon';
z-index: 3;
}
.arrow-r {
right: 0;
}
#carousel-box img{
width: 700px;
height: 300px;
}
#carousel-box ul {
position:absolute;
width: 1000%;
}
#carousel-box ul li {
float: left;
}
.circle {
position: absolute;
bottom: 10px;
right: 10px;
}
.circle li {
float: left;
width: 8px;
height: 8px;
margin: 0 5px;
border: 2px solid rgba(255, 255, 255, 0.5);
border-radius: 50%;
cursor: pointer;
z-index: 9999;
}
.current {
background-color: pink;
}
JS源码
animate.js：在水平平面实现左右移动的函数
function animate(obj, target, callback) {
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);
callback && callback();
}
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
index.js
window.addEventListener('load', function () {
var carousel = document.querySelector('.carousel_box');
var ul = document.querySelector('.move');
var ol = document.querySelector('.circle');
var carcouselWidth = carousel.offsetWidth;
var arrow_l = document.querySelector('.arrow-l');
var arrow_r = document.querySelector('.arrow-r');
carousel.addEventListener('mouseenter', function () {
arrow_r.style.display = 'block';
arrow_l.style.display = 'block';
clearInterval(timer);
timer = null; // 清除定时器变量
})
carousel.addEventListener('mouseleave', function () {
arrow_r.style.display = 'none';
arrow_l.style.display = 'none';
timer = setInterval(function () {
arrow_r.click();
}, 2000);
})
var num = 0;
var circle = 0;
// 根据图片数量生成相对应的小圆圈
for (var i = 0; i < ul.children.length; i++) {
var li = document.createElement('li');
li.setAttribute('index', i);
ol.appendChild(li);
li.addEventListener('click', function () {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
this.className = 'current';
var n = this.getAttribute('index');
num = n;
circle = n;
animate(ul, -n * carcouselWidth);
console.log(n);
})
}
ol.children[0].className = 'current';
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
var flag = true;
/* function circleChange() {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[circle].className = 'current';
} */
arrow_r.addEventListener('click', function () {
if (flag) {
flag = false;
if (num == ul.children.length - 1) {
ul.style.left = 0;
num = 0;
}
num++;
animate(ul, -num * carcouselWidth, function () {
flag = true;
});
}
circle++;
if (circle == ol.children.length) {
circle = 0;
}
circleChange();
})
arrow_l.addEventListener('click', function () {
if (flag) {
flag = false;
if (num == 0) {
num = ul.children.length - 1;
ul.style.left = -num * carcouselWidth + 'px';
}
num--;
animate(ul, -num * carcouselWidth, function () {
flag = true;
});
circle--;
circle = circle < 0 ? ol.children.length - 1 : circle;
// 调用函数
circleChange();
}
});
function circleChange() {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[circle].className = 'current';
}
var timer = setInterval(function () {
arrow_r.click();
}, 2000);
心得：在js实现功能中，如何根据图片数量生成小圆圈并能无缝滚动需要重点注意。
未解决的bug：多次快速点击小圆圈跳转后，可能会导致小圈圈与图片索引位置错乱，同样点击左右按钮也有可能出现类似问题。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
关于JavaScript作用域你想知道的一切，本文全部告诉大家，帮助大家全面的了解JavaScript作用域，感兴趣的小伙伴们可以参考一下2016-02-02
腾讯位置服务为微信小程序提供了基础的标点能力、线和圆的绘制接口等地图组件和位置展示、地图选点等地图API位置服务能力支持,下面这篇文章主要给大家介绍了关于微信小程序如何实现快速精确定位的相关资料,需要的朋友可以参考下2023-06-06
这篇文章为大家分享了轻量级Bootstrap Table表格插件，以表格的形式显示的数据，支持单选，复选框，排序，分页,显示/隐藏列等操作，感兴趣的小伙伴们可以参考一下2016-05-05
Javascript实现关联数据(Linked Data)查询及注意细节
DBpedia对Wikipedia的数据变成Linked Data形式，使得机器也能读懂并自由获得这些数据;本文的主要目的是利用Javascript从DBpedia中获取我们想要的数据,感兴趣的朋友可以参考下，希望可以帮助到你2013-02-02
今天小编就为大家分享一篇layui树形菜单动态遍历的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要为大家详细介绍了JavaScript定时器实现限时秒杀功能，适合用于电商节日活动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
什么是Node.js?还服务器端javascript?对于这个概念我在这篇文章不做解释，可以自己去搜索了解下，服务器端js不是新技术，只是最近的node.js的火爆让他爆发了，我会在以后的文章里解释什么是node.js2012-05-05
这篇文章主要为大家详细介绍了JS实现添加缓动画的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
javascript函数报Uncaught ReferenceError: XXX is not define
本文主要介绍了javascript函数报Uncaught ReferenceError: XXX is not defined，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
这篇文章主要为大家详细介绍了js省市区级联查询，包括插件版和无插件版，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
最新评论