HTML学习之轮播图
程序员文章站
2023-12-19 11:27:16
这可以说是一种非常简单的实现轮播图的方法了，由于时间仓促所以没写自动轮播部分。简单说一下原理吧，就是把所有图片堆叠在一个盒子里，设置所有图片的透明度为0，这样就把所有图片都隐藏了，第一张图片除外（第一张透明度设为1），当要切换到某张图片时，在把该图片的透明度设为1，而其他的图片透明度设为0，这样就实 ......
这可以说是一种非常简单的实现轮播图的方法了，由于时间仓促所以没写自动轮播部分。简单说一下原理吧，就是把所有图片堆叠在一个盒子里，设置所有图片的透明度为0，这样就把所有图片都隐藏了，第一张图片除外（第一张透明度设为1），当要切换到某张图片时，在把该图片的透明度设为1，而其他的图片透明度设为0，这样就实现了简单的轮播啦。
代码：
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>淡入淡出轮播图</title>
6 <!-- css样式 -->
7 <style type="text/css">
8 /*清除边距*/
9 div,ul,li{
10 margin: 0;
11 padding: 0;
12 }
13
14 /*首先准备一个放图片的容器*/
15 .container{
16 width: 500px;
17 height: 280px;
18 position: relative;
19 top: 100px;
20 left: 30%;
21 /*border: 1px solid #ccc;*/
22 }
23
24 /*图片样式*/
25 .container img{
26 position: absolute; /*把所有图片放在同一个位置*/
27 width: 100%;
28 transition-duration: 1s; /*设置过渡时间*/
29 opacity: 0; /*把所有图片变透明*/
30 }
31 /*图片显示开关*/
32 .container img.on{
33 opacity: 1; /*用于显示图片*/
34 }
35
36 /*左右按钮 按钮用图片更好点,这里为了简便就用大于小于号*/
37 .left, .right{
38 position: absolute;
39 top: 30%;
40 width: 60px;
41 height: 100px;
42 line-height: 100px;
43 background-color: #666;
44 opacity: 0.5;
45 text-align: center;
46 font-size: 60px;
47 color: #ccc;
48 display: none; /*先隐藏按钮*/
49 cursor: pointer; /*设置鼠标悬停时的样式*/
50 }
51 .left{
52 left: 0;
53 }
54 .right{
55 right: 0;
56 }
57 .container:hover .left, .container:hover .right{
58 display: block; /*鼠标悬停才容器范围内时显示按钮*/
59 }
60 .left:hover, .right:hover{
61 color: #fff;
62 }
63
64 /*焦点*/
65 .container ul{
66 position: absolute;
67 bottom: 0;
68 max-width: 500px;
69 padding: 5px 200px;
70 }
71 .container ul li{
72 list-style: none;
73 float: left;
74 width: 10px;
75 height: 10px;
76 border-radius: 50%;
77 margin-left: 10px;
78 background-color: #ccc;
79 cursor: pointer;
80 }
81 .container ul li.active{
82 background-color: #fff; /*焦点激活时的样式*/
83 }
84
85 </style>
86 </head>
87 <body>
88 <div class="container">
89 <!-- 图片 -->
90 <!-- 先把第一张图片显示出来 -->
91 <img class="on" src="img/1.jpg" />
92 <img src="img/2.jpg" />
93 <img src="img/3.jpg" />
94 <img src="img/4.jpg" />
95 <img src="img/5.jpg" />
96
97 <!-- 左右按钮 -->
98 <div class="left"><</div>
99 <div class="right">></div>
100
101 <!-- 焦点 -->
102 <ul>
103 <li class="active"></li>
104 <li></li>
105 <li></li>
106 <li></li>
107 <li></li>
108 </ul>
109 </div>
110
111 <!-- js部分 -->
112 <script type="text/javascript">
113 //1、找到container下的所有img标签,li标签,左右按钮
114 var aimgs = document.queryselectorall('.container img');
115 var alis = document.queryselectorall('.container li');
116 var btnleft = document.queryselector('.container .left');
117 var btnright = document.queryselector('.container .right');
118
119 // //检验是否找到
120 // console.log(aimgs);
121 // console.log(alis);
122 // console.log(btnleft);
123 // console.log(btnright);
124
125 //点击事件
126 //点击按钮图片切换
127 var index = 0; //当前图片下标
128 var lastindex = 0;
129 btnright.onclick = function(){
130 //记录上一张图片的下标
131 lastindex = index;
132 //清除上一张图片的样式
133 aimgs[lastindex].classname = '';
134 alis[lastindex].classname = '';
135
136 index++;
137 index %= aimgs.length; //实现周期性变化
138 //设置当前图片的样式
139 aimgs[index].classname = 'on';
140 alis[index].classname = 'active';
141 }
142 //左边按钮类似
143 btnleft.onclick = function(){
144 //记录上一张图片的下标
145 lastindex = index;
146 //清除上一张图片的样式
147 aimgs[lastindex].classname = '';
148 alis[lastindex].classname = '';
149
150 index--;
151 if (index < 0) {
152 index = aimgs.length - 1;
153 }
154 //设置当前图片的样式
155 aimgs[index].classname = 'on';
156 alis[index].classname = 'active';
157 }
158 </script>
159 </body>
160 </html>