效果图
功能：1、幻灯片自动切换；2、点击下方小圆点切换对应幻灯片；3、点击左右两侧耳朵控制幻灯片切换至上一张或下一张；4、鼠标悬停幻灯片上时，幻灯片停止切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<link rel="stylesheet" href="../css/reset.css">
<script src="./jquery-3.4.1.min.js"></script>
<style type="text/css">
#box{
width: 100%; height: 350px;
margin-top: 100px;
}
.bg0{
background: #0D2736;}
.bg1{
background: #0F0909;}
.bg2{
background: #283F75;}
.bg3{
background: #405CDA;}
#slide{
width: 800px; height: 350px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#zxw{
width: 4000px; height: 35px;
position: absolute; top: 0; left: 0px;
}
#zxw li{
float: left;
}
#zxw li a{
display: block; width: 800px; height: 350px;
position: relative;
}
#zxw li a img{
width: 100%; height: 100%;
}
/* --------- */
#zxw li a span{
font-size: 150px; text-align: center;
position: absolute; color: #fff;top: 100px; left: 350px;
}
/* ----------- */
#nav{
width: 160px; height: 20px;
position: absolute; bottom: 10px; left: 50%;
margin-left: -80px;
}
#nav li{
width: 20px; height: 20px;
border-radius: 50%;
background: #ccc;
float: left;
margin: 0 10px;
cursor: pointer;
}
#nav .active
最低0.47元/天 解锁文章
754
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
