纯js制作图片轮播效果

好久没有发博客了，最近都在复习，为了找工作做准备。

前段时间逛了下鼠绘漫画网追海贼王最新漫画，发现他们家的图片轮播效果跟其他网页的图片轮播效果效果不同，看起来更加有趣，于是我尝试了用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看看，我就不废话了。

这就是这次做的大致效果，若读者发现有任何错误或者疑问欢迎讨论。谢谢大家。

纯js制作图片轮播效果相关推荐

JS实现图片轮播效果（自动和手动）
本次轮播效果图如下: 具有以下功能:1.自动播放(鼠标进入显示区域时停止播放) 2.左右焦点切换 3.底下小按钮切换 ps:由于很多同志反馈无法总有各种奇怪的情况,所以有需要的直接下载整个工程:JS ...
html+css+js 实现图片轮播效果
html+css+js 实现图片轮播效果图片轮播效果: 会自动向左 || 向右切换图片能手动点击按钮切换图片多用于商品展览等等 --首先我们创建一个盒子进行展览,然后一个< ul> ...
2个js实现图片轮播效果（用）
第一个(使用) 不过要注意在web.config中将该location的位置的访问权限设为allow user="*",设置了deny user="?"或&qu ...
前端原生js实现图片轮播效果，超级简单，备注详细
原生js实现简单轮播图,效果如下纯生js实现轮播图链接: link. 图片: 我们可以通过左右两边的箭头来播放图片,在我们的鼠标放在图片上时,自动播放结束,转化为手动播放,可以通过小圆点来点击切换 ...
html中使用JS实现图片轮播效果
1.首先是效果图,要在网页中实现下图的轮播效果,有四张图片,每张图片有自己的标题,然后还有右下角的小方框,鼠标悬浮在小方框上,会切换到对应的图片中去. 2.先是HTML中的内容,最外层是轮播图整个的容 ...
js实现图片轮播效果
感觉这一周学的东西中,本菜鸡觉得轮播效果是最炫酷的哈哈哈. 要好好的纪念下这个东西,以后忘了再来这边看看!超赞, 当自己做出这个效果的时候,很有成就感的(ノω<.)ノ))☆.. <!DOC ...
php中实现图片自动轮播,基于vue.js实现图片轮播效果
轮播图效果: html {{sd.title}} js export default { components: { }, ready: function() { var _this=this; va ...
php制作图片轮播_图片轮播效果实现方法
图片轮播效果如何实现呢本文主要介绍了JQuery实现图片轮播效果的制作原理以及实现代码,文章末尾附上源码下载,具有很好的参考价值.下面跟着小编一起来看下吧,希望能帮助到大家. 用JQuery操作DOM ...
js图片轮播效果实现代码
这篇文章主要介绍了js图片轮播效果实现代码,文章对每一步进行了详细阐述,标注注意事项,为顺利实现js图片轮播效果做好铺垫,对轮播效果感兴趣的朋友可以参考一下首先给大家看一看js图片轮播效果,如下图 ...

纯js制作图片轮播效果

纯js制作图片轮播效果相关推荐

最新文章

热门文章