HTML：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<meta name="viewport" content="width=375,user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
head>
<body>
<div class="header">
<div class="logo">div>
<div class="searchBtn">
<div class="searchIcon">div>
<div class="searchText">寻找宝贝店铺div>
div>
div>
<div class="swiper">
<div class="imgList">
<div class="imgItem" style="background-image: url(img/tu1.jpg)">div>
<div class="imgItem" style="background-image: url(img/tu2.jpg)">div>
<div class="imgItem" style="background-image: url(img/tu3.jpg)">div>
div>
<div class="btn">
<div class="leftBtn">div>
<div class="rightBtn">div>
div>
<div class="circleList">
<div class="circle">div>
<div class="circle">div>
<div class="circle">div>
div>
div>
<div class="iconList">
<div class="iconItem">
<div class="icon1">div>
<div class="iconText">天猫新品div>
div>
<div class="iconItem">
<div class="icon2">div>
<div class="iconText">今日爆款div>
div>
<div class="iconItem">
<div class="icon3">div>
<div class="iconText">天猫国际div>
div>
<div class="iconItem">
<div class="icon4">div>
<div class="iconText">饿了么div>
div>
<div class="iconItem">
<div class="icon5">div>
<div class="iconText">天猫超市div>
div>
<div class="iconItem">
<div class="icon6">div>
<div class="iconText">天猫div>
div>
<div class="iconItem">
<div class="icon7">div>
<div class="iconText">天猫div>
div>
<div class="iconItem">
<div class="icon8">div>
<div class="iconText">天猫div>
div>
<div class="iconItem">
<div class="icon9">div>
<div class="iconText">天猫div>
div>
<div class="iconItem">
<div class="icon10">div>
<div class="iconText">天猫div>
div>
div>
<script type="text/javascript">
var left=document.querySelector(".btn .leftBtn")
var right=document.querySelector(".btn .rightBtn")
var imgList=document.querySelectorAll(".imgList .imgItem")
var circleList=document.querySelectorAll(".circleList .circle")
var imgNum=0;
function renderImg(imgNum)
{
imgList.forEach(function(item,index){
if(imgNum == index)
{imgList[imgNum].style.zIndex=10;
//通过改变同一个类的不同css样式来改变
circleList[index].className="circle active"
}
else{
item.style.zIndex=0;
circleList[index].className="circle"
}
})
}
renderImg(imgNum)
right.onclick = function () {
imgNum++;
if(imgNum>=imgList.length)
{imgNum = 0;}
renderImg(imgNum)
}
left.onclick = function () {
imgNum--;
if(imgNum<0){
imgNum=imgList.length - 1;
}
renderImg(imgNum)
}
script>
body>
html>
CSS：
*{ /*匹配所有的元素，去掉浏览器自带的内边距和外边距*/ margin: 0; padding: 0; } .header{ width: 375px; height: 37px; display: flex; background: #FF852A; color: #fff; align-items: center; justify-content: space-around; position: fixed; top: 0; left: 0; } .logo{ width: 37px; height: 37px; background-image: url(../img/tao.png); background-size: 80%; background-position: center; background-repeat: no-repeat; } .searchBtn{ width: 324px; height: 25px; background: rgb(255, 78, 34); /*设定圆角*/ border-radius: 4px; font-size: 14px; text-align: center; display: flex; justify-content: center; align-content: center; } .searchIcon{ width: 25px; height: 25px; background-image: url(../img/search.png); background-size: 60%; background-position: center; background-repeat: no-repeat; } .swiper{ margin-top: 37px; width: 375px; height: 120px; position: relative; background-size: 100% 100%; background-position: 0% 0%,0 0; } .imgList .zhezhao{ z-index: 20; position: absolute; } .imgList{ position: absolute; left: 0; right: 0; width: 100%; height: 100%; } /*下面必须要有一个空格，不然出不来。*/ .imgList .imgItem{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-size: auto 100%; background-position:center; background-repeat: no-repeat; } .btn .leftBtn{ width: 60px; height: 60px; background-image: url(../img/left1.png); background-size: auto 65%; background-position:center; background-repeat: no-repeat; position: absolute; left: -15px; top:calc(50% - 30px); z-index: 100; } .btn .rightBtn{ width: 60px; height: 60px; background-image: url(../img/right1.png); background-size: auto 65%; background-position:center; background-repeat: no-repeat; position: absolute; right: -15px; top:calc(50% - 30px); z-index: 100; } .circleList{ width: 100px; height: 100px; position: absolute; left: 145px; bottom: -40px; display: flex; justify-content: center; align-items: center; z-index: 100; } .circle{ width: 10px; height: 10px; border: 2px solid #aaa; /*黑色*/ background-color: #555; border-radius: 7px; margin: 0 10px; } /*下面的没有用空格的，是指同一个类*/ .circle.active{ width: 10px; height: 10px; border: 2px solid #aaa; /*白色*/ background-color: #fff; border-radius: 7px; margin: 0 10px; } .iconList{ width: 375px; height: 160px; display: flex; flex-wrap: wrap; align-content: center; align-content: space-around; } .iconItem{ width: 20%; height: 67px; display: flex; flex-direction: column; justify-content: center; align-content: center; } .icon1{ width: 61px; height: 48px; background-image: url(../img/tianmao.png); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } .icon2{ width: 61px; height: 48px; background-image: url(../img/ju.png); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } .icon3{ width: 61px; height: 48px; background-image: url(../img/tianmaoguoji.png); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } .icon4{ width: 61px; height: 48px; background-image: url(../img/eleme.png); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } .icon5{ width: 61px; height: 48px; background-image: url(../img/tianmaochaoshi.png); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } .icon6{ width: 61px; height: 48px; background-image: url(../img/tianmao.png); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } .icon7{ width: 61px; height: 48px; background-image: url(../img/tianmao.png); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } .icon8{ width: 61px; height: 48px; background-image: url(../img/tianmao.png); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } .icon9{ width: 61px; height: 48px; background-image: url(../img/tianmao.png); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } .icon10{ width: 61px; height: 48px; background-image: url(../img/tianmao.png); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } .iconText{ font-size: 11px; margin-top: 5px; color: rgb(102, 102, 102); display: flex; }
