JavaScript编写的轮播页面
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播完善</title>
<link rel="stylesheet" type="text/css" href="css/lunbo.css"/>
</head>
<body>
<div id="box">
<img src="img/1.png" id="pic"/>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div id="left" class="bt"><</div>
<div id="right" class="bt">></div>
</div>
<script src="js/newlunbo.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
CSS:
*{
padding: 0;
margin: 0;
}
/*总体界面样式*/
#box{
width: 600px;
height: 240px;
margin: 0 auto;
position: relative;
}
/*左右切换按钮*/
.bt{
width: 40px;
height: 60px;
background-color: rgba(0,0,0,0.2);
color: #FFFFFF;
font-size: 30px;
font-weight: 50px;
/*居中*/
line-height: 60px;
text-align: center;
/*绝对定位*/
position: absolute;
/*鼠标没移动到上面时隐藏*/
display: none;
}
#left{
left: 0;
top: 100px;
}
#right{
right: 0;
top: 100px;
}
/*下面轮播小圆点*/
#list{
position: absolute;
bottom: 10px;
left: 200px;
/*消去前面的点*/
list-style: none;
}
#list li{
/* 浮动变成一行 */
float: left;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #aaa;
/*居中*/
text-align: center;
line-height: 20px;
margin-left: 10px;
}
JavaScript：
//需要用到的标签
var jsbox = document.getElementById("box");
var jspic = document.getElementById("pic");
var left = document.getElementById("left");
var right = document.getElementById("right");
var jslistarr = document.getElementsByTagName("li");
//第一个li设置为红色
jslistarr[0].style.backgroundColor = "red"
//启动一个定时器去更换pic中的src属性
var currentPage = 1
//改变页面方法
function changePage(){
if(currentPage == 6){
currentPage = 1
}else if(currentPage == 0){
currentPage = 5
}
jspic.src = "img/"+currentPage+".png"
//清空小圆点颜色
for(var i = 0;i<jslistarr.length;i++){
jslistarr[i].style.backgroundColor = "#aaa"
}
jslistarr[currentPage - 1].style.backgroundColor = "red"
}
//定时器
var timer = setInterval(startLoop,1000)
function startLoop(){
currentPage++
changePage()
}
//鼠标进入box,左右按钮出现,定时器轮播消失，添加监听事件
jsbox.addEventListener("mouseover",overfun,false)
//overfun方法
function overfun(){
//停止定时器
clearInterval(timer)
//显示左右按钮
left.style.display="block";
right.style.display = 'block';
}
//鼠标移出box
jsbox.addEventListener("mouseout",outfun,false)
function outfun(){
//重启定时器
timer = setInterval(startLoop,1000)
//隐藏左右按钮
left.style.display="none";
right.style.display = 'none';
}
//鼠标移入按钮
function deep(){
this.style.backgroundColor = "rgba(0,0,0,0.6)"
}
left.addEventListener("mouseover",deep,false)
right.addEventListener("mouseover",deep,false)
//鼠标移出按钮
function nodeep(){
this.style.backgroundColor = "rgba(0,0,0,0.2)"
}
left.addEventListener("mouseout",nodeep,false)
right.addEventListener("mouseout",nodeep,false)
//点击左右按钮
left.addEventListener("click",function(){
currentPage--
changePage()
},false)
right.addEventListener("click",function(){
currentPage++
changePage()
},false)
//进入小圆点
for(var i = 0;i<jslistarr.length;i++){
jslistarr[i].addEventListener("mouseover",function(){
currentPage = parseInt(this.innerHTML)
// console.log(currentPage)
changePage()
},false)
}
运行结果：
当鼠标没有移入界面时图片自动轮播
鼠标移入界面时，出现左右按钮，并且停止自动轮播
可以点击左右按钮来轮播图片，也可以将鼠标移动到对应的小圆点上进行轮播
一起学习，一起进步 -.- ，如有错误，可以发评论
