一个简单的Move 轮播图

最新推荐文章于 2023-10-24 16:14:57 发布

李嘉杰

最新推荐文章于 2023-10-24 16:14:57 发布

阅读量314

点赞数

分类专栏： Javascript原生写法

Javascript原生写法专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现图片轮播效果的方法，并通过JavaScript添加了交互功能，使得用户可以通过点击下方的数字图标来手动切换显示的图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
#box{
width: 490px;
height: 170px;
margin: 100px auto;
border: 1px solid #000;
padding: 5px;
}
#img{
width: 490px;
height:170px;
position: relative;
overflow: hidden;
}
#img ul{
width: 600%;
position: absolute;
left: 0;
top: 0;
}
#img ul li{
float: left;
}
#icon{
position: absolute;
left: 700px;
top: 300px;
}
#icon span{
display: inline-block;
width: 26px;
height: 26px;
background-color: #000;
color: white;
text-align: center;
line-height: 26px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<div id="img">
<ul>
<li><img src="image/01.jpg" alt=""></li>
<li><img src="image/02.jpg" alt=""></li>
<li><img src="image/03.jpg" alt=""></li>
<li><img src="image/04.jpg" alt=""></li>
<li><img src="image/05.jpg" alt=""></li>
</ul>
</div>
</div>
<div id="icon">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<script>
var box =document.getElementById("box");
var img=document.getElementById("img");
var ul=img.children[0];
var icon=document.getElementById("icon");
var span=icon.children;
var scrollWidth=img.offsetWidth;
for(var i =0;i<span.length;i++){
span[i].index=i;
span[i].onclick=function(){
for(var j=0;j<span.length;j++){
span[j].style.background="black";
}
this.style.background="yellow";
move(ul,-this.index*scrollWidth);
}
}
function move(obj,length){
clearInterval(obj.timer);
var speed=obj.offsetLeft<length?15:-15;
obj.timer = setInterval(function() {
var result = length - obj.offsetLeft;
obj.style.left = obj.offsetLeft + speed + "px";
if(Math.abs(result) <= 15) {
obj.style.left = length + "px";
clearInterval(obj.timer);
}
},10);
}
</script>
</body>
</html>