bug輪播圖,請教高手(面向對象版)

08-15

bug輪播圖,請教高手(面向對象版)

來自專欄 web前端開發2 人贊了文章

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="../../css/reset.css"/> <style> *{ margin: 0; padding: 0; } .container{ width: 1380px; height: 350px; overflow: hidden; position: relative; margin: 0 auto; } ul{ width:6900px; height: 350px; position: absolute; left: 0; top: 0; } ul li{ width: 1380px; height: 350px; float: left; } #left{ position: absolute;left: 0;top: 100px;width: 80px;height: 40px; font-size: 25px;font-weight: 900;background:rgba(0 , 0 , 0 ,0.2); color: red;border: none;cursor: pointer; } #right{ position: absolute;right: 0;top: 100px;width: 80px;height: 40px; font-size: 25px;font-weight: 900;background:rgba(0 , 0 , 0 ,0.2); color: red;border: none;cursor: pointer; } .container #oli{ position: absolute; left: 300px;top: 300px; } .container #oli li{ width: 30px;height: 30px;background: pink; margin: 0 10px; float: left;cursor: pointer; } .container #oli .color{ background: deeppink; } </style></head><body> <div class="container" id="bigBox"> <ul id="list"> <li><img src="http://img.zcool.cn/community/0147fa59ad2228a801211d25cb66d0.jpg@1380w" alt=""></li> <li><img src="http://img.zcool.cn/community/01756e59ae0ac1a8012028a9558868.jpg@1380w" alt=""></li> <li><img src="http://img.zcool.cn/community/01724359ae0ad3a801211d25ef5d75.jpg@1380w" alt=""></li> <li><img src="http://img.zcool.cn/community/0179e859ae0b13a8012028a9b92303.jpg@1380w" alt=""></li> <li><img src="http://img.zcool.cn/community/018b1459ae17a7a801211d2517bd5b.jpg@1380w" alt=""></li> </ul> <ol id="oli"> <li class="color" ></li> <li></li> <li></li> <li></li> <li></li> </ol> </div> <button id="left">left</button> <button id="right">right</button></body></html><script src="函數工具.js"></script><script> window.onload = function(){ new LunBoTu() } function LunBoTu(){ this.leftBtn = $("left") ; this.rightBtn = $("right") ; this.ul = $("list") this.img = $("list").children this.index = 0 ; this.time = null ; this.oli = $("oli").children this.bigBox = $("bigBox") this.init() ; } LunBoTu.prototype.init = function(){ this.DianJiLeft() this.DianJiRight() this.setInterval() this.Stop() this.Auto() this.DianJiXiaoBiao() } LunBoTu.prototype.DianJiLeft = function(){ var _this = this this.leftBtn.onclick = function(){ _this.indexChange(this.innerHTML) _this.XiaoBiao() } } LunBoTu.prototype.DianJiRight = function(){ var _this = this this.rightBtn.onclick = function(){ _this.indexChange(this.innerHTML) _this.XiaoBiao() } } LunBoTu.prototype.XiaoBiao = function(){ for(var i = 0 ; i < 5 ;i++){ this.oli[i].className = "" } this.oli[this.index ].className = "color" } LunBoTu.prototype.DianJiXiaoBiao = function(){ var _this = this for(var i = 0 ;i < 5; i++){ this.oli[i].index = i this.oli[i].onclick = function(){ for(var i = 0 ; i < 5 ;i++){ _this.oli[i].className = "" } _this.oli[this.index].className = "color" animation(_this.ul ,{ left:-1380 * this.index }) } } } LunBoTu.prototype.indexChange = function(obj){ if(obj == "left"){ this.index-- if(this.index == -1){ this.index = this.img.length - 1 } this.animation() } if(obj == "right"){ this.index++ if(this.index == this.img.length){ this.index = 0 } this.animation() } } LunBoTu.prototype.animation = function(){ animation(this.ul,{ left : -1380 * this.index }) } LunBoTu.prototype.setInterval = function(){ var _this = this this.time = setInterval(function(){ _this.indexChange("right") _this.XiaoBiao() } , 3000) } LunBoTu.prototype.Stop = function(){ this.ul.onmouseenter = function(){ clearInterval(this.time) }.bind(this) this.leftBtn.onmouseenter = function(){ clearInterval(this.time) }.bind(this) this.rightBtn.onmouseenter = function(){ clearInterval(this.time) }.bind(this) } LunBoTu.prototype.Auto = function(){ this.ul.onmouseleave = function(){ this.setInterval() }.bind(this) }</script>

外部調用JS文件:

// 通過id獲取元素節點function $(ele){ var x = document.getElementById(ele) return x ;}// 動畫function getStyle(el , property){ if(getComputedStyle){ return getComputedStyle(el)[property] ; }else{ return el.currentStyle[property] ; }}function animation(el , properties , callback){ clearInterval(el.time) el.time = setInterval(function(){ for(var property in properties){ var current ; var target = properties[property] if(property === "opacity"){ current = Math.round(parseFloat(getStyle(el, opacity)) * 100) }else{ current = parseInt(getStyle(el , property)) } var speed = (target - current) / 20 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed) if(current == target){ clearInterval(el.time) if(callback){ callback() // 回調函數執行 } }else{ if(property === "opacity"){ el.style.opacity = (current + speed) / 100 }else{ el.style[property] = current + speed + "px" } } } } , 20)}

備註:html文件與js文件在同一級;bug是點擊輪播圖的下面的小方塊與輪播圖其他播放方式衝突!