Изменить изображение при наведении курсора на слайдер изображения

Question

Изменить изображение при наведении курсора на слайдер изображения

0

Я создаю модуль Demo что-то вроде этого. Я очень хорошо создал слайдер изображения, но не смог изменить изображение на мыши.

вы также можете проверить скрипку.

// 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 части. Первый - это прежде, а второй - после. Единственное, что я не могу создать, - это изменение второго изображения на mousehover. Или предложите любой другой способ добиться этого.

пожалуйста, помогите мне создать это.

Gitz 17 дек. 2014, в 07:29

Источник

0

так вам нужно поменять изображение при наведении?
Sajad Karuthedath 17 дек. 2014, в 05:39
0

@SajadKaruthedath да, дорогой
Gitz 17 дек. 2014, в 05:40
0

ты можешь сделать скрипку ??
Sajad Karuthedath 17 дек. 2014, в 05:48
0

@SajadKaruthedath Я пытался, но не смог создать скрипку Пока я делал то же самое, что использовал для создания фрагмента.
Gitz 17 дек. 2014, в 05:51
0

хорошо .. тогда подожди. !!
Sajad Karuthedath 17 дек. 2014, в 05:52
0

@SajadKaruthedath хорошо, я жду вашего ценного ответа.
Gitz 17 дек. 2014, в 05:56
0

это скрипка, которую я сделал jsfiddle.net/st1wodzq
Sajad Karuthedath 17 дек. 2014, в 06:04
0

@SajadKaruthedath, но при наведении изображение не меняется
Gitz 17 дек. 2014, в 06:08
0

я только что решил твой вопрос
Sajad Karuthedath 17 дек. 2014, в 06:09
0

@SajadKaruthedath ооо ооо понял
Gitz 17 дек. 2014, в 06:09
0

я добавил ответ .. за которым вы можете следить
Sajad Karuthedath 17 дек. 2014, в 06:18
0

Давайте продолжим эту дискуссию в чате .
Sajad Karuthedath 17 дек. 2014, в 06:19

Показать ещё 10 комментариев

Теги:

jquery

css

html5

3 ответа

Ещё вопросы

так вам нужно поменять изображение при наведении?
@SajadKaruthedath Я пытался, но не смог создать скрипку Пока я делал то же самое, что использовал для создания фрагмента.
@SajadKaruthedath хорошо, я жду вашего ценного ответа.
это скрипка, которую я сделал jsfiddle.net/st1wodzq
@SajadKaruthedath, но при наведении изображение не меняется
я добавил ответ .. за которым вы можете следить
Давайте продолжим эту дискуссию в чате .

anpsmn · Answer 1 · 2014-12-17T03-35-00.000Z

Если вы проверите источник демонстрационного сайта, вы найдете 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 присутствует логика, где она извлекает srcs из SEOGallery и переключается на 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')) + '"]'));
    });

Обновить:

Я использовал тот же код там и изменил несколько вещей, как создание li, чем div для ul.rslides.

Демо-скрипт

пожалуйста, предоставьте демо .. !! LFC вентилятор здесь тоже! YNWA
@SajadKaruthedath добавил скрипку ... хе-хе ... YNWA :)
@anpsmn Я прикрепил его к своему коду и работает нормально. но проблема выравнивания с кнопками навигации следующая и предыдущая. Как я могу использовать изображение вместо ссылки следующего и предыдущего.
@ Gitz Добавьте rslides css. Это будет правильно оформлять навигацию.

Sajad Karuthedath · Answer 2 · 2014-12-17T04-57-00.000Z

вы можете использовать сценарий ниже, если у вас есть точно такое же имя с изображениями до и после, затем используйте

$(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" );

    });

});

Rajeev Mehta · Answer 3 · 2014-12-18T10-01-00.000Z

Вы можете просто использовать 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>

Это слишком коротко: О. Это то, что я ищу :)