Posted in Javascript onJanuary 18, 2017
本文实例为大家分享了js左右轮播图的具体代码,供大家参考,具体内容如下
html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta keyword="左右轮播图-效果比较好"> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/css.css"> <script type="text/javascript" src="js/animate.js"></script> <script type="text/javascript" src="js/slider.js"></script> </head> <body> <div class="w-slider" id="js_slider"> <div class="slider"> <div class="slider-main" id="slider_main"> <div class="slider-main-img"><a href="#"><img src="images/1.jpg" alt=""></a></div> <div class="slider-main-img"><a href="#"><img src="images/2.jpg" alt=""></a></div> <div class="slider-main-img"><a href="#"><img src="images/3.jpg" alt=""></a></div> <div class="slider-main-img"><a href="#"><img src="images/4.jpg" alt=""></a></div> <div class="slider-main-img"><a href="#"><img src="images/5.jpg" alt=""></a></div> <div class="slider-main-img"><a href="#"><img src="images/6.jpg" alt=""></a></div> </div> </div> <div class="slider-ctrl" id="slider_ctrl"> <span class="slider-ctrl-prev"></span> <!-- <span class="slider-ctrl-con current"></span> <span class="slider-ctrl-con"></span> <span class="slider-ctrl-con"></span> <span class="slider-ctrl-con"></span> <span class="slider-ctrl-con"></span> <span class="slider-ctrl-con"></span> --> <span class="slider-ctrl-next"></span> </div> </div> <script> </script> </body> </html>
主要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; i<imgs.length; i++){ //第一张图片在正确位置 imgs[i].style.left = scrollWidth + "px"; //其余图片在310px的位置 } //遍历三个按钮--左、右和下面的span var iNow = 0; //设置当前显示的图片的索引号 for(var k in spans){ //k是索引号 spans[k].onclick = function(){ if(this.className == "slider-ctrl-prev"){ //当前图片右移(从0 -> 310px) 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<spans.length-1; i++){ spans[i].className = "slider-ctrl-con"; } spans[iNow+1].className = "slider-ctrl-con current"; //注意iNow是索引号,要加1 } //设置定时器 ,和右侧按钮功能一致 var timer =null; timer = setInterval(autoPlay,2000); function autoPlay(){ animate(imgs[iNow],{left: -scrollWidth}); iNow = (++iNow) % imgs.length; imgs[iNow].style.left = scrollWidth + "px";//快速执行,即将显示的一页立马走到右边,然后左移显示 animate(imgs[iNow],{left:0}); //下一张图片左移,从310px->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实现炫酷的左右轮播图
- Author -
秋天1014童话声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@