javascript实现图片轮播简单效果
更新时间：2022年07月12日 17:25:01 作者：叶随枫舞丶
这篇文章主要为大家详细介绍了javascript实现图片轮播简单效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了javascript实现图片轮播简单效果的具体代码，供大家参考，具体内容如下
这里是css样式
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
img {
display: block;
/*vertical-align: middle;*/
}
a {
text-decoration: none;
}
input {
outline: none;
}
.clearFix:after {
content: "";
display: table;
clear: both;
}
#box {
position: relative;
width: 500px;
height: 300px;
margin: 50px auto;
overflow: hidden;
}
#box .imglist {
position: absolute;
left: -500px;
top: 0;
width: 3500px;
height: 300px;
}
#box .imglist li {
float: left;
width: 500px;
height: 300px;
}
#box .imglist li img {
width: 500px;
height: 300px;
}
#box span {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 25px;
height: 50px;
background-color: rgba(200, 200, 200, 0.7);
font-size: 20px;
text-align: center;
line-height: 50px;
color: white;
opacity: 0;
transition: opacity 1s;
}
#box .left {
left: 0;
}
#box .right {
right: 0;
}
#box .btnlist {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 10px;
overflow: hidden;
}
#box .btnlist li {
float: left;
width: 10px;
height: 10px;
margin-right: 10px;
border-radius: 50%;
background-color: gray;
}
#box .btnlist li.current {
background-color: red;
}这里是body里的div，我的图片都是宽500px的，你也可以改其尺寸的，不过相应的js代码也要更改
<div id="box"> <ul class="imglist"> <li><img src="images/yaya5.jpg" /></li> <li><img src="images/yaya1.jpg" /></li> <li><img src="images/yaya2.jpg" /></li> <li><img src="images/yaya3.jpg" /></li> <li><img src="images/yaya4.jpg" /></li> <li><img src="images/yaya5.jpg" /></li> <li><img src="images/yaya1.jpg" /></li> </ul> <span class="left"> < </span> <span class="right"> > </span> <ul class="btnlist"> <li class="current"></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>
这里是js代码,代码大部分地方都做了注释
// 元素对象
var left = document.querySelector(".left");
var right = document.querySelector(".right");
var imglist = document.querySelector(".imglist");
var box = document.querySelector("#box");
var dots = document.querySelectorAll(".btnlist li");
// 变量区
var imgWidth = 500; //图片的宽度
var time = 500; //切换一张图片耗费的时间
var steps = 50; //步数
var interval = 10; //定时任务的时间间隔
var current_red = 0;
// isMoving变量用于判断当前是否正在切图中
var isMoving = false;
// 自动轮播定时任务的id值
var autoId;
// 鼠标移入时显示左右箭头，移出时隐藏左右箭头
box.addEventListener("mouseenter", function (e) {
left.style.opacity = 1;
right.style.opacity = 1;
// 鼠标移入到box时停止轮播
clearInterval(autoId);
});
box.addEventListener("mouseleave", function (e) {
left.style.opacity = 0;
right.style.opacity = 0;
// 鼠标移出box时开启自动轮播
autoMove();
});
// 对左右箭头设置点击事件
function move(e, direction) {
// isMoving为true时表示正在切换图片，不能再执行move函数的代码
if (isMoving) {
return;
}
isMoving = true;
// 获取当前imglist的位置
var start_x = imglist.offsetLeft;
var end_x;
// 判断direction的数据类型
if (typeof direction === "number") {
end_x = direction;
var delta_x = end_x - start_x;
} else {
// 通过点击的箭头确定图片移动的距离
var delta_x = direction === "left" ? imgWidth : -imgWidth;
// 计算要移动到的位置
end_x = start_x + delta_x;
}
// 计算每一步移动的距离
var step_dis = delta_x / steps;
var next_inter_id = setInterval(function () {
var current_x = imglist.offsetLeft;
current_x += step_dis;
imglist.style.left = current_x + "px";
// 条件成立表示完成了此次图片的切换，清除定时器
if (current_x === end_x) {
// current_x等于0表示此时显示的是位置上的第一张图片(第一个li)，我们要切换到倒数第二张去。
if (current_x === 0) {
imglist.style.left = -2500 + "px";
// current_x等于-3000表示此时显示的是位置上的最后一张(第七个li),我们要切换到第二张图片去。
} else if (current_x === -3000) {
imglist.style.left = -500 + "px";
}
clearInterval(next_inter_id);
// 图片切换完成时切换小圆点,传入的参数是此时imglist的left属性的值
changeDots(current_x);
// 图片切换完成，可以继续点击箭头或小圆点切图了
isMoving = false;
}
}, interval);
}
right.addEventListener("click", function (e) {
move(e, "right");
});
left.addEventListener("click", function (e) {
move(e, "left");
});
/*
无限循环的实现思路：在首尾各添加一张图片，首部添加第五张图片，尾部添加第一张图片
1、改变imglist的宽度
2、改变imglist元素中left的值
3、在添加两张图片后，轮播到第一张和最后一张时实现切换。
*/
// 小圆点的切换
function changeDots(current_x) {
/*
current_x可能的取值：0 -500 -1000 -1500 -2000 -2500 -3000
除以-500： 0 1 2 3 4 5 6
整体减去1： -1 0 1 2 3 4 5
*/
var index = current_x / -500 - 1;
index = index === -1 ? 4 : index === 5 ? 0 : index;
// console.log(index);
// 把上一个小圆点红色背景清除
dots[current_red].className = "";
// 把当前切换到的图片对应的小圆点添加红色背景
dots[index].className = "current";
// 将当前红色背景的小圆点的索引赋值给current_red变量
current_red = index;
}
// 小圆点的点击事件
for (var i = 0; i < dots.length; i++) {
dots[i].setAttribute("data-index", i);
dots[i].onclick = function (e) {
var index = this.dataset.index;
// 计算图片要切换到的目标位置
var target_pos = -imgWidth * (Number(index) + 1);
// 利用现有的move函数完成点击小圆点图片的切换
move(e, target_pos);
};
}
// 实现自动轮播
function autoMove() {
autoId = setInterval(function () {
move("right");
}, 3000);
}
autoMove();以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了ActiveX控件的使用-js实现打印超市小票功能代码详解，具有一定参考价值，需要的朋友可以了解下。2017-11-11
这篇文章主要为大家详细介绍了js数组案例之五子棋游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
今天小编就为大家分享一篇layui操作列按钮个数和文字颜色的判断实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
要自动刷新网页,你可以使用JavaScript脚本来实现,下面这篇文章主要给大家介绍了关于JS实现网页自动刷新脚本的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了小程序中父子组件通信详解，在父组件中，为子组件添加属性数据，即可实现父组件向子组件通信，文章通过围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-11-11
由JavaScript中call()方法引发的对面向对象继承机制call的思考
看到这里的call()方法，以前也看过手册，说是对象冒充的，用于继承的。在jQuery源码里有点乱，所以就把这部分提取出来，放在一个单独文件中，来看看具体执行。2011-09-09
最近在使用uniapp开发的微信小程序中使用了图片上传功能,下面这篇文章主要给大家介绍了关于利用uni-app和uView实现多图上传功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-03-03
这篇文章主要为大家详细介绍了JavaScript设计模式之策略模式的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
在做网页开发的时候，有时候希望给图片设置一个备选路径，即，当src属性对应的主路径加载失败的时候，图片可以马上切换到备选路径，怎么实现呢?下面通过本文给大家分享JavaScript为一张图片设置备选路径的方法，一起看看吧2017-01-01
爬虫进阶-JS自动渲染之Scrapy_splash组件的使用
Splash是一个Javascript渲染服务。它是一个实现了HTTP API的轻量级浏览器，Splash是用Python和Lua语言实现的，基于Twisted和QT等模块构建，今天重点给大家介绍js Scrapy_splash组件使用教程，一起看看吧2021-09-09
最新评论