小编给大家分享一下js如何实现炫酷的左右轮播图,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
成都创新互联公司专注于汤旺企业网站建设,成都响应式网站建设公司,商城网站建设。汤旺网站建设公司,为汤旺等地区提供建站服务。全流程按需网站策划,专业设计,全程项目跟踪,成都创新互联公司专业和态度为您提供的服务
本文实例为大家分享了js左右轮播图的具体代码,供大家参考,具体内容如下
html代码
Document
主要css代码:
.w-slider{ width: 310px; height: 265px; background-color: pink; margin: 100px auto; position: relative; overflow: hidden; } .slider{ width: 310px; height: 220px; } .slider-main{ width: 620px; /* 两个图片的宽度 */ height: 310px; } .slider-main img{ vertical-align: top; /* 消除图片上下3px的间隙 */ } .slider-main-img{ position: absolute; top: 0; left: 0; } .slider-ctrl{ text-align:center; padding-top: 8px; } .slider-ctrl-con{ display: inline-block; width: 24px; height: 20px; background-color: blue; margin: 0 5px; background: url(../images/icon.png) no-repeat -24px -782px; cursor: pointer; text-indent: -20em; /* 为了将span的标号隐藏掉 */ overflow: hidden; } .slider-ctrl .current{ background-position: -24px -762px; } .slider-ctrl-prev,.slider-ctrl-next{ position: absolute; top: 50%; margin-top: -35px; display: inline-block; width: 30px; height: 35px; background: url(../images/icon.png) no-repeat 6px top; opacity: 0.8; cursor: pointer; } .slider-ctrl-prev{ left: 0; } .slider-ctrl-next{ right: 0; background-position: -6px -44px; }
主要js代码(slider.js):
window.onload = function(){ function $(id){ return document.getElementById(id);} var js_slider = $("js_slider"); var slider_main = $("slider_main"); //获取轮播图片的父盒子 var imgs = slider_main.children; //得到图片组 var slider_ctrl = $("slider_ctrl"); //获取控制的 父盒子 //生成控制轮播的span for(var i = 0; i< imgs.length; i++){ var span = document.createElement("span"); span.className = "slider-ctrl-con"; span.innerHTML = imgs.length - i; slider_ctrl.insertBefore(span,slider_ctrl.children[1]); } var spans = slider_ctrl.children; spans[1].setAttribute("class","slider-ctrl-con current"); //设置第一个span增加current样式 //布局图片,第一张在正确位置,其余的在右边 var scrollWidth = js_slider.clientWidth; //获取大盒子的宽度,也就是后面动画走的距离 for(var i=1; i310px) animate(imgs[iNow],{left: scrollWidth}); iNow = --iNow < 0 ? imgs.length-1 : iNow; imgs[iNow].style.left = -scrollWidth + "px";//快速执行,即将显示的一页立马走到左边,然后显示 animate(imgs[iNow],{left:0}); //下一张图片右移,从-310px->0 setSquare(); }else if(this.className == "slider-ctrl-next"){ //当前图片左移(从0 -> -310px) animate(imgs[iNow],{left: -scrollWidth}); iNow = (++iNow) % imgs.length; imgs[iNow].style.left = scrollWidth + "px";//快速执行,即将显示的一页立马走到右边,然后左移显示 animate(imgs[iNow],{left:0}); //下一张图片左移,从310px->0 setSquare(); //或者精简为函数 /*autoPlay();*/ }else{ /*alert("点击了下面的span");*/ var clickIndex = this.innerHTML - 1; if(clickIndex > iNow){ //做法等同于右侧按钮 animate(imgs[iNow],{left: -scrollWidth}); imgs[clickIndex].style.left = scrollWidth + "px";//快速执行,即将显示的一页立马走到右边,然后左移显示 }else if(clickIndex < iNow){ //做法等同于左侧 animate(imgs[iNow],{left: scrollWidth}); imgs[clickIndex].style.left = -scrollWidth + "px";//快速执行,即将显示的一页立马走到左边,然后显示 } iNow = clickIndex; animate(imgs[iNow],{left:0}); setSquare(); } } } //控制span小方块的样式 函数 function setSquare(){ //下面的span样式清空,将iNow设置为current,注意是下面的span,不包含左右控制按钮 for(var i=1; i 0 setSquare(); } //清除定时器 js_slider.onmouseover = function(){ clearInterval(timer); } //开启定时器 js_slider.onmouseout = function(){ clearInterval(timer); //要执行定时器,先清除定时器 timer = setInterval(autoPlay,2000); } }
缓动动画js代码:(animate.js)
//返回当前样式 function getStyle(obj,attr){ //obj对象,attr属性名 if(obj.currentStyle){ //ie等 return obj.currentStyle[attr]; }else{ //w3c return window.getComputedStyle(obj,null)[attr]; } } function animate(obj,json,fn) { // 给谁 json clearInterval(obj.timer); obj.timer = setInterval(function() { var flag = true; // 用来判断是否停止定时器 一定写到遍历的外面 for(var attr in json){ // attr 属性 json[attr] 值 //开始遍历 json // 计算步长 用 target 位置 减去当前的位置 除以 10 // console.log(attr); var current = 0; if(attr == "opacity") { current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0; //用户没有定义opacity,则返回undefined console.log(current); } else { current = parseInt(getStyle(obj,attr)); // 数值,去除样式的 “px” } // console.log(current); // 目标位置就是 属性值 var step = ( json[attr] - current) / 10; // 步长 用目标位置 - 现在的位置 / 10 step = step > 0 ? Math.ceil(step) : Math.floor(step); //判断透明度 if(attr == "opacity") // 判断用户有没有输入 opacity { if("opacity" in obj.style) // 判断 我们浏览器是否支持opacity { // obj.style.opacity,//支持opacity-----opacity:0.3 obj.style.opacity = (current + step) /100; } else { // obj.style.filter = alpha(opacity = 30) obj.style.filter = "alpha(opacity = "+(current + step)* 10+")"; } } else if(attr == "zIndex") { obj.style.zIndex = json[attr]; } else { obj.style[attr] = current + step + "px" ; } if(current != json[attr]) // 只要其中一个不满足条件 就不应该停止定时器 这句一定遍历里面 { flag = false; } } if(flag) // 用于判断定时器的条件 { clearInterval(obj.timer); //alert("ok了"); if(fn) // 很简单 当定时器停止了。 动画就结束了 如果有回调,就应该执行回调 { fn(); // 函数名 + () 调用函数 执行函数 暂且这样替代 } } },30) }
看完了这篇文章,相信你对“js如何实现炫酷的左右轮播图”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!