效果图
html界面:
<!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界面:
这里遇到 的困难主要是怎么让 下面的计数器和左右的箭头显示在最上面
主要是通过定位设置 我们可以将父元素设置成 绝对定位 想要实现的元素设置成相对定位 再用 z-index 层级设置成最大的就可以实现 图片上叠图片 也可以这样实现 top left right bottom 可以调位置
我们将图片进行插入后会发现图片会全部显示
我们可以通过 display:none 隐藏全部的照片 将第一的图片设置成 display:block 显示第一张就可以 达到图片效果
*{
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部分:
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;
}
}