js实现炫酷的左右轮播图
程序员文章站
2023-11-16 09:06:34
本文实例为大家分享了js左右轮播图的具体代码,供大家参考,具体内容如下
html代码
本文实例为大家分享了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) }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: linux下bind9安装配置一例
下一篇: css3实现可拖动的魔方3d效果