Переключатель изображения слайдера диапазона с переходами - PullRequest
Новая
       26

Переключатель изображения слайдера диапазона с переходами

0 голосов
/ 06 октября 2018

У меня есть этот ценовой слайдер:

https://codepen.io/anterias/pen/gBwxrL

Каждый шаг на слайдере, изображение справа будет меняться.Можно ли придать некоторую плавность или переход к изменению изображения.

Я пытался добавлять разные классы к каждому шагу изображения, но у меня ничего не получалось.Есть ли другие возможности?

Спасибо за помощь!

Оригинальный код отсюда: Ползунок Jquery Range с переключением изображений 

var imageUrl = new Array();

imageUrl[1000] = 'https://docs.google.com/uc?id=1DdRns3dCsrWeWmgg-qBR-HCdUWskUzuz';
imageUrl[1500] = 'https://docs.google.com/uc?id=1SM5lY2dOHPWBSEWW_wjVnJa4TEbXTHeM';
imageUrl[2000] = 'https://docs.google.com/uc?id=1L0wW0z05rAve6lJDAk7bFkftlwUTEcgW';
imageUrl[2500] = 'https://docs.google.com/uc?id=1wlD0jquk-fFozq3EjUcgMkmAbt6TDJCf';
imageUrl[3000] = 'https://docs.google.com/uc?id=1sYJhZk43vM_V2X8hit7BVnQQ7eqP6nsk';
imageUrl[3500] = 'https://docs.google.com/uc?id=1Y4ns2eU4ofW-5xA9QP-TxTxlWQ2gPqZL';
imageUrl[4000] = 'https://docs.google.com/uc?id=1mHgMSqzeiMfUc_IDtXA9VkfxvExzltSV';
imageUrl[4500] = 'https://docs.google.com/uc?id=1lRNvcd8BdmsuriyDfoBDt2VnuIy9izSx';
imageUrl[5000] = 'https://docs.google.com/uc?id=1gwQVUVuNSKo3PqrJmtBxBsqC02Df29zw';
imageUrl[5500] = 'https://docs.google.com/uc?id=1pMvUCR9inb3aiAVWG4-blNuL41y9CZQV';
imageUrl[6000] = 'https://docs.google.com/uc?id=1PdChm6wtInsUtWDZt6Z5yz_HKDrbBxW3';
imageUrl[6500] = 'https://docs.google.com/uc?id=15nvfk5pXpThMAUiactpgv14Jg5Sbl6GJ';
imageUrl[7000] = 'https://docs.google.com/uc?id=1NbASgHWGrx-69K0CQ0qhnqx_ge4IHPX3';
imageUrl[7500] = 'https://docs.google.com/uc?id=1gc_HYWJe9JzCKC8jLavSAM8AGndCW1T1';
imageUrl[8000] = 'https://docs.google.com/uc?id=1TE5fSnWLFTkUaKlVGf0vom1HQPuvb0Wg';
       
$(document).on('input change', '#slider', function() {//listen to slider changes
    var v=$(this).val();//getting slider val
   $('#sliderStatus').html( $(this).val() );
  $("#img").prop("src", imageUrl[v]);
}); 
body {
	background:#f3f3f3;
	padding:20px;
  font-family:titillium web
}

h2 {
  font-size:35px;
}

h3 {
  font-size:25px;
}

img {
	max-height:280px;
	width:auto;
	margin-top:0px;
}

.left,
right{
  float:left;
  width:50%;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 25px;
    background: #d3d3d3;
    outline: none;
		border-radius:50px;
	margin:20px auto 20px;
	max-width:600px;

}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 50px;
    height: 50px;
    background: #3FA3E9;
    cursor: pointer;
		border-radius:50px;
	  border:none!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  
<div class="left">

<div class="left-section-first">
<h2>How much it will cost?</h2>
<input type="range" id="slider" min="1000" max="8000" step="500" value="0" class="slider"/>
</div>

<div class="left-section-second">
<h3>Price = <span id="sliderStatus"></span>
</div>
</div>

<div class="right">
<div class="right-section-first">
<img src="https://docs.google.com/uc?id=1DdRns3dCsrWeWmgg-qBR-HCdUWskUzuz" id='img'/>
</div>
</div>

</body>

Ответы [ 2 ]

0 голосов
/ 06 октября 2018

Я бы использовал два тега img вместо двух.Один будет отображать текущее изображение, а другой - то, которое будет исчезать.

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

Добавитьэтот HTML 

<div class="right-section-first">
  <img class="first-image" src="https://docs.google.com/uc?id=1DdRns3dCsrWeWmgg-qBR-HCdUWskUzuz"/>
  <img class="second-image hidden"/>
</div>
</div>

этот CSS 

.hidden {
 opacity: 0;
}
img {
  opacity:1;
  position: absolute;
    max-height:280px;
    width:auto;
    margin-top:0px;
  -webkit-transition: opacity 1s ease-in;
  -moz-transition: opacity 1s ease-in;
  -ms-transition: opacity 1s ease-out;
  -o-transition: opacity 1s ease-out;
  transition: opacity 1s ease-in;

}
.right-section-first {
  position: relative;
}

и этот JS 

$('#slider').change(function(){
$('#sliderStatus').html( $(this).val() );
      var v = $(this).val();
      $('.hidden').attr("src", imageUrl[v]);

setTimeout(()=> {
    $('img').toggleClass('hidden');
}, 1000)

});

Или просто проверьте мою скрипку

0 голосов
/ 06 октября 2018

Вы можете сделать что-то вроде сокрытия изображения и добавить эффект jQuery fadeIn. 

$(document).on('input change', '#slider', function() {//listen to slider changes
    var v=$(this).val();//getting slider val
    $('#sliderStatus').html( $(this).val() );
    $("#img").fadeIn("slow");
    $("#img").stop().hide().fadeIn("slow");
    $("#img").prop("src", imageUrl[v]);
});

Это работает, я думаю. 

var imageUrl = new Array();

imageUrl[1000] = 'https://docs.google.com/uc?id=1DdRns3dCsrWeWmgg-qBR-HCdUWskUzuz';
imageUrl[1500] = 'https://docs.google.com/uc?id=1SM5lY2dOHPWBSEWW_wjVnJa4TEbXTHeM';
imageUrl[2000] = 'https://docs.google.com/uc?id=1L0wW0z05rAve6lJDAk7bFkftlwUTEcgW';
imageUrl[2500] = 'https://docs.google.com/uc?id=1wlD0jquk-fFozq3EjUcgMkmAbt6TDJCf';
imageUrl[3000] = 'https://docs.google.com/uc?id=1sYJhZk43vM_V2X8hit7BVnQQ7eqP6nsk';
imageUrl[3500] = 'https://docs.google.com/uc?id=1Y4ns2eU4ofW-5xA9QP-TxTxlWQ2gPqZL';
imageUrl[4000] = 'https://docs.google.com/uc?id=1mHgMSqzeiMfUc_IDtXA9VkfxvExzltSV';
imageUrl[4500] = 'https://docs.google.com/uc?id=1lRNvcd8BdmsuriyDfoBDt2VnuIy9izSx';
imageUrl[5000] = 'https://docs.google.com/uc?id=1gwQVUVuNSKo3PqrJmtBxBsqC02Df29zw';
imageUrl[5500] = 'https://docs.google.com/uc?id=1pMvUCR9inb3aiAVWG4-blNuL41y9CZQV';
imageUrl[6000] = 'https://docs.google.com/uc?id=1PdChm6wtInsUtWDZt6Z5yz_HKDrbBxW3';
imageUrl[6500] = 'https://docs.google.com/uc?id=15nvfk5pXpThMAUiactpgv14Jg5Sbl6GJ';
imageUrl[7000] = 'https://docs.google.com/uc?id=1NbASgHWGrx-69K0CQ0qhnqx_ge4IHPX3';
imageUrl[7500] = 'https://docs.google.com/uc?id=1gc_HYWJe9JzCKC8jLavSAM8AGndCW1T1';
imageUrl[8000] = 'https://docs.google.com/uc?id=1TE5fSnWLFTkUaKlVGf0vom1HQPuvb0Wg';
       
$(document).on('input change', '#slider', function() {//listen to slider changes
    var v=$(this).val();//getting slider val
   $('#sliderStatus').html( $(this).val() );
  $("#img").fadeIn("slow");
  $("#img").stop().hide().fadeIn("slow");
  $("#img").prop("src", imageUrl[v]);
});
body {
	background:#f3f3f3;
	padding:20px;
  font-family:titillium web
}

h2 {
  font-size:35px;
}

h3 {
  font-size:25px;
}

img {
	max-height:280px;
	width:auto;
	margin-top:0px;
}

.left,
right{
  float:left;
  width:50%;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 25px;
    background: #d3d3d3;
    outline: none;
		border-radius:50px;
	margin:20px auto 20px;
	max-width:600px;

}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 50px;
    height: 50px;
    background: #3FA3E9;
    cursor: pointer;
		border-radius:50px;
	  border:none!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  
<div class="left">

<div class="left-section-first">
<h2>How much it will cost?</h2>
<input type="range" id="slider" min="1000" max="8000" step="500" value="0" class="slider"/>
</div>

<div class="left-section-second">
<h3>Price = <span id="sliderStatus"></span>
</div>
</div>

<div class="right">
<div class="right-section-first">
<img src="https://docs.google.com/uc?id=1DdRns3dCsrWeWmgg-qBR-HCdUWskUzuz" id='img'/>
</div>
</div>

</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...