jquery - 在图像 slider 中鼠标悬停时更改图像

Question

我正在创建一个模块 Demo类似的东西。我已经很好地创建了图像 slider ，但无法在鼠标悬停时更改图像。

您可以查看 fiddle还有。

// You can also use "$(window).load(function() {"
$(function() {

  // Slideshow 4
  $("#slider4").responsiveSlides({
    auto: false,
    pager: false,
    nav: true,
    speed: 500,
    namespace: "callbacks",
    before: function() {
      $('.events').append("<li>before event fired.</li>");
    },
    after: function() {
      $('.events').append("<li>after event fired.</li>");
    }
  });

});

.rslides {


  margin: 0 auto 40px;


}


#slider2,


#slider3 {


  box-shadow: none;


  -moz-box-shadow: none;


  -webkit-box-shadow: none;


  margin: 0 auto;


}


.rslides_tabs {


  list-style: none;


  padding: 0;


  background: rgba(0, 0, 0, .25);


  box-shadow: 0 0 1px rgba(255, 255, 255, .3), inset 0 0 5px rgba(0, 0, 0, 1.0);


  -moz-box-shadow: 0 0 1px rgba(255, 255, 255, .3), inset 0 0 5px rgba(0, 0, 0, 1.0);


  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .3), inset 0 0 5px rgba(0, 0, 0, 1.0);


  font-size: 18px;


  list-style: none;


  margin: 0 auto 50px;


  max-width: 540px;


  padding: 10px 0;


  text-align: center;


  width: 100%;


}


.rslides_tabs li {


  display: inline;


  float: none;


  margin-right: 1px;


}


.rslides_tabs a {


  width: auto;


  line-height: 20px;


  padding: 9px 20px;


  height: auto;


  background: transparent;


  display: inline;


}


.rslides_tabs li:first-child {


  margin-left: 0;


}


.rslides_tabs .rslides_here a {


  background: rgba(255, 255, 255, .1);


  color: #fff;


  font-weight: bold;


}


a {


  color: #fff;


  text-decoration: none;


}


#download {


  background: #333;


  background: rgba(255, 255, 255, .1);


  border: 1px solid rgba(255, 255, 255, .1);


  border-radius: 5px;


  -moz-border-radius: 5px;


  -webkit-border-radius: 5px;


  display: block;


  font-size: 20px;


  font-weight: bold;


  margin: 60px auto;


  max-width: 500px;


  padding: 20px;


}


#download:hover {


  background: rgba(255, 255, 255, .15);


}


.footer {


  font-size: 11px;


}


/* Callback example */


h3 {


  font: 20px/30px"Helvetica Neue", Helvetica, Arial, sans-serif;


  text-align: center;


  color: #fff;


}


.events {


  list-style: none;


}


.callbacks_container {


  margin-bottom: 50px;


  position: relative;


  float: left;


  width: 100%;


}


.callbacks {


  position: relative;


  list-style: none;


  overflow: hidden;


  width: 100%;


  padding: 0;


  margin: 0;


}


.callbacks ul {


  text-align: center;


  margin-left: auto;


  margin-right: auto


}


.callbacks li {


  position: absolute;


  width: 100%;


  left: 0;


  top: 0;


  display: inline-block;


  

}


.callbacks img {  


  display: block;


  position: relative;


  z-index: 1;


  height: auto;


  border: 0;
  width:100%;


}


.callbacks .caption {


  display: block;


  position: absolute;


  z-index: 2;


  font-size: 20px;


  text-shadow: none;


  color: #fff;


  background: #000;


  background: rgba(0, 0, 0, .8);


  left: 0;


  right: 0;


  bottom: 0;


  padding: 10px 20px;


  margin: 0;


  max-width: none;


}


.callbacks_nav {


  position: absolute;


  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);


  top: 52%;


  left: 0;


  opacity: 0.7;


  z-index: 3;


  text-indent: -9999px;


  overflow: hidden;


  text-decoration: none;


  height: 61px;


  width: 38px;


  background: transparent url("https://github.com/viljamis/ResponsiveSlides.js/blob/master/demo/themes/themes.gif") no-repeat left top;


  margin-top: -45px;


}


.callbacks_nav:active {


  opacity: 1.0;


}


.callbacks_nav.next {


  left: auto;


  background-position: right top;


  right: 0;


}


@media screen and (max-width: 600px) {


  h1 {


    font: 24px/50px"Helvetica Neue", Helvetica, Arial, sans-serif;


  }


  .callbacks_nav {


    top: 47%;


  }


}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://responsiveslides.com/responsiveslides.min.js"></script>

<div class="callbacks_container">
  <ul class="rslides" id="slider4">
    <li>
      <img src="http://responsiveslides.com/1.jpg" alt="">

    </li>
    <li>
      <img src="http://responsiveslides.com/2.jpg" alt="">

    </li>
    <li>
      <img src="http://responsiveslides.com/3.jpg" alt="">

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

每个图像都有 2 个部分。第一个是之前，第二个是之后。我唯一无法创建的是在鼠标悬停时更改第二个图像。或者建议任何其他方法来实现这一点。

请帮我创建这个。

Answer 1

如果您检查演示站点的源代码，您会发现 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",....], 
            };

并且在 Gallery.js逻辑存在于它从 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 创建 li 而不是 div。

Demo Fiddle