8影像變化，並返回左

時默認我在我的頁面中的8種圖片元素 -8影像變化，並返回左

<a href = "#"><img onmouseover="mousehover(this)" onmouseout="defaultImg(this)" src = "images/1_1.jpg" height="96" width="156" style="margin-right:12px;"/></a> 
<a href = "#"><img onmouseover="mousehover(this)" onmouseout="defaultImg(this)" src = "images/2_1.jpg" height="96" width="156" style="margin-right:12px;"/></a>

懸停它應該改變從1_1到1_2至1_8，然後再次1_1。在鼠標移出時，它應該顯示默認圖片，即1_1。像這樣我有2_1,3_1到8_1。

爲mousehover的JavaScript函數就是 -

function mousehover(x){ 
     for(var i=2; i<9; i++){ 
      x.src = x.src.replace('images/rotator/1_' + i + '.jpg'); 
     } 

    } 

    function defaultImg(x){ 
     x.src = x.src.replace("images/rotator/1_1.jpg"); 
    }

不知怎的，這款鼠標懸停FUNC不起作用。而我如何獲得鼠標所有圖像的defaultImg。我被困在這裏。有任何想法嗎？

來源

2014-02-07 Dan

丹你應該張貼小提琴 – Zword

當前是什麼行爲？ – ltalhouarne

犯規切換和鼠標移出顯示無圖 – Dan

您可以通過第一個號碼作爲函數調用的參數。

<a href = "#"><img onmouseover="mousehover(this, 1)" onmouseout="defaultImg(this, 1)" src = "images/1_1.jpg" height="96" width="156" style="margin-right:12px;"/></a> 
<a href = "#"><img onmouseover="mousehover(this, 2)" onmouseout="defaultImg(this, 2)" src = "images/2_1.jpg" height="96" width="156" style="margin-right:12px;"/></a>

和JavaScript將是：

var interval; 

function mousehover(x, y) { 
    var i = 1; 
    interval = setInterval(function() { 
    i++; 
    if (i > 8) { 
     clearInterval(interval); 
     i = 1; 
    } 
    x.src = 'images/rotator/' + y + '_' + i + '.jpg'; 
    }, 500); 

} 

function defaultImg(x, y) { 
    clearInterval(interval); 
    x.src = 'images/rotator/' + y + '_1.jpg'; 
}

更高的性能，我想所有的圖像合併成一個大的精靈，並與背景位置發揮每次加載一個新的形象來代替。

來源

2014-02-07 14:11:11 Skwal

@丹它現在應該適用於所有8張圖片 – Skwal

東西在這幾行應該工作：

var element = document.querySelector("#switch"); 

element.addEventListener('mouseover', function() { 
    this.src = "http://placehold.it/400x300"; 
}); 

element.addEventListener('mouseout', function() { 
    this.src = "http://placehold.it/200x300"; 
});

Fiddle

來源

2014-02-07 14:04:14 Dieterg

功能但是，這只是一個IMG。我必須在同一個地方顯示8張不同的照片。 – Dan

嘗試following.Should工作：

var timer; 
var i=2; 
function mousehover(x){ 
    x.src = 'images/rotator/1_' + i + '.jpg'; 
    i++; 
    timer = setTimeout(function(){mousehover(x)},2000); 
} 

function defaultImg(x){ 
    i=2; 
    clearTimeout(timer); 
    x.src = "images/rotator/1_1.jpg"; 
}

來源

2014-02-07 14:12:21 Zword

作品，但不適用於不同的圖像。例如，我有8個圖像，命名爲 - 1_1,1_2,1_3 ---- 2_1,2_2,2_3 ---- 3_1,3_2,3_3等。 – Dan

我怎麼能存儲原始圖像的名稱，以便一旦我鼠標然後我可以把這個名字？例如在你的解決方案中，如果我在圖像2_1上，那麼在鼠標上它應該是2_1 – Dan

你需要的東西是這樣的：

//TIP: Insert listeners with javascript, NOT html 

x.addEventListener('mouseover', function() { 

    var count = 1, 
     that = this, 
     timer; 

    timer = setInterval(function() { 

     if (count < 8) { 
      count++; 
     } else { 
      count = 1; 
     } 

     that.src = 'images/rotator/1_' + count + '.jpg'; 
    }, 500); 

    function onMouseOut() { 
     that.src = 'images/rotator/1_1.jpg'; 
     that.removeEventListener('mouseout', onMouseOut) 
    } 

    this.addEventListener('mouseout', onMouseOut); 
});

來源

2014-02-07 14:12:52 micnic

8影像變化，並返回左

回答

相關問題