js实现旋转木马轮播图
生活随笔
收集整理的這篇文章主要介紹了
js实现旋转木马轮播图
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
整個頁面的文件結構如下圖所示：
html部分代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>旋轉木馬輪播圖</title><link rel="stylesheet" href="css/myStyle.css"/><script type="text/javascript" src="js/animate.js"></script><script type="text/javascript" src="js/my.js"></script> </head> <body> <div class="wrap" id="wrap"><div class="slide" id="slide"><ul><li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li><li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li><li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li><li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li><li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li></ul><div class="arrow" id="arrow"><a href="javascript:;" class="prev" id="arrLeft"></a><a href="javascript:;" class="next" id="arrRight"></a></div></div> </div> </body> </html>在html部分引入的myStyle.css文件部分代碼
@charset "UTF-8";blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul{margin:0;padding:0 }body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微軟雅黑", SimSun, "宋體", sans-serif;color:#666; }ol,ul{list-style:none }a{text-decoration:none }fieldset,img{border:0;vertical-align:top; }a,input,button,select,textarea{outline:none }a,button{cursor:pointer }.wrap{width:1200px;margin:100px auto; } .slide{height:500px;position: relative; }.slide li{position:absolute;left:200px;top:0 }.slide li img{width:100% }.arrow{opacity:0; }.prev ,.next{width:76px;height:112px;position:absolute;top:50%;margin-top:-56px;background:url(../images/prev.png) no-repeat;z-index:99; }.next{right:0;background-image:url(../images/next.png); }在html部分引入的animate.js文件部分代碼
/*** Created by RENPINGSHENG on 2018/4/6.*/function animate(obj,json,fn) {clearInterval(obj.timer);obj.timer = setInterval(function () {var flag = true;for(var k in json){if( k == "opacity"){var leader = getStyle(obj,k) * 100;var target = json[k] * 100;var step = (target - leader) /10;step = step > 0 ? Math.ceil(step) : Math.floor(step);leader = leader + step;obj.style[k] = leader /100;} else if ( k == "zIndex"){obj.style[k] = json[k];}else{var leader = parseInt(getStyle(obj,k)) || 0;var target = json[k];var step = (target - leader) /10;step = step >0 ? Math.ceil(step) : Math.floor(step);leader = leader + step;obj.style[k] = leader + "px";}console.log("target:" + target + "leader:" + leader + "step:" + step);if (leader != target){flag = false;}}if (flag){clearInterval(obj.timer);if(fn){fn();}}},15) }function getStyle(obj,attr){if (obj.currentStyle){return obj.currentStyle[attr];}else{return window.getComputedStyle(obj,null)[attr];} }在html部分引入的my.js文件部分代碼
/*** Created by RENPINGSHENG on 2018/4/6.*/window.onload = function () {var wrap = document.getElementById("wrap");var slide = document.getElementById("slide");var ul = slide.children[0];var lis = ul.children;var arrow = document.getElementById("arrow");var arrRight = document.getElementById("arrRight");var arrLeft = document.getElementById("arrLeft");var config = [{width:400,top:20,left:50,opacity:0.2,zIndex:2},{width:600,top:70,left:0,opacity:0.8,zIndex:3},{width:800,top:100,left:200,opacity:1,zIndex:4},{width:600,top:70,left:600,opacity:0.8,zIndex:3},{width:400,top:20,left:750,opacity:0.2,zIndex:2}];wrap.onmouseover = function () {animate(arrow,{"opacity":1});}wrap.onmouseout = function () {animate(arrow,{"opacity":0});}function assign() {for(var i = 0;i < lis.length;i++){animate(lis[i],config[i],function(){flag = true;})}}var flag = true;assign();arrRight.onclick = function () {flag = false;config.push(config.shift());assign();};arrLeft.onclick = function () {flag = false;config.unshift(config.pop());assign();} }代碼完成后，用瀏覽器打開網頁，效果如下：
轉載于:https://www.cnblogs.com/renpingsheng/articles/8727232.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的js实现旋转木马轮播图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 加了try的情况下线程中抛出未捕获的异常
- 下一篇： HTML学习笔记（三）样式CSS