|
|
@@ -0,0 +1,207 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4974983_z46pr7nyg5p.css">
|
|
|
+ <style>
|
|
|
+ *{
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ li{
|
|
|
+ list-style: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-content{
|
|
|
+ width: 1226px;
|
|
|
+ height: 460px;
|
|
|
+ margin: 100px auto;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-nav{
|
|
|
+ width: 234px;
|
|
|
+ height: 100%;
|
|
|
+ background-color: rgba(105, 101, 101,0.6);
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ .swiper-nav ul{
|
|
|
+ padding: 30px 0;
|
|
|
+ }
|
|
|
+ .swiper-nav ul li{
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 0 20px;
|
|
|
+ height: 42px;
|
|
|
+ line-height: 42px;
|
|
|
+ }
|
|
|
+ .swiper-nav ul li:hover{
|
|
|
+ background-color: #ff6700;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .swiper-nav li i{
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-content .swiper-img img{
|
|
|
+ width: 1226px;
|
|
|
+ height: 460px;
|
|
|
+ }
|
|
|
+ .swiper-content .swiper-img li{
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .swiper-content .swiper-img .active{
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .swiper-btn .arr-btn{
|
|
|
+ position: absolute;
|
|
|
+ top:50%;
|
|
|
+ margin-top: -35px;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .swiper-btn .arr-btn .left-btn{
|
|
|
+ position: absolute;
|
|
|
+ left: 234px;
|
|
|
+ width: 41px;
|
|
|
+ height: 70px;
|
|
|
+ background-image: url("./image/icon-slides.png");
|
|
|
+ background-position: -84px 0;
|
|
|
+ }
|
|
|
+ .swiper-btn .arr-btn .left-btn:hover{
|
|
|
+ background-position: 0 0;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .swiper-btn .arr-btn .right-btn{
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ width: 41px;
|
|
|
+ height: 70px;
|
|
|
+ background-image: url("./image/icon-slides.png");
|
|
|
+ background-position: -125px 0;
|
|
|
+ }
|
|
|
+ .swiper-btn .arr-btn .right-btn:hover{
|
|
|
+ background-position: -41px 0;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .swiper-btn .dot-btn ul{
|
|
|
+ position: absolute;
|
|
|
+ right: 30px;
|
|
|
+ bottom: 30px;
|
|
|
+ }
|
|
|
+ .swiper-btn .dot-btn li{
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ background-color: rgba(0,0,0,.4);
|
|
|
+ border:2px solid hsla(0,0%,100%,.3);
|
|
|
+ border-radius: 50%;
|
|
|
+ float: left;
|
|
|
+ margin: 0 5px;
|
|
|
+ }
|
|
|
+ .swiper-btn .dot-btn li:hover{
|
|
|
+ background: hsla(0, 0%, 100%, .4);
|
|
|
+ border-color: rgba(0, 0, 0, .4);
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .swiper-btn .dot-btn .active{
|
|
|
+ background: hsla(0, 0%, 100%, .4);
|
|
|
+ border-color: rgba(0, 0, 0, .4);
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div class="swiper-content">
|
|
|
+ <!-- 左侧导航 -->
|
|
|
+ <div class="swiper-nav">
|
|
|
+ <ul>
|
|
|
+ <li>手机 <i class="iconfont icon-arrow"></i> </li>
|
|
|
+ <li>电视 <i class="iconfont icon-arrow"></i> </li>
|
|
|
+ <li>家电 <i class="iconfont icon-arrow"></i></li>
|
|
|
+ <li>笔记本 平板 显示器 <i class="iconfont icon-arrow"></i></li>
|
|
|
+ <li>出行 穿戴 <i class="iconfont icon-arrow"></i></li>
|
|
|
+ <li>耳机 音箱 <i class="iconfont icon-arrow"></i></li>
|
|
|
+ <li>健康 儿童 <i class="iconfont icon-arrow"></i></li>
|
|
|
+ <li>生活 箱包 <i class="iconfont icon-arrow"></i></li>
|
|
|
+ <li>智能 路由器 <i class="iconfont icon-arrow"></i></li>
|
|
|
+ <li>电源 配件 <i class="iconfont icon-arrow"></i></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <!-- 轮播图 图片区域 -->
|
|
|
+ <div class="swiper-img">
|
|
|
+ <ul>
|
|
|
+ <li class="swiper-item active">
|
|
|
+ <img src="./image/slider1.jpg" alt="">
|
|
|
+ </li>
|
|
|
+ <li class="swiper-item">
|
|
|
+ <img src="./image/slider2.jpeg" alt="">
|
|
|
+ </li>
|
|
|
+ <li class="swiper-item">
|
|
|
+ <img src="./image/slider3.png" alt="">
|
|
|
+ </li>
|
|
|
+ <li class="swiper-item">
|
|
|
+ <img src="./image/slider4.jpeg" alt="">
|
|
|
+ </li>
|
|
|
+ <li class="swiper-item">
|
|
|
+ <img src="./image/slider5.jpg" alt="">
|
|
|
+ </li>
|
|
|
+ <li class="swiper-item">
|
|
|
+ <img src="./image/slider6.jpg" alt="">
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <!-- 轮播图 按钮区域 -->
|
|
|
+ <div class="swiper-btn">
|
|
|
+ <div class="arr-btn">
|
|
|
+ <div class="left-btn"></div>
|
|
|
+ <div class="right-btn"></div>
|
|
|
+ </div>
|
|
|
+ <div class="dot-btn">
|
|
|
+ <ul>
|
|
|
+ <li class="dot-item active"></li>
|
|
|
+ <li class="dot-item"></li>
|
|
|
+ <li class="dot-item"></li>
|
|
|
+ <li class="dot-item"></li>
|
|
|
+ <li class="dot-item"></li>
|
|
|
+ <li class="dot-item"></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <script>
|
|
|
+ // 第一步获取要控制的元素
|
|
|
+ // 获取小点按钮
|
|
|
+ var dotItem = document.getElementsByClassName("dot-item");
|
|
|
+ // 获取轮播图图片
|
|
|
+ var swiperItem = document.getElementsByClassName("swiper-item");
|
|
|
+
|
|
|
+ // 第二步为小圆点绑定事件
|
|
|
+ for(var i=0;i<dotItem.length;i++){
|
|
|
+ // 为每一个绑定事件的标签分配一个编号
|
|
|
+ dotItem[i].index = i;
|
|
|
+ // 为每一个按钮绑定事件
|
|
|
+ dotItem[i].onclick = function(){
|
|
|
+ console.log(this.index);
|
|
|
+ // 第四步 移除没有被选中的轮播图及效果
|
|
|
+ for(var j=0;j<dotItem.length;j++){
|
|
|
+ swiperItem[j].classList.remove("active");
|
|
|
+ dotItem[j].classList.remove("active");
|
|
|
+ }
|
|
|
+
|
|
|
+ // 第三步切换轮播图图片 及选中效果
|
|
|
+ swiperItem[this.index].classList.add("active");
|
|
|
+ // 给当前点击的小点加上选中效果
|
|
|
+ this.classList.add("active");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
