<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
img {
vertical-align: top;
}
.box {
width: 730px;
height: 454px;
margin: 100px auto;
/* padding: 5px; */
/* border: 1px solid #ccc; */
}
.inner {
width: 730px;
height: 454px;
/* background-color: pink; */
overflow: hidden;
position: relative;
}
.inner ul {
width: 3650px;
position: absolute;
}
.inner ul li {
float: left;
}
.square {
position: relative;
left: 600px;
top: 430px;
}
span {
display: inline-block;
cursor: pointer;
width: 20px;
height: 20px;
text-align: center;
background-color: #fff;
}
.current {
background-color: #ff4f00;
color: white;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="inner">
<!--相框-->
<ul id="allimg">
<li><a><img src="img/01.jpg" alt=""></a></li>
<li><a><img src="img/02.jpg" alt=""></a></li>
<li><a><img src="img/03.jpg" alt=""></a></li>
<li><a><img src="img/04.jpg" alt=""></a></li>
<li><a><img src="img/05.jpg" alt=""></a></li>
</ul>
<div class="square" id="square">
<ul>
<span class="current">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</ul>
</div>
</div>
</div>
<script>
var timeId;
let boxObj = document.getElementById("box");
let Img_width = boxObj.offsetWidth;
//总体图片ul
let Objul = document.getElementById('allimg');
//按钮
let btn = document.getElementsByTagName("span");
for (let i = 0; i < btn.length; i++) {
btn[i].setAttribute("index", i);
btn[i].onmouseover = function () {
for (let j = 0; j < btn.length; j++) {
btn[j].className = "";
}
this.className = "current";
let index = this.getAttribute("index");
clearInterval(timeId);
animation(Objul, -index * Img_width);
}
}
function animation(element, target) {
clearInterval(timeId);
let num = element.offsetLeft;
timeId = setInterval(() => {
let temp = target > num ? 80 : -80;
num += temp;
if (Math.abs(target - element.offsetLeft) <= Math.abs(temp)) {
element.style.left = target + "px";
clearInterval(timeId);
}
else {
element.style.left = num + "px";
}
}, 50);
}
</script>
</body>
</html>
js轮播图
转载本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
上一篇:理解网络中的不保留消息边界的概念
下一篇:JavaScript数组API
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
【Jquery插件集合】轮播、时间处理插件
【Jquery插件集合】轮播、时间处理插件
jquery css JavaScript -
JS轮播图(网易云轮播图)
js实现网易云轮播图的完整思路以及代码
html5 css javascript html 学习 -
js 轮播图
不依赖swiper 手动实现轮播图
图片显示 轮播图 -
mysql 自定义一个字段可以用这个字段当作条件吗
一、系统封装函数MySQL 有很多内置的函数,可以快速解决开发中的一些业务需求,大概包括流程控制函数,数值型函数、字符串型函数、日期时间函数、聚合函数等。以下列出了这些分类中常用的函数。1、控制流程函数case...when根据值判断返回值,类比编程中的IF-ELSE判断。 -- DEMO 01 SELECT CASE DATE_FORMAT(NOW(),'%Y-%m-%d')
db2 replace函数的用法 jpa 自定义sql if mysql 8.0 自定义函数 mysql 连续日期统计