為什么沒有反應(yīng)呀?
我的有三張圖,每張圖867像素,我的js代碼是哪里寫錯了嗎??
window.onload = function () {
? ?var box = document.getElementById("box2");
? ?var pic = document.getElementById('lunbo')
? ?var botton = document.getElementsByClassName('bottons')
? ?var prev = document.getElementById('prev')
? ?var next = document.getElementById('next')
? ?var sque = document.getElementsByClassName('on')
? ?var index = 1;
? ?var animated = false;
? ?var timer;
? ?function show() {
? ? ? ?for (var i = 0; i < botton.lenth; i++) {
? ? ? ? ? ?if (botton[i].className == 'onshow') {
? ? ? ? ? ? ? ?botton[i].className = 'on';
? ? ? ? ? ? ? ?break;
? ? ? ? ? ?}
? ? ? ?}
? ? ? ?/*botton[index - 1].className = 'onshow';*/
? ?}
? ?function animate(offset) {
? ? ? ?animated = true;
? ? ? ?var newLeft = parseInt(pic.style.left) + offset + 'px';
? ? ? ?var time = 1000;//時間
? ? ? ?var inter = 10;//間隔
? ? ? ?var speed = offset / (time / inter);
? ? ? ?//平緩移動
? ? ? ?function go() {
? ? ? ? ? ?if ((speed < 0 && parseInt(pic.style.left) > newLeft) || (speed > 0 && parseInt(pic.style.left < newLeft))) {
? ? ? ? ? ? ? ?pic.style.left = parseInt(pic.style.left) + speed + 'px';
? ? ? ? ? ? ? ?setTimeout(go, inter);
? ? ? ? ? ?}
? ? ? ? ? ?else {
? ? ? ? ? ? ? ?animated = false;
? ? ? ? ? ? ? ?pic.style.left = newLeft + 'px';
? ? ? ? ? ? ? ?if (newLeft > -867) {
? ? ? ? ? ? ? ? ? ?pic.style.left = -1734 + 'px';
? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ?if (newLeft < -1734) {
? ? ? ? ? ? ? ? ? ?pic.style.left = -867 + 'px';
? ? ? ? ? ? ? ?}
? ? ? ? ? ?}
? ? ? ?}
? ? ? ?pic.style.left = newLeft + 'px';
? ? ? ?if (pic.style.left > -867) {
? ? ? ? ? ?pic.style.left = -1734 + 'px';
? ? ? ?}
? ? ? ?if (newLeft < -1734) {
? ? ? ? ? ?pic.style.left = -867 + 'px';
? ? ? ?}
? ?}
? ?function play() {
? ? ? ?timer = setInterval(function () {
? ? ? ? ? ?next.onclick();
? ? ? ?}, 3000);
? ?}
? ?next.onclick = function () {
? ? ? ?if (index == 3) {
? ? ? ? ? ?index = 1;
? ? ? ?}
? ? ? ?else {
? ? ? ? ? ?index += 1;
? ? ? ?}
? ? ? ?show();
? ? ? ?if (animated == false) {
? ? ? ? ? ?animate(-867);
? ? ? ?}
? ?}
? ?prev.onclick = function () {
? ? ? ?if (index == 1) {
? ? ? ? ? ?index = 3;
? ? ? ?}
? ? ? ?else {
? ? ? ? ? ?index -= 1;
? ? ? ?}
? ? ? ?show();
? ? ? ?if (animated == false) {
? ? ? ? ? ?animate(867);
? ? ? ?}
? ?}
? ?for (var i = 0; i < botton.length; i++) {
? ? ? ?botton[i].onclick = function () {
? ? ? ? ? ?if (this.className == 'onshow') {
? ? ? ? ? ? ? ?return;
? ? ? ? ? ?}
? ? ? ? ? ?var myindex = parseInt(this.getAttribute('index'));
? ? ? ? ? ?var offset = -867 * (myindex - index);
? ? ? ? ? ?index = myindex;
? ? ? ? ? ?show();
? ? ? ? ? ?if (animated == false) {
? ? ? ? ? ? ? ?animated(offset);
? ? ? ? ? ?}
? ? ? ?}
? ?}
? ?box.onmouseover = play;
}
2016-03-27
var newLeft = parseInt(pic.style.left) + offset + 'px'; ?把px去了下面才能比較大小