renderings
html interface:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 引入的css代码 -->
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<!-- 引入的js代码 -->
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="flash">
<!-- 图片 -->
<ul id="img">
<!-- 显示第一张 alt 小标题的提示效果-->
<li style="display: block;"><a href="#"><img src="img/1.jpg" alt="图片"></a></li>
<li><a href="#"><img src="img/2.jpg" ></a></li>
<li><a href="#"><img src="img/3.jpg" ></a></li>
<li><a href="#"><img src="img/4.jpg" ></a></li>
<li><a href="#"><img src="img/5.jpg" ></a></li>
</ul>
<!-- 计数器 -->
<ul id="num">
<!-- 点击链接 不刷新 清除默认效果 -->
<!-- javascript:; 伪协议 为了超链接不跳转 清除默认效果 -->
<li class="active"><a href="javascript:;">1</a></li>
<li><a href="javascript:;">2</a></li>
<li><a href="javascript:;">3</a></li>
<li><a href="javascript:;">4</a></li>
<li><a href="javascript:;">5</a></li>
</ul>
<!-- 左右箭头 -->
<a href="javascript:;" id="left" class="arrow"><</a>
<a href="javascript:;" id="right" class="arrow">></a>
</div>
</body>
</html>
css interface:
The difficulty encountered here is mainly how to make the counter below and the left and right arrows displayed on the top
Mainly through positioning settings, we can set the parent element to absolute positioning , set the desired element to relative positioning, and then use the z-index level to set it to the largest, so that the picture can be superimposed. The picture can also be realized in this way. top left right bottom can be adjusted Location
After we insert the picture, we will find that all the pictures will be displayed
We can hide all photos through display: none and set the first picture to display: block to display the first picture to achieve the picture effect
*{
margin: 0;
padding: 0;
}
ul li{
list-style: none;
}
a{
text-decoration: none;
color:rgb(255,255,255);
}
#flash{
width: 500px;
height: 310px;
margin: 10px auto;
/* 生成绝对定位 */
position: relative;
}
#img img{
width: 100%;
}
#img li{
/* 相对定位 */
position: absolute;
top:0px;
left: 0;
/* 显示第一张 */
display: none;
}
#num{
/* 定位元素 将数字浮到上面 必须得设置定位元素*/
position: absolute;
bottom: 5px;
left: 180px;
z-index: 1;
}
#num li{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50% 50%;
background-color: rgb(102,102,102);
text-align: center;
line-height: 20px;
}
.arrow{
position: absolute;
top: 125px;
/* 设置层级 最上层 可以显出 */
z-index: 2;
font-size: 40px;
/* 不悬浮不显示 */
display: none;
}
#left{
left: 5px;
}
#right{
right: 5px;
}
/* 鼠标悬停在区域内 箭头显示 */
#flash:hover .arrow{
display: block;
}
.arrow:hover{
background-color: rgba(0,0,0,.5);
}
/* 当前照片对应的下面小球的数字 */
#num .active{
background-color: rgb(255,0,0);
}js part:
window.onload = function() {
//轮播的次数
var index = 0;
//定义计时器对象
var timer = null;
//获取所有的li图片元素
var pic = document.getElementById("pic").getElementsByTagName("li");
var num =
document.getElementById("num").getElementsByTagName("li");
var flash = document.getElementById("flash");
//获取控制方向的箭头元素
var left = document.getElementById("left");
var right = document.getElementById("right");
//定义计时器
timer = setInterval(run, 2000);
//封装函数run
function run() {
index++;
if (index >= num.length) {
index = 0
};
changeOption(index);
}
//单击左箭头
left.onclick = function() {
index--;
if (index < 0) {
index = num.length - 1
};
changeOption(index);
}
//单击右箭头
right.onclick = function() {
index++;
if (index >= num.length) {
index = 0
};
changeOption(index);
}
//鼠标划在窗口上面,停止计时器
flash.onmouseover = function() {
clearInterval(timer);
} //鼠标离开窗口,开启计时器
flash.onmouseout = function() {
timer = setInterval(run, 2000)
}
//鼠标划在页签上面,停止计时器,手动切换
for (var i = 0; i < num.length; i++) {
num[i].id = i;
num[i].onmouseover = function() {
clearInterval(timer);
changeOption(this.id);
}
}
//封装函数changeOption
function changeOption(curindex) {
for (var j = 0; j < num.length; j++) {
pic[j].style.display = "none";
num[j].className = "";
}
pic[curindex].style.display = "block";
num[curindex].className = "active";
index = curindex;
}
}