用js写的轮播图，八位女明星，你翻谁的牌，程序员就是可以为所欲为！

今天下午利用摸鱼的时间做了一个图片轮播，嘿嘿，先看看效果，本来想搞动态图的，整出来效果不好，图片又超过了5M不让传，还是截图吧

感觉需

实现的功能：

1.定时向右滚动。

2.点击明星切换到最中间。

3.鼠标移入定时器被清除、鼠标移开定时器再次载入。

要改进的地方：

1.参数img_num 即总图片的数量必须是大于等于5，小于5的话会有空隙。
2.图片目前设定的宽 262px 高389px 如果尺寸的比例不符合的话效果没那么好。

实现思路：

1.先初始化几张图片（用div，然后div加入img），并将这些div存储到一个array中作为队列。

2.封装一个reset函数（包含自己先前写的动画函数），专门用来对这些图片设置样式，根据他们的位置设置不同的left top 宽度高度等。

3.当我们点击其中的div时，就同步将他的位置设置到队列的中间，同时它左右两边的同步移动（最前面的那个再往前移动的话就放到队列的最后，形成循环）。

4.队列设置好以后，调用reset 函数就会再次排版。

5.定时往右移动，鼠标移入清除定时器，移出时再次生成定时器。

完整代码


<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK"><style>*{margin:0;padding:0;}#div_box{width:1100px; margin:0px auto;}#div_box div{position:absolute;width:0;height:0;z-index:0;cursor:pointer;overflow:hidden;top:152px; left:10px;}#div_box div img{width:100%;height:100%;vertical-align:top; float:left; border:0;}</style></head><body><div id="div_box" ></div></body><script>(function(){var div_box = document.getElementById("div_box");// 获取盒子var boxQuene=[];//用来存储图片dom对象的//创建图片var img_num=8,middle_num=(img_num%2==0)?(img_num/2):Math.floor(img_num/2)+1;function init(){var screenWidth = window.screen.availWidth-20;var screenHeight = window.screen.availHeight-110;div_box.style.width=screenWidth+'px';div_box.style.height=screenHeight+'px';for(var i=1;i<=img_num;i++){//生成卡片var div = document.createElement("div");div.id="div_"+i;var borderColor = '#' + Math.random().toString(16).substr(2, 6).toUpperCase();div.style.border='3px solid '+borderColor;div.style.borderRadius='8px';div.addEventListener('click',check);div.addEventListener('mouseover',over);div.addEventListener('mouseout',out);var img = document.createElement("img");img.src="../images/2/"+i+".jpg";div.appendChild(img);div_box.appendChild(div);boxQuene.push(div);//一个个的推入到盒子队列}//第一次设置卡片样式reset();//定时向右翻autoMove();}var left=0,top=50,c_top,zIndex=0,width=262,height=389,first,last;//重新设置卡片的样式function reset(){for(var i=0;i<boxQuene.length;i++){var obj = boxQuene[i];width=262,height=389,c_top=0;var step = Math.floor((img_num-5)/2);if(i<=step){first=true;last=false;}else if(i>=boxQuene.length-1-step){first=false;last=true;}else{first=false;last=false;}if(i<middle_num){zIndex++;if(first){left=100;}else if(i==middle_num-1){left=(i-step) * 250;width+=40;height+=56;c_top=-30;}else{left=(i-step) * 260;}}else{zIndex--;if(last){left = screen.availWidth-390;}else{left=(i-step) * 260;}}//obj.style.width=width+'px';//obj.style.height=height+'px';//obj.style.left=left+'px';//obj.style.top=top+c_top+'px';obj.style.zIndex=zIndex;obj.children[0].id=i;//使用自己封装的动画函数(function(o){var o_width=width+'px',o_height=height+'px',o_left=left+'px',o_top=top+c_top+'px',index=i;var param = {'width': o_width,'height': o_height,'left': o_left,'top': o_top,'z-index':zIndex};animate(o,param,'fast');})(obj);}}//选中图片事件函数function check(e){var e = e || window.event;var target = e.target || e.srcElement;if(target.id){var cur = boxQuene.filter(function(item){return target.id==item.children[0].id;})var curIndex = parseInt(/\d+/.exec(cur[0].children[0].id)[0]);if(curIndex===middle_num-1){return;}else{moveQuene(curIndex);}reset();}}function over(){clearInterval(timmer);}function out(){autoMove();}function moveQuene(curIndex){var step = middle_num-1-curIndex;if(step>0){while(step>0){boxQuene.unshift(boxQuene.pop());step--;}}else{step = Math.abs(step);while(step>0){boxQuene.push(boxQuene.shift());step--;}}}//获取属性值function getStyle(obj, prop) {var prevComputedStyle = document.defaultView ? document.defaultView.getComputedStyle( obj, null ) : obj.currentStyle;return prevComputedStyle[prop];}/*obj:dom对象prop:动画参数speed:执行速度 fast slow 3000等func:回调函数*/function animate(obj,prop,speed,func){//防止重复动画事件if(obj.timer) return ;//定义定时器执行次数和总执行时间var  limit=20,totalTime; if(typeof speed==='number'){//如果传入的是totalTime = speed;}else if(speed==='slow'){totalTime = 600;}else if(speed==='fast'){totalTime = 200;}else{totalTime = 400;}var time = totalTime/limit;var n=0,cache={},display,primary_cur;//cache用来缓存，省的每次都去dom获取obj.timer = setInterval(function(){n++;//执行次数每次递增for(var p in prop){if("display"===p) {display = prop["display"];if(display!=='none'){obj.style['display'] = display;}delete prop["display"];continue;}//判断是否是可以递增的属性，如果不是则直接让它生效，并从prop中删除，删除后就不用每次任务都执行它var reg = /^(\d)+(px$)?/;//数字和像素这样的判定为可以递增的属性if(!reg.test(prop[p])){obj.style[p] = prop[p];delete prop[p];continue;}var value,opacityFlag=(p == "opacity")?true:false;var cur = 0;if(cache[p+"_cur"]){//从缓存中取cur = cache[p+"_cur"];value = cache[p+"_value"];}else{value = prop[p];if(opacityFlag) {//如果本来是隐藏的则cur默认就是0if(getStyle(obj, 'display')!=='none'){cur = Math.round(parseFloat(getStyle(obj, p)) * 100);}} else {cur = parseInt(getStyle(obj, p));//处理100px的格式(typeof value==='string') && (value=value.replace(/px$/,""));}primary_cur=cur;cache[p+"_value"] = value;}var incre ;if(cache[p+'_increment']){//如果缓存中有则从中取incre = cache[p+'_increment'];}else{if(opacityFlag){incre = (value*100-cur)/limit;//计算每次变化值}else{incre = (value-cur)/limit;//计算每次变化值}cache[p+'_increment']= incre;}//缓存起来，这样就不用每次都去dom中获取了。cache[p+"_cur"] = cur + incre;if (opacityFlag) {obj.style.filter = "alpha(opacity:"+(cur + incre)+" )";obj.style.opacity = (cur + incre)/100 ;}else {obj.style[p] = cur + incre + "px";}}//如果达到了最大执行次数，要清除定时器，并执行回调函数if(n==limit){if(display==='none'){obj.style['display'] = 'none';}//清除定时器clearInterval(obj.timer);obj.timer=undefined;func && func();}},time)}var _ = {isFunction : function(o){return o!== null &&typeof o ==='function';}}var timmer;function autoMove(){timmer = setInterval(function(){//往右翻boxQuene.unshift(boxQuene.pop());reset();},3000);}//初始化init();})()</script>
</html>

图片的话自己整，整理不易给个三连吧！！

用js写的轮播图，八位女明星，你翻谁的牌，程序员就是可以为所欲为！相关推荐

原生js进阶版轮播图实现(走马灯效果，无缝衔接)
原生js进阶版轮播图实现(走马灯效果,无缝衔接) 利用原生js手写一个轮播图,是上一篇文章的简易版的一个进阶,本次轮播图主要是利用定位和定时器实现了走马灯效果,并且是左右轮播.实现过程与代码也是很简单 ...
简单的手写jquery轮播图（包含切换按钮、小圆点）
简单的手写jquery轮播图(包含切换按钮.小圆点) css代码 * {margin: 0;padding: 0; }.container {width: 800px;height: 400px;ma ...
javaScript小案例------js实现无缝轮播图效果篇
原生js书写无缝轮播图 javaScript无缝轮播图思路及源码无缝轮播图效果总体思路下面附上代码: html css animate.js index.js javaScript无缝轮播图思路 ...
HTML视频能不能做成轮播图,vue.js能做轮播图吗？
vue.js能做轮播图吗?答案是:可以.下面本篇文章给大家通过实例介绍一下使用vue.js做轮播图.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 最近新学习了vuejs,尝试着用v ...
图片竖轮播html,JS实现纵向轮播图（初级版）
本文实例为大家分享了JS实现纵向轮播图的具体代码,供大家参考,具体内容如下描述: 纵向buton或者底部数字控制轮播,可以实现自动轮播(注释了,使用的话将其注释消掉),核心知识是数据驱动图像的透明度 ...
js实现圆柱形轮播图
js实现圆柱形轮播图 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=&quo ...
html图片百叶窗轮播,纯js百叶窗效果轮播图插件
这是一款纯js百叶窗效果轮播图插件.该js轮播图在图片切换时的效果类似于多张图片展开合成一张完整的大图.该轮播图由纯js编写,兼容ie8浏览器. 使用方法在页面中引入imgSwitch.min.js ...
Android 旋转木马轮播,js实现旋转木马轮播图效果
本文实例为大家分享了js实现旋转木马轮播图的具体代码,供大家参考,具体内容如下整个页面的文件结构如下图所示: html部分代码: 旋转木马轮播图在html部分引入的myStyle.css文件部分代 ...
php cms 轮播图,原生JS运动实现轮播图
原生JS运动实现轮播图 **基本原理:**通过控制包含n张图片的ul的left值来实现图片自动运动的效果,其中列表中li元素的个数为n,第一个li和最后一个li里存放的图片应为同一张图片,当图片运动到 ...