JS实现轮播图
程序员文章站
2022-06-02 11:25:48
...
轮播图功能：自动轮播，上一个和下一个按钮，下边的圆框实现滑过换页。仿照网购网站编写。
写HTML分三步走，第一步：搭基础，即编写HTML界面；第二步：写样式，即编写css使编写的控件按照一定的格式显示，达到美观的效果。第三步：动起来，即编写js文件达到动态的效果。
效果图：
当鼠标放在图片上，左右两边的按钮出现，画面停止，下边的小圆框会跟着图变化，鼠标滑动上去会达到跳转页的效果。
第一步：写HTML：
首先我们要有一个框来展示我们的图片，这个是背景图的显示，然后给其换背景图来达到换页的效果，其次在框里我们要有下边的小圆框，这个我们可以用ul来实现，其次左右的换页，也是两个div框。这样基本的框架就搭好了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>轮播</title>
<link rel="stylesheet" href="css/轮播.css" />
<script type="text/javascript" src="js/轮播.js" ></script>
</head>
<body>
<div id="box">
<img id="pic" src="img/1.jpg" />
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<div class="btn" id="left"> <</div>
<div class="btn" id="right">></div>
</div>
</body>
</html>
第二步：写css：
css实现的时候就要达到布局位置的改变。首先我们的框的位置在屏幕的*，其次左右两个div的摆放，左右 和上下的剧中男，最后最难的是ul的摆放，首先将其原来的格式去掉 之后把框的形状变为圆形。最后再摆到位置上。
*{
margin: 0;
padding: 0;
}
#box{
width: 790px;
height: 340px;
margin: 0 auto;
position: relative;
}
.btn{
width: 50px;
height: 100px;
color: #fff;
background-color: rgba(0,0,0,0.2);
font-size: 40px;
text-align: center;
line-height: 100px;
position: absolute;
top: 120px;
display: none;
}
#left{
left: 0px;
}
#right{
right: 0px;
}
ul {
list-style: none;
position: absolute;
bottom: 20px;
left: 230px;
}
ul li{
float: left;
width: 20px;
height: 20px;
margin-left: 10px;
background-color: #aaa;
text-align: center;
line-height: 20px;
border-radius: 50%;
}
第三步：js文件的编写：
用到的是原生js代码，首先就是达到自动的换页，这个可以写个定时器，每隔一段时间改变一下背景，之后要注意其循环，在到最后一个的时候对其改变其起始index。之后是写鼠标进入时间和移出事件，在进入时，移除定时器，左右按钮的显示。在最后对ul设置鼠标进入事件，对其改变背景。
window.onload = function() {
var box = document.getElementById("box");
var ul = document.getElementById("list");
var img = document.getElementById("pic");
var left_btn = document.getElementById("left");
var right_btn = document.getElementById("right");
var allLi = document.getElementsByTagName("li");
//第一步 ：第一个按钮设置为红色
var currentNUM = 1;
allLi[0].style.backgroundColor = "red";
//第二步：让图片循环改变
var timer = setInterval(startloop, 2000);
function startloop() {
currentNUM++
changeIMG()
}
function changeIMG() {
if(currentNUM == 0) {
currentNUM = 8;
}
if(currentNUM == 9) {
currentNUM = 1;
}
img.src = "img/" + currentNUM + ".jpg";
//清空小圆点颜色，改变下一个颜色
for(var i = 0; i < allLi.length; i++) {
allLi[i].style.backgroundColor = "#aaa";
}
allLi[currentNUM - 1].style.backgroundColor = "red"; //设置当前的颜色的
};
//第三步：鼠标进入box和离开
box.addEventListener("mouseover", function() {
//左右显示出来
left_btn.style.display = "block";
right_btn.style.display = "block";
window.clearInterval(timer);
}, false);
box.addEventListener("mouseout", function() {
left_btn.style.display = "none";
right_btn.style.display = "none";
timer = setInterval(startloop, 2000);
}, false);
//第四步： 点击左右按钮
left_btn.addEventListener("mouseover", deep, false);
left_btn.addEventListener("mouseout", nodeep, false);
right_btn.addEventListener("mouseover", deep, false);
right_btn.addEventListener("mouseout", nodeep, false);
left_btn.addEventListener("click", function() {
currentNUM--;
changeIMG();
}, false);
right_btn.addEventListener("click", startloop, false);
function deep() {
this.style.backgroundColor = "rgba(0,0,0,0.4)";
};
function nodeep() {
this.style.backgroundColor = "rgba(0,0,0,0.2)";
};
//第五步：小圆点的转换
for(var i = 0; i < allLi.length; i++) {
allLi[i].index = i + 1;
allLi[i].addEventListener("mouseover", function() {
allLi[0].style.backgroundColor = "#aaa"
currentNUM = this.index;
console.log(currentNUM)
changeIMG();
}, false);
}
}
上一篇： JS(JQ)实现table表格固定表头且表头可以随横向滚动而滚动
下一篇： js实现轮播图