|
|
@@ -0,0 +1,127 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ /* css reset */
|
|
|
+ body{
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ li{
|
|
|
+ list-style: none;
|
|
|
+ }
|
|
|
+ ul{
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ html{
|
|
|
+ background-color: black;
|
|
|
+ }
|
|
|
+ /* 工具类 */
|
|
|
+ .clearfix::after{
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ clear: both;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container{
|
|
|
+ width:600px;
|
|
|
+ height:200px;
|
|
|
+ border:4px solid #fff;
|
|
|
+ margin: 100px auto;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .container .swiper-img img{
|
|
|
+ width: 600px;
|
|
|
+ height: 200px;
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .container .swiper-img .active{
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ /* 按钮区域 */
|
|
|
+ .container .swiper-btn{
|
|
|
+ position: absolute;
|
|
|
+ bottom: 10px;
|
|
|
+ left: 0;
|
|
|
+ width: calc(100% - 40px);
|
|
|
+ padding: 0 20px;
|
|
|
+ }
|
|
|
+ .container .swiper-btn li{
|
|
|
+ color: #fff;
|
|
|
+ display: inline-block;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ border-radius: 10px;
|
|
|
+ background-color: #f90;
|
|
|
+ text-align:center;
|
|
|
+ line-height: 20px;
|
|
|
+ margin:0 3px;
|
|
|
+ }
|
|
|
+ .container .swiper-btn .left-btn{
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .container .swiper-btn .right-btn{
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ .container .right-btn .active{
|
|
|
+ background-color: red;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="container">
|
|
|
+ <div class="swiper-img">
|
|
|
+ <img class="s-img active" src="./image/image.png" alt="图片">
|
|
|
+ <img class="s-img" src="./image/image1.png" alt="图片">
|
|
|
+ <img class="s-img" src="./image/image2.png" alt="图片">
|
|
|
+ <img class="s-img" src="./image/image3.png" alt="图片">
|
|
|
+ <img class="s-img" src="./image/image4.png" alt="图片">
|
|
|
+ </div>
|
|
|
+ <div class="swiper-btn clearfix">
|
|
|
+ <div class="left-btn">
|
|
|
+ <ul>
|
|
|
+ <li><</li>
|
|
|
+ <li>></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="right-btn">
|
|
|
+ <ul>
|
|
|
+ <li class="num-btn active">1</li>
|
|
|
+ <li class="num-btn">2</li>
|
|
|
+ <li class="num-btn">3</li>
|
|
|
+ <li class="num-btn">4</li>
|
|
|
+ <li class="num-btn">5</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <script>
|
|
|
+ // 获取所有轮播的图片
|
|
|
+ aImg = document.getElementsByClassName("s-img");
|
|
|
+ // 获取所有数字按钮
|
|
|
+ aNumBtn = document.getElementsByClassName("num-btn");
|
|
|
+
|
|
|
+ // 给数字按钮绑定事件
|
|
|
+ for(var i=0;i<aNumBtn.length;i++){
|
|
|
+ // 给每个数字按钮绑定一个索引值
|
|
|
+ aNumBtn[i].index = i;
|
|
|
+ aNumBtn[i].onmouseover = function(){
|
|
|
+ // 清除状态
|
|
|
+ for(var j =0;j<aNumBtn.length;j++){
|
|
|
+ // 清除所有数字按钮的选中状态
|
|
|
+ aNumBtn[j].classList.remove("active");
|
|
|
+ // 清除所有轮播图片的选中状态
|
|
|
+ aImg[j].classList.remove("active");
|
|
|
+ }
|
|
|
+ // 给当前选中的数字按钮加上选中状态
|
|
|
+ this.classList.add("active");
|
|
|
+ // 给当前选中的轮播图片加上选中状态
|
|
|
+ aImg[this.index].classList.add("active");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
