Jquery 在图像滑块中更改鼠标上的图像

我正在创建一个类似这样的模块。我已经很好地创建了图像滑块，但无法在鼠标上方更改图像

你也可以检查一下

//您还可以使用“$（窗口）.load（函数（）{”
$（函数（）{
//幻灯片4
$（“#幻灯片4”）。响应幻灯片({
汽车：错，
传呼机：错，
导航：是的，
速度:500,，
名称空间：“回调”，
before:function（）{
$（'.events'）。追加（
在事件激发之前。
）；
},
之后：函数（）{
$（'.events'）。在激发事件后追加（
。
）；
}
});
})；

.rslides{
保证金：0自动40px；
}
#幻灯片2，
#滑块3{
盒影：无；
-莫兹盒阴影：无；
-webkit盒阴影：无；
保证金：0自动；
}
.rslides_标签{
列表样式：无；
填充：0；
背景：rgba（0,0,0,25）；
框阴影：0 0 1px rgba（255，255，255，.3），插入0 0 5px rgba（0，0，0，1.0）；
-moz盒阴影：0 0 1px rgba（255，255，255，.3），插入0 0 5px rgba（0，0，0，1.0）；
-webkit盒阴影：0 0 1px rgba（255，255，255，.3），插入0 0 5px rgba（0，0，0，1.0）；
字号：18px；
列表样式：无；
保证金：0自动50px；
最大宽度：540像素；
填充：10px0；
文本对齐：居中；
宽度：100%；
}
.rslides_tabs li{
显示：内联；
浮动：无；
右边距：1px；
}
.rslides_tabs a{
宽度：自动；
线高：20px；
填充：9px 20px；
高度：自动；
背景：透明；
显示：内联；
}
.rslides_tabs li：第一个孩子{
左边距：0；
}
.rslides_选项卡。rslides_此处a{
背景：rgba（255,255,255,1）；
颜色：#fff；
字体大小：粗体；
}
a{
颜色：#fff；
文字装饰：无；
}
#下载{
背景：#333；
背景：rgba（255,255,255,1）；
边框：1px实心rgba（255、255、255、.1）；
边界半径：5px；
-moz边界半径：5px；
-webkit边界半径：5px；
显示：块；
字体大小：20px；
字体大小：粗体；
保证金：60像素自动；
最大宽度：500px；
填充：20px；
}
#下载：悬停{
背景：rgba（255,255,255,15）；
}
.页脚{
字体大小：11px；
}
/*回调示例*/
h3{
字体：20px/30px“Helvetica Neue”，Helvetica，Arial，无衬线；
文本对齐：居中；
颜色：#fff；
}
.事件{
列表样式：无；
}
.callbacks\u容器{
边缘底部：50px；
位置：相对位置；
浮动：左；
宽度：100%；
}
.回拨{
位置：相对位置；
列表样式：无；
溢出：隐藏；
宽度：100%；
填充：0；
保证金：0；
}
.回调{
文本对齐：居中；
左边距：自动；
右边距：自动
}
.回拨李先生{
位置：绝对位置；
宽度：100%；
左：0；
排名：0；
显示：内联块；
}
.callbacks img{
显示：块；
位置：相对位置；
z指数：1；
高度：自动；
边界：0；
宽度：100%；
}
.callbacks.caption{
显示：块；
位置：绝对位置；
z指数：2；
字体大小：20px；
文本阴影：无；
颜色：#fff；
背景：#000；
背景：rgba（0,0,0,8）；
左：0；
右：0；
底部：0；
填充：10px 20px；
保证金：0；
最大宽度：无；
}
.callbacks\u nav{
位置：绝对位置；
-webkit点击高亮显示颜色：rgba（0,0,0,0）；
最高：52%；
左：0；
不透明度：0.7；
z指数：3；
文本缩进：-9999px；
溢出：隐藏；
文字装饰：无；
高度：61px；
宽度：38px；
背景：透明url（“https://github.com/viljamis/ResponsiveSlides.js/blob/master/demo/themes/themes.gif）无重复左上；
边缘顶部：-45px；
}
.callbacks\u nav：活动{
不透明度：1.0；
}
.callbacks\u nav.next{
左：自动；
背景位置：右上角；
右：0；
}
@媒体屏幕和屏幕（最大宽度：600px）{
h1{
字体：24px/50px“Helvetica Neue”，Helvetica，Arial，无衬线；
}
.callbacks\u nav{
最高：47%；
}
}

如果您查看演示站点的源代码，您会发现SEOGallery包含正常和悬停状态的URL

 var SEOGallery = {
                fullSrcs : ["http:\/\/www.sharkpixel.com\/wp-content\/uploads\/Beauty_Retouch_40.jpg",...], 
                srcs : ["http:\/\/www.sharkpixel.com\/wp-content\/uploads\/Beauty_Retouch_40-1066x700.jpg",....], 
            };

在逻辑中，它从SEOGallery获取src，并切换mouseneter和mouseleave。变量imgPars等在顶部定义

imgPars.on('mouseenter', '.after', function() {
        var img = $(this);
        img.replaceWith(hoverImgs.filter('[src="' + 
            hoverSrc(img.attr('src')) + '"]'));
    });

    imgPars.on('mouseleave', '.before', function() {
        var img = $(this);
        img.replaceWith(imgs.filter('[src="' + 
            origSrc(img.attr('src')) + '"]'));
    });

更新：

我在那里使用了相同的代码，并且除了为

ul.rslides

创建一个div之外，我几乎没有做任何更改，比如创建li

---

如果您查看演示站点的源代码，您会发现SEOGallery包含正常和悬停状态的URL

 var SEOGallery = {
                fullSrcs : ["http:\/\/www.sharkpixel.com\/wp-content\/uploads\/Beauty_Retouch_40.jpg",...], 
                srcs : ["http:\/\/www.sharkpixel.com\/wp-content\/uploads\/Beauty_Retouch_40-1066x700.jpg",....], 
            };

在逻辑中，它从SEOGallery获取src，并切换mouseneter和mouseleave。变量imgPars等在顶部定义

imgPars.on('mouseenter', '.after', function() {
        var img = $(this);
        img.replaceWith(hoverImgs.filter('[src="' + 
            hoverSrc(img.attr('src')) + '"]'));
    });

    imgPars.on('mouseleave', '.before', function() {
        var img = $(this);
        img.replaceWith(imgs.filter('[src="' + 
            origSrc(img.attr('src')) + '"]'));
    });

更新：

我在那里使用了相同的代码，并且除了为

ul.rslides

创建一个div之外，我几乎没有做任何更改，比如创建li

---

如果您与前后图像的名称完全相同，则可以使用下面的脚本，然后使用

$(function() {

  // Slideshow 4
  $(".rslides").responsiveSlides({
    auto: false,
    pager: false,
    nav: true,
    speed: 500,
    namespace: "callbacks",
    before: function() {
      alert('before');

    },
    after: function() {
      alert('after');
    }
  });

 //added this snippet
    $( "img" ).hover(function(){
     alert('img');
        $(this).attr( "src", "img-after" );

    });

});

---

如果前后图像的名称完全相同，则可以使用下面的脚本，然后使用

$(function() {

  // Slideshow 4
  $(".rslides").responsiveSlides({
    auto: false,
    pager: false,
    nav: true,
    speed: 500,
    namespace: "callbacks",
    before: function() {
      alert('before');

    },
    after: function() {
      alert('after');
    }
  });

 //added this snippet
    $( "img" ).hover(function(){
     alert('img');
        $(this).attr( "src", "img-after" );

    });

});

---

您只需在图像上使用

onmouseover

和

onmouseout

 <div class="callbacks_container">
  <ul class="rslides" id="slider4">
    <li>
      <img src="http://responsiveslides.com/1.jpg" onmouseover="this.src = 'http://responsiveslides.com/1-after.jpg';" onmouseout="this.src = 'http://responsiveslides.com/1.jpg';" alt="">

    </li>
    <li>
       <img src="http://responsiveslides.com/2.jpg" onmouseover="this.src = 'http://responsiveslides.com/2-after.jpg';" onmouseout="this.src = 'http://responsiveslides.com/2.jpg';" alt="">

    </li>
    <li>
      <img src="http://responsiveslides.com/3.jpg" onmouseover="this.src = 'http://responsiveslides.com/3-after.jpg';" onmouseout="this.src = 'http://responsiveslides.com/3.jpg';" alt="">

    </li>
  </ul>
</div>

您只需在图像上使用

onmouseover

和

onmouseout

 <div class="callbacks_container">
  <ul class="rslides" id="slider4">
    <li>
      <img src="http://responsiveslides.com/1.jpg" onmouseover="this.src = 'http://responsiveslides.com/1-after.jpg';" onmouseout="this.src = 'http://responsiveslides.com/1.jpg';" alt="">

    </li>
    <li>
       <img src="http://responsiveslides.com/2.jpg" onmouseover="this.src = 'http://responsiveslides.com/2-after.jpg';" onmouseout="this.src = 'http://responsiveslides.com/2.jpg';" alt="">

    </li>
    <li>
      <img src="http://responsiveslides.com/3.jpg" onmouseover="this.src = 'http://responsiveslides.com/3-after.jpg';" onmouseout="this.src = 'http://responsiveslides.com/3.jpg';" alt="">

    </li>
  </ul>
</div>

那么你需要更改悬停时的图像吗？@sajadkaruthedah是的，亲爱的，你能做一把小提琴吗？？？@sajadkaruthedah我尝试过，但无法创建小提琴，而我正在做与创建snippit相同的事情。@sajadkaruthedah好的，我正在等待你有价值的回应。那么你需要更改悬停时的图像吗？@sajadkaruthedah是的亲爱的，你能做一把小提琴吗？？？@SajadKaruthedath我已经试过了，但无法做小提琴，而我正在做的事情和我以前做的一样。@SajadKaruthedath好的，我正在等待