## html的布局 ``` <!--輪播層--> <div class="slide_once"> <ul id="slideBanner"> <li> <img src="./img/slide1.jpg" alt=""> </li> <li> <img src="./img/slide2.jpg" alt=""> </li> <li> <img src="./img/slide3.jpg" alt=""> </li> </ul> <div class="controller clearfix" id="topSlide"> <!--<span class="current"></span>--> <!--<span></span>--> <!--<span></span>--> </div> </div> ``` ## 樣式 ``` .slide_once .controller { position: absolute; height:40px ; left: 50%; transform: translateX(-50%); bottom:90px; } .slide_once .controller span { box-sizing: border-box; margin-top: 10px; display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff9e5; margin-left: 20px; margin-right: 20px; float: left; } .slide_once .controller .current { width: 36px; height: 36px; background: url("../img/video.png"); margin-top: 0; } .more .slide_con ul { width: 600%; position: absolute; left: 0; top: 0; } .more .slide_con li { float: left; height: 100%; width: 1200px; } .slide .slide_once { width: 100%; height: 100%; overflow: hidden; } .slide_once li img { width: 100%; height: 960px; } ``` ## js ``` /* * * desc: 輪播圖 * time: 2018-12-1 * author: Marvin * @param{Object} 配置參數 參數說明 * @param{ulId}: ul的id * @param{controlId}: 控制器span盒子的id * @param{epeed}: 輪播圖的速度 * @param{width}: 輪播圖片的寬度 * @param{height} ： 輪播圖的高度 * @param{currentClassname} ： 當前輪播的class * @param{currentspecial} ： 當前特殊輪播的class */ function Slide(option) { this.parent = document.querySelector(option.ulId) || null; this.control = document.querySelector(option.controlId) || null; this.index = 0; this.square = 0; this._init(option); } Slide.prototype = { _init: function (option) { /*所有的輪播的盒子*/ this.listArray = this.parent.children; /*所有輪播盒子的個數*/ this.listLength = this.listArray.length; /*復制第一張的圖片到ul 的最后*/ this.parent.appendChild(this.parent.children[0].cloneNode(true)); /*輪播圖片的寬度以及高度*/ this.liHeight = option.height; this.liWidth = option.width; this.speed = option.speed; this.currentClassname = option.currentClassname; this.currentspecial = option.currentspecial || option.currentClassname; }, reset:function () { var that = this; this.index = 0; this.square = 0; clearInterval(that.timer) }, beforePlay: function () { var that = this; var str = '' /*初始化樣式*/ this.setStyle(that.parent, {'width': Number(that.listLength+1) * parseInt(that.liWidth) + 'px'}); for (var i = 0; i < that.listArray.length; i++) { that.setStyle(that.listArray[i], {'width': that.liWidth, 'height': that.liHeight}); } for (var i = 0; i < that.listArray.length-1; i++) { str += '<span></span>' } /*綁定span的內容*/ that.control.innerHTML = str; /*初始化span的樣式*/ that.addClassMany(that.control.children[0],[that.currentClassname]); }, play: function () { var that = this; var len = this.control.children for(var i = 0; i < len.length; i ++) { len[i].index = i; // 獲得當前第幾個小li 的索引號 len[i].onclick = function() { // console.log(this.index) // console.log(that.square) for(var j=0;j<len.length;j++) { len[j].className = ""; // 所有的都要清空 } this.className = that.currentClassname; that.animateM(that.parent,-this.index* parseInt(that.liWidth)) that.index = that.square = this.index } } that.index ++; if(that.index > (that.listLength)) { that.parent.style.left = 0 that.index = 1; } that.animateM(that.parent,-that.index* parseInt(that.liWidth)); that.square++; if(that.square > that.listLength -1) { that.square = 0; } for(var i=0;i<that.control.children.length;i++) // 先清除所有的 { that.control.children[i].className = "" } /*給當前的控制器span添加class*/ that.addClassMany(that.control.children[that.square], [that.currentClassname]) }, autoPlay:function () { var that = this; clearInterval(timer) var timer = null; that.beforePlay(); timer = setInterval(function () { that.play() },that.speed) }, animateM: function (obj, target) { clearInterval(obj.timer); obj.timer = setInterval(function () { var step = (target - obj.offsetLeft) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); obj.style.left = obj.offsetLeft + step + "px"; if (obj.offsetLeft == target) { clearInterval(obj.timer); } }, 10) }, /*獲取屬性函數*/ getStyle: function (obj, attr) { // 誰的 那個屬性 obj.currentStyle = ''; if (obj.currentStyle) // ie 等 { return obj.currentStyle[attr]; // 返回傳遞過來的某個屬性 } else { return window.getComputedStyle(obj, null)[attr]; // w3c 瀏覽器 } }, /*設置屬性*/ /*des:josn的key和value必須是字符串*/ setStyle: function (dom, josn) { for (var key in josn) { var styleK = key; var styleV = josn[key]; if (dom.length) { for (var i = 0, len = dom.length; i < len; i++) { dom[i].style[styleK] = styleV; } return; } dom.style[styleK] = styleV; } return }, /* *添加多個類名 *element： 元素 *classnameArr：類名的數組 */ addClassMany: function (element, classnameArr) { var classNameArr = (element.className).split(' ') || []; var newClassNameStr = ''; if (arguments.length != 2 && !(classnameArr instanceof Array)) { throw new Error("參數形式個數不正確"); } if (classNameArr == null) { var newClassName = classnameArr; } else { for (var i in classnameArr) { classNameArr.push(classnameArr[i]); } newClassNameStr = classNameArr.join(' '); } element.className = newClassNameStr; return; } } ```