好久没有发博客了,最近都在复习,为了找工作做准备。
前段时间逛了下鼠绘漫画网追海贼王最新漫画,发现他们家的图片轮播效果跟其他网页的图片轮播效果效果不同,看起来更加有趣,于是我尝试了用js复写它。
前提提要:想要读懂这篇文章最好要懂css的定位position,简单js技术。
先看效果:
原谅我没有做个动态gif,反正读者只要知道他是做什么的就好。(当我鼠标滑动到任意一张图片,其他图片就要滑动开,让这张图片完全显示出来。)若读者想查看具体效果:可以点击这里访问。
让我们先上代码再进行讲解:
简单的html:
<div class="imgs">
<img class="img1" src="img/i1.jpg" _xhe_src="img/i1.jpg">
<img class="img2" src="img/i2.jpg" _xhe_src="img/i2.jpg">
<img class="img3" src="img/i3.jpg" _xhe_src="img/i3.jpg">
<img class="img4" src="img/i4.jpg" _xhe_src="img/i4.jpg">
<img class="img5" src="img/i5.jpg" _xhe_src="img/i5.jpg">
<ul>
<li><button></button></li>
<li><button></button></li>
<li><button></button></li>
<li><button></button></li>
<li><button></button></li>
</ul>
<div id="zuo"><input type="button"></div>
<div id="you"><input type="button"></div>
</div>
简单的css:
.imgs{
width: 1000px;
height: 300px;
margin: 100px auto;
border: 1px #999999 solid;
overflow: hidden;
position: relative;
}
.imgs img{
width: 50%;
height: 100%;
transition:left 0.3s;
position: absolute;
}
.imgs ul{
width: 100px;
position: absolute;
right: 50px;
bottom: 20px;
z-index: 100;/*将其置于顶层*/
}
.imgs ul li{
float: left;
list-style: none;
}
.imgs ul li button{
height: 13px;
margin-left: 3px;
border-radius: 50%;
border: none;
}
#zuo,#you{
width: 30px;
height: 50px;
position: absolute;
top: 125px;
z-index: 100;/*将其置于顶层*/
border: none;
filter:alpha(Opacity=80);
-moz-opacity:0.5;
opacity: 0.5;
background-color: #B2B2B2;
}
#zuo{
left: 5px;
}
#you{
right: 5px;
}
#zuo input,#you input{
width: 20px;
height: 20px;
position: relative;
top: 15px;
left: 5px;
border: none;
background-size: contain;/*使图片充满*/
filter:alpha(Opacity=80);
-moz-opacity:0.5;
opacity: 0.5;
background-color: #B2B2B2;
}
#zuo input{
background-image: url(../img/zuo.png);
}
#you input{
background-image: url(../img/you.png);
}
js实现效果:
for(var i=0;i<document.getElementsByTagName("img").length;i++){
document.getElementsByTagName("img")[i].style.zIndex = i;
document.getElementsByTagName("img")[i].style.left = i*12.5+"%";
}//图片初始化赋予状态
var t;//Time
var state = 0;
hover(0);//自动轮播开关
//主方法
function hover(onHover){
clearTimeout(t);//清除Time,防止多次点击引起混乱
document.getElementsByTagName("button")[onHover].style.backgroundColor = "chocolate";//这用来控制按钮颜色改变
//对每个鼠标悬浮对象的所有其他图片进行left改变
for(var i=0;ionHover){
img.style.left = 12.5*i+37.5+"%";//这是当我们鼠标经过图片,他右边的图片应该到达右边状态
}else if(i<=onHover){
img.style.left = i*12.5+"%";//这是当我们鼠标经过图片,他左边的图片应该回到初始状态
}
if(i!=onHover){
document.getElementsByTagName("button")[i].style.backgroundColor = "#ffffff";
}
}
state = onHover;//保存当前状态
//用来控制自动轮播
onHover++;
if(onHover==document.getElementsByTagName("img").length){
onHover=0;
}
t = setTimeout("hover("+onHover+")",2000);//每隔2s自动下一个
}
//点击下一个上一个
function next_hover(right){
var onHover = state;
if(right){
if(state==document.getElementsByTagName("img").length-1){//进行状态判断,若为最后一个,下一个为第一个
onHover=0;
}else{
onHover++;
}
}else{
if(state==0){//进行状态判断,若为第一个,下一个为最一个
onHover=document.getElementsByTagName("img").length-1;
}else{
onHover--;
}
}
hover(onHover);
}
若读者想看具体代码可以到我的详细代码,我已经上传到githup上:
点击打开链接
设计思路:
其实这个动画看着很酷炫,但是实现思路还是蛮简单的。
每一张图片都只有两种状态:1完全显示。2收起来。
图片通过css属性z-index来实现折叠状态。而鼠标悬浮事件则通过js来控制图片left的值实现动画效果。
当我滑过图片时,我需要进行遍历所有图片,当在图片右边的会向右滑动,在左边的回到左边。
//对每个鼠标悬浮对象的所有其他图片进行left改变
for(var i=0;i<document.getElementsByTagName("img").length;i++){
var img = document.getElementsByTagName("img")[i];
if(i>onHover){
img.style.left = 12.5*i+37.5+"%";//这是当我们鼠标经过图片,他右边的图片应该到达右边状态
}else if(i<=onHover){
img.style.left = i*12.5+"%";//这是当我们鼠标经过图片,他左边的图片应该回到初始状态
}
if(i!=onHover){
document.getElementsByTagName("button")[i].style.backgroundColor = "#ffffff";
}
}
我在做完滑动轮播后再加入了自动轮播效果。具体实现通过setTimeout这个方法。这个方法有两个参数,第一个参数传具体执行,第二个传执行时间。
//用来控制自动轮播
onHover++;
if(onHover==document.getElementsByTagName("img").length){
onHover=0;
}
t = setTimeout("hover("+onHover+")",2000);//每隔2s自动下一个
别忘了hover方法开始加入clearTimeout方法,这个方法用来清除Timeout,否则当我们自动轮播与手动滑动同时运行,会同时操作轮播效果。
图片滑动效果主要运用了css的transition属性,若有兴趣,可以去w3c看看,我就不废话了。
这就是这次做的大致效果,若读者发现有任何错误或者疑问欢迎讨论。谢谢大家。