效果图:(制作不易,多谢支持)
寒假里因为新型肺炎的事情不敢出门,虽然整天呆在家里,但我感觉也并不是那么无聊,可能我真的比较宅吧,话说回来这么长时间什么也不干也不太好,所以就利用这宝贵的时间学点知识。其实在还没放假的时候就已经做好了好好学习的打算,到今天也差不多坚持了快一个月了,虽然上午基本上是用睡觉度过的,但感觉通过这些天的学习还是收获了许多。
今天这个案例是做轮播图,其实早就想做这个东西了,之前都是用的别人的,在做之前感觉挺复杂的。做完之后感觉并不是那么难。至少对于我这个轮播。
下面就讲一下我做这个轮播的时候的步骤和想法。
首先html和css方面就不多说了,主要说下js这里,这个案例用的是原生的js,没有用什么框架。
轮播图最重要的就是图片的切换,所以图片切换做好了其他就简单了。在刚开始做的时候,打算用设置固有属性className的方法,但是后来发现用这个的话会替换掉原来类,这可不行,所以我用node.className+="类名";这个方式,这个方法虽然没有替换掉原来的类,但是每添加一次类标签上的类名就多了一个,而且这些标签上的类名只会增加不会减少,并且采用这种方法的话需要添加好几个类,所以就放弃这种方法了。
然后决定用node.style.“属性”=“值”;的方法,发现这种方法还挺方便。但是再写这块js的时候添加了太多CSS里面的定位和转换,搞得逻辑特别混乱,就像这样
定位和转换分开用还会,但是一块用就有点摸不着头脑了,所以我做了一个小demo,来测试一下他们一起用的话到底是什么样的。
html:
<div class="box">
<div class="sunbox " id="btn"></div>
</div>
css:
<style>
.box{
width: 800px;
height: 800px;
border: 1px solid red;
margin: 0 auto;
position: relative;
}
.sunbox{
width: 200px;
height:200px;
background: darkblue;
position: absolute;
left: -100px;
transform: translateX(200px);
transition: 1s;
}
</style>
js:
<script>
var btn=document.getElementById("btn");
btn.addEventListener("click",function(){
this.style.left="-200px"
this.style.transform="translateX(0px)";
})
</script>
有两个div,外边是一个宽高都为800px的红色边框的盒子,并加了相对定位(如果对定位不太懂的话可以去我的博客里面康康)。内层div是一个背景为蓝色的宽高200px的盒子,并添加了绝对定位,定位在left:-100px;并且沿x轴移动了200px,也就是现在的位置。
当点击蓝色的div的时候,改变了两个属性,
this.style.left="-200px"
this.style.transform="translateX(0px)";
然后变成了这样。发现盒子从上个位置移到了下面图片这个位置。
所以,我得出结论 ,点击盒子改变的两个属性,并不是使盒子直接在left:-200px;的位置移动0px;而是从点击前的位置移到
this.style.left="-200px"
this.style.transform="translateX(0px)";
这两个属性所决定的盒子的最终位置。
就是:(错误的)起始位置:left:-200px ; 最终位置:left:-200px;移动0px;
(正确的)起始位置:left:left:-100px;水平移动200px;最终位置:left:-200px ;移动0px;
理解了这个做这个轮播图就好多了。
方法:
我将轮播的切换分成了三块,第一块是当前显示的轮播(left:0px;);第二块是将要进入的轮播(left:-1200px;从左进入,图片宽度1200px);第三块是退出的轮播(left:1200px);
当前显示的轮播:
pics[idx].style.transform="translateX(1200px)";
pics[idx].style.transition="1s";
pics[idx].style.left="0px";
pics[idx].style.zIndex="3";
触发某个事件之后这个图片在水平方向上移动1200px。
将要进入的轮播:
pics[idx].style.transform="translateX(1200px)";
pics[idx].style.transition="1s";
pics[idx].style.left="-1200px";
pics[idx].style.zIndex="3";
这个轮播图是在当前显示的轮播的左边,同时向右移动1200px。
退出的轮播:
pics[n].style.zIndex="2";
pics[n].style.transform="translateX(0px)";
pics[n].style.left="-1200px";
pics[n].style.transition="0s";
这个轮播图是在当前显示的轮播的右边,同时把他移到将要进入的轮播的位置。意思就是,当当前显示的轮播图退出之后要将其下一张定位回到“将要进入的轮播图这个位置”,因为如果不这样做,在left:1200px;位置的轮播图是无法一下子从第二快的位置移到第三块的位置,就像上面举得案例。
在做的时候还遇到了第一次点击切换轮播的时候,会看见第三部分的轮播移动到第二部分的情景,这个时候就需要调第一二个图片的z-index属性,我在CSS里面把前两个图片的z-index挑的比其他的高点。这样就可以了。
完整代码(制作不易,多谢支持)
html:
<!DOCTYPE >
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="header">
<!--主菜单-->
<div class="menu">
<ul>
<li id="0">手机配件<span id="0"></span></li>
<li id="1">家用电脑<span id="1"></span></li>
<li id="2">电器<span id="2"></span></li>
<li id="3">家具<span id="3"></span></li>
</ul>
</div>
<!--副菜单-->
<div class="sub-menu">
<div class="inner-box">
<div class="title">手机配件</div>
<div class="sub-row">
<span class="b">手机配件:</span>
<a href="">手机壳</a>
<span >/</span>
<a href="">手机存储卡</a>
<span >/</span>
<a href="">数据线</a>
<span>/</span>
<a href="">充电器</a>
<span>/</span>
<a href="">电池</a>
</div>
<div class="sub-row">
<span class="b">手机配件:</span>
<a href="">手机壳</a>
<span >/</span>
<a href="">手机存储卡</a>
<span >/</span>
<a href="">数据线</a>
<span>/</span>
<a href="">充电器</a>
<span>/</span>
<a href="">电池</a>
</div>
</div>
<div class="inner-box">
<div class="title">手机配件</div>
<div class="sub-row">
<span class="b">手机配件:</span>
<a href="">手机壳</a>
<span >/</span>
<a href="">手机存储卡</a>
<span >/</span>
<a href="">数据线</a>
<span>/</span>
<a href="">充电器</a>
<span>/</span>
<a href="">电池</a>
</div>
</div>
<div class="inner-box"></div>
<div class="inner-box"></div>
</div>
<!--轮播图-->
<div class="banner">
<a href="#">
<div class="banner-slide slide1 "></div>
</a>
<a href="#">
<div class="banner-slide slide2"></div>
</a>
<a href="#">
<div class="banner-slide slide3"></div>
</a>
<a href="#">
<div class="banner-slide slide4"></div>
</a>
<a href="#">
<div class="banner-slide slide5"></div>
</a>
</div>
<div class="pre button"></div>
<div class="end button"></div>
<div class="dots">
<span id="0" class="active"></span>
<span id="1"></span>
<span id="2"></span>
<span id="3"></span>
<span id="4"></span>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
}
@font-face {font-family: 'iconfont';
src: url('img/font/iconfont.eot');
src: url('img/font/iconfont.eot') format('embedded-opentype'),
url('img/font/iconfont.woff') format('woff'),
url('img/font/iconfont.ttf') format('truetype'),
url('img/font/iconfont.svg#iconfont') format('svg');
}
a{
text-decoration: none;
color: #14191e;
}
.header{
width: 1200px;
height: 460px;
margin: 30px auto;
position: relative;
overflow: hidden;
}
.banner{
width: 1200px;
height: 460px;
overflow: hidden;
position: relative;
left: 0;
top: 0;
}
.bannerChange{
transform: translateX(1200px);
transition: 1s;
}
.bannerChange1{
transform: translateX(1200px);
transition: 1s;
left: 1200px;
top: 0;
}
.banner-slide{
width: 1200px;
height: 460px;
float: left;
position: absolute;
top: 0px;
}
.banner .slide1{
background: url("img/1.jpg");
/*left: -1200px;*/
z-index: 3;
}
.banner .slide2{
background: url("img/3.jpg");
/*left: 1200px;*/
z-index: 2;
}
.banner .slide3{
background: url("img/4.jpg");
/*left: 0px;*/
z-index: 1;
}
.banner .slide4{
background: url("img/bg1.jpg");
/*left: 0px;*/
z-index: 1;
}
.banner .slide5{
background: url("img/bg2.jpg");
/*left: 0px;*/
z-index: 1;
}
/*前后图片按钮*/
.button{
width: 40px;
height: 80px;
background: url("img/arrow.png") center center no-repeat;
position: absolute;
z-index: 5;
}
.pre{
left: 220px;
top: 50%;
margin-top:-15px;
transform: rotate(180deg);
}
.end{
right: 10px;
top: 50%;
margin-top:-15px;
}
.button:hover{
background-color:#333;
opacity: 0.8;
filter:alpha(opacity=80);
}
/*轮播点*/
.dots{
z-index: 5;
position: absolute;
bottom: 20px;
right: 20px;
}
.dots span{
display: inline-block;
width: 12px;
height: 12px;
background-color: rgba(7, 17, 27, 0.4);
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
border-radius: 50%;
margin-left: 7px;
}
span.active{
box-shadow: 0 0 0 2px rgba(7, 17, 27, 0.4) inset;
background-color: #ffffff;
}
/*主菜单*/
.menu{
z-index: 5;
width: 190px;
height: 460px;
position: absolute;
top: 0;
left: 0;
background:rgba(7, 17, 27, 0.5);
padding: 10px 0px 0px 20px;
}
.menu ul li{
width: 100%;
height: 64px;
line-height: 64px;
font-size: 16px;
list-style: none;
cursor: pointer;
/*border-bottom:1px solid rgba(255, 255, 255, 0.2) ;*/
color: #fff;
padding-left: 20px;
border-radius:7px 0 0 7px;
box-sizing: border-box;
position: relative;
}
.menu ul li:hover{
background: rgba(0,0,0,0.3);
}
.menu li span{
font-size: 24px;
color: rgba(255,255,255,0.5);
font-style: normal;
font-weight: normal;
font-family:"iconfont";
position: absolute;
top: 0px;
right: 10px;
}
/*二级菜单*/
.sub-menu{
height: 460px;
width: 630px;
position: absolute;
top: 0;
left: 210px;
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
z-index: 5;
}
.inner-box{
display: none;
height: 460px;
width: 630px;
padding-left: 30px;
background:url(img/fe.png) no-repeat;
padding-top:28px ;
}
.title{
color: #f01414;
font-size: 16px;
line-height: 16px;
/*margin-top: 28px;*/
font-weight: bold;
margin-bottom: 30px;
}
.sub-row{
margin-bottom:25px;
}
.sub-row .b{
font-weight: bold;
}
JS :
var idx=0;//当前转到那个轮播图
var num=document.getElementsByClassName("banner-slide").length;//轮播图数量
var pics=document.getElementsByClassName("banner-slide");//图片集
addId();//给轮播图片添加id序号
clickBtn();//点击按钮轮播
autoplay();//自动轮播
subment();//二级菜单显示
//跨浏览器添加和移除事件
function addHandler(element,type,handler){//定义事件
if(element.addEventListener){
element.addEventListener(type,handler,false);
}
else if(element.attachEvent){
element.attachEvent("on"+type,handler);
}
else{
element["on"+type]=null;
}
}
function removeHandler(element,type,handler){//移除事件
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}
else if(element.detachEvent){
element.detachEvent("no"+type,handler);
}
else{
element["no"+type]=null;
}
}
//给图片添加自定义属性Data-id
function addId(){
for(var i=0;i<num;i++){
pics[i].setAttribute("dataId",i);
}
}
//点击按钮切换轮播图
function clickBtn(){
var btn1=document.getElementsByClassName("pre");
var btn2=document.getElementsByClassName("end");
addHandler(btn1[0],"click",function(){//前
pics[idx].style.transform="translateX(1200px)";
pics[idx].style.transition="1s";
pics[idx].style.left="0px";
pics[idx].style.zIndex="3";
idx++;
if(idx<0){
idx=num-1;
}else if(idx>=num){
idx=0;
}
pics[idx].style.transform="translateX(1200px)";
pics[idx].style.transition="1s";
pics[idx].style.left="-1200px";
pics[idx].style.zIndex="3";
var n;
if(idx+1>=num){
n=0;
}
else{
n=idx+1;
}
pics[n].style.zIndex="2";
pics[n].style.transform="translateX(0px)";
pics[n].style.left="-1190px";
pics[n].style.transition="0s";
dot();
})
addHandler(btn2[0],"click",function(){//后
pics[idx].style.transform="translateX(-1200px)";
pics[idx].style.transition="1s";
pics[idx].style.left="0px";
pics[idx].style.zIndex="3";
idx--;
if(idx<0){
idx=num-1;
}else if(idx>=num){
idx=0;
}
pics[idx].style.transform="translateX(-1200px)";
pics[idx].style.transition="1s";
pics[idx].style.left="1200px";
pics[idx].style.zIndex="3";
var n;
if(idx-1<0){
n=num-1;
}
else{
n=idx-1;
}
pics[n].style.zIndex="1";
pics[n].style.transform="translateX(0px)";
pics[n].style.left="1190px";
pics[n].style.transition="0s";
dot();
})
}
//点击pre按钮切换轮播图
function pre(){
pics[idx].style.transform="translateX(1200px)";
pics[idx].style.transition="1s";
pics[idx].style.left="0px";
pics[idx].style.zIndex="3";
idx++;
if(idx<0){
idx=num-1;
}else if(idx>=num){
idx=0;
}
pics[idx].style.transform="translateX(1200px)";
pics[idx].style.transition="1s";
pics[idx].style.left="-1200px";
pics[idx].style.zIndex="3";
var n;
if(idx+1>=num){
n=0;
}
else{
n=idx+1;
}
pics[n].style.zIndex="1";
pics[n].style.transform="translateX(0px)";
pics[n].style.left="-1190px";
pics[n].style.transition="0s";
dot();
}
//点高亮
function dot(){
var dots=document.getElementsByClassName("dots")[0].children;
var n=dots.length;
for(var i=0;i<n;i++){
if(i==idx){
dots[i].className="active";
}
else{
dots[i].className="";
}
}
}
//自动轮播
function autoplay(){
var a=setInterval("pre()",3000);
}
//二级菜单显示
function subment(){
var ment=document.getElementsByTagName("ul")[0];
var subBox=document.getElementsByClassName("sub-menu")[0].children;
var subBoxs=document.getElementsByClassName("sub-menu")[0];
addHandler(ment,"mouseover",function(event){
var m=event.target.id;
subBox[m].style.display="block";
addHandler(subBox[m],"mouseover",function(){
subBox[m].style.display="block";
})
addHandler(subBox[m],"mouseout",function(){
subBox[m].style.display="none";
})
},true)
addHandler(ment,"mouseout",function(event){
var m=event.target.id;
subBox[m].style.display="none";
})
}