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影像变化，并返回左

回答

相关问题