123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207 |
- <!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>
|