HTML部分：
1<!--HTML部分-->
2<!DOCTYPEhtml>
3<html>
4<head>
5<metacharset="utf-8">
6<title>轮播图</title>
7<linkrel="stylesheet"type="text/css"href="css/demo06.css"/>
8<scriptsrc="js/demo06.js"></script>
9</head>
10<body>
11<divclass="container">
12<!--轮播图区域-->
13<ulclass="lbimg">
14<liclass="on"style="background-color:#898989;">轮播图1</li>
15<listyle="background-color:#CD282B;">轮播图2</li>
16<listyle="background-color:pink;">轮播图3</li>
17<listyle="background-color:peachpuff;">轮播图4</li>
18<listyle="background-color:palegoldenrod;">轮播图5</li>
19</ul>
20<olclass="btn">
21<liclass="active">第1张</li>
22<li>第2张</li>
23<li>第3张</li>
24<li>第4张</li>
25<li>第5张</li>
26</ol>
27</div>
28</body>
29</html>
CSS部分
1*{
2margin:0;
3padding:0;
4list-style:none;
5}
6.container{
7width:600px;
8height:400px;
9border:4pxdouble#FF6633;
10margin:0auto;
11}
12
13/*轮播图*/
14.lbimgli{
15width:100%;
16height:350px;
17text-align:center;
18line-height:350px;
19display:none;
20font-size:25px;
21color:#FF6633;
22}
23.lbimg.on{
24display:block;
25}
26
27.btn{
28width:100%;
29height:50px;
30background-color:#3CBDFF;
31display:flex;
32}
33.btnli{
34flex:1;
35color:#fff;
36font-weight:bold;
37line-height:50px;
38text-align:center;
39font-family:"楷体";
40cursor:pointer;
41
42}
43.btn.active{
44background-color:rgba(0,0,0,0.2);
45transition:allease-in-out0.25s;
46}
JavaScript部分
1window.onload=function(){
2varlbimg=document.querySelector(".lbimg");
3varlbimgs=lbimg.querySelectorAll("li");
4varbtn=document.querySelector(".btn");
5varbtns=btn.querySelectorAll("li");
6
7for(vari=0;i<btns.length;i++){
8
9btns[i].index=i;
10btns[i].onclick=function(){
11clearInterval(timer);
12for(varj=0;j<lbimgs.length;j++){
13lbimgs[j].className="";
14}
15//按钮颜色跟着变化
16for(vark=0;k<btns.length;k++){
17btns[k].className="";
18}
19//轮播同步，点击后图片的位置从点击的地方开始轮播
20index=this.index;
21btns[this.index].className="active";
22lbimgs[this.index].className="on";
23timer=setInterval(autoPlay,1000);
24}
25}
26varindex=0;
27//自动轮播
28index++;
29vartimer=setInterval(autoPlay,1000);
30functionautoPlay(){
31for(vari=0;i<lbimgs.length;i++){
32lbimgs[i].className="";
33}
34for(varj=0;j<btns.length;j++){
35btns[j].className="";
36}
37if(index==lbimgs.length-1){
38index=0;
39}else{
40index++;
41}
42btns[index].className="active";
43lbimgs[index].className="on";
44}
45
46//鼠标移动时清除定时器
47lbimg.onmouseover=function(){
48clearInterval(timer);
49}
50lbimg.onmouseout=function(){
51timer=setInterval(autoPlay,1000);
52}
53
54}
如果您觉得本文的内容对您的学习有所帮助：
关键字：
html