<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<style type="text/css">
/* 设置全局变量取消所有标签的内外边距 */
*{
margin: 0px;
padding: 0px;
/* 取消小圆点 */
list-style: none;
}
/* 设置轮播图的大小位置 */
#lunbo{
width: 560px;
height: 300px;
/* 水平居中 */
margin: 100px auto;
/* border: 1px solid red; */
/* 设置定位 */
position: relative;
}
#lunbo #tupianul li{
display: none;
}
/* class为cur的li标签显示 */
#lunbo #tupianul li.cur{
display: block;
}
/* 第2步,按钮的显示 */
#lunbo #leftBtn{
width: 45px;
height: 45px;
/* border: 1px solid red; */
background: url(./图片轮播/images/png24.png) 0px 0px no-repeat;
/* 设置绝对定位 */
position: absolute;
left: 10px;
top: 130px;
/* 设置小手 */
cursor: pointer;
}
#lunbo #rightBtn{
width: 45px;
height: 45px;
/* border: 1px solid red; */
background: url(./图片轮播/images/png24.png) 0px -46px no-repeat;
position: absolute;
right: 10px;
top: 130px;
/* 设置小手 */
cursor: pointer;
}
/* 第3步,黑框的显示 */
#lunbo .heikuang{
width: 100%;
height: 40px;
background: url(./图片轮播/images/hei.png);
position: absolute;
left: 0px;
bottom: 0px;
}
#lunbo #biaoti{
color: white;
font-size: 18px;
padding-left: 20px;
font-family: "宋体","微软雅黑";
/* 设置垂直居中 */
line-height: 40px;
float: left;
}
/* 设置圆点的ul位置 */
#lunbo #cirul{
/* border: 1px solid red; */
/* background-color: white; */
width: 142px;
height: 14px;
float: right;
margin-top: 14px;
margin-right: 10px;
cursor: pointer;
}
#lunbo #cirul li{
width: 14px;
height: 14px;
background: url(./图片轮播/images/png24.png) -23px -125px no-repeat;
float: left;
margin-left: 14px;
}
/* 设置大圆点 */
#lunbo #cirul li.cur{
background-position: -9px -125px;
}
</style>
</head>
<body>
<div id="lunbo">
<div class="tupian">
<ul id="tupianul">
<li class="cur"><a href="#"><img src="./图片轮播/images/0.jpg" alt="狮子"></a></li>
<li><a href="#"><img src="./图片轮播/images/1.jpg" alt="外滩真好看!"></a></li>
<li><a href="#"><img src="./图片轮播/images/2.jpg" alt="湖水"></a></li>
<li><a href="#"><img src="./图片轮播/images/3.jpg" alt="印度"></a></li>
<li><a href="#"><img src="./图片轮播/images/4.jpg" alt="山羊"></a></li>
</ul>
</div>
<div class="anniu"></div>
<div id="leftBtn" onclick="upImg()"></div>
<div id="rightBtn" onclick="dong()"></div>
<div class="heikuang">
<h3 id="biaoti">我是标签</h3>
<ul id="cirul">
<li></li>
<li class="cur"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script type="text/javascript">
// 页面加载完成后,执行轮播图
// window.onload = function(){
// 轮播图的js代码
// }
// 获取变量
var lunbo = document.getElementById("lunbo");//获取id为轮播的div标签
var tupianul = document.getElementById("tupianul");//获取ul标签
var tupianulli = tupianul.getElementsByTagName("li");//获取li标签
var dianLis = document.getElementById("cirul").getElementsByTagName("li");//获取小圆点的li标签
var tupians = tupianul.getElementsByTagName("img");//从id为图片ul的白哦前对象中,获取所有的图片
var biaoti = document.getElementById("biaoti");//获取id = biaoti的div标签
var myTimer = 0;//我的计时器
var nowingLi = 0;//第几个li标签
// 设置自动轮播,每隔1s让图片换一张
myTimer = window.setInterval(dong,1000);
//函数功能:实现了图片的切换,小圆点的切换,切换到下一张图片
function dong(){
//显示下一个
if(nowingLi==tupianulli.length-1){
nowingLi = 0;
}else{
//如果不是最后一个,显示下一个
nowingLi++;
}
huanAll();//换图、换小圆点、字的功能封装
}
//id为lunbo的标签设置鼠标悬停事件,清空计时器--时间间隔函数
lunbo.onmouseover = function(){
window.clearInterval(myTimer);//清空计时器
}
//id为lunbo的div标签设置鼠标离开事件,开始计时器--时间间隔函数
lunbo.onmouseout = function(){
//设置自动轮播,每隔1s让图片换一张
myTimer = window.setInterval(dong,1000);
}
//点击左侧按钮,显示上一张图片,调用upImg函数
function upImg(){
//显示上一张图片
if(nowingLi==0){//如果是第一张图片则显示最后一张图片
nowingLi = tupianulli.length-1
}else{//如果不是第一张图片则显示上一张图片
nowingLi = nowingLi - 1;
}
huanAll();//换图、换小圆点、字的功能封装
}
//换图、换小圆点、字的功能封装
function huanAll(){
for(let i=0;i<tupianulli.length;i++ ){
tupianulli[i].className = "";
dianLis[i].className = "";
}
//再显示当前的图片li,小圆点li
tupianulli[nowingLi].className = "cur";
dianLis[nowingLi].className = "cur";
//显示图片标题,获取当前显示图片的alt属性,然后把alt属性的值,赋值给id=biaoti的div标签innerHtml---第2件事情,图片上的字显示
biaoti.innerHTML = tupians[nowingLi].alt;
}
</script>
</body>
</html>
效果图: