여기의 솔루션 ( https://stackoverflow.com/a/18493684/1969917 ) 사이트에서 이미지 슬라이드 쇼를 표시하는 데 사용합니다. 이제 클라이언트는 동일한 사이트에서 다른 이미지 슬라이드 쇼를 원하지만이 방법이 작동합니다. 다른 ID로 시도하고 자바 스크립트를 복사했습니다. 그러나 두 번째는 작동하지 않습니다. 첫 번째 슬라이더 만 제대로 작동합니다.
JS :
$(function () {
/* SET PARAMETERS */
var change_img_time = 5000;
var transition_speed = 100;
var simple_slideshow = $("#exampleSlider"),
listItems = simple_slideshow.children('li'),
listLen = listItems.length,
i = 0,
changeList = function () {
listItems.eq(i).fadeOut(transition_speed, function () {
i += 1;
if (i === listLen) {
i = 0;
}
listItems.eq(i).fadeIn(transition_speed);
});
};
listItems.not(':first').hide();
setInterval(changeList, change_img_time);
});
HTML :
<ul id="exampleSlider">
<li><img src="http://placehold.it/500x250" alt="" /></li>
<li><img src="http://placehold.it/500x250" alt="" /></li>
<li><img src="http://placehold.it/500x250" alt="" /></li>
<li><img src="http://placehold.it/500x250" alt="" /></li>
</ul>
사이트에서 둘 이상의 슬라이드 쇼로 작업하려면 JavaScript 코드에서 어떻게 변경해야합니까?
다음과 같이 코드를 매우 간단한 jQuery 플러그인으로 바꿀 수 있습니다.
$.fn.simpleSlides = function () {
/* SET PARAMETERS */
var change_img_time = 1500;
var transition_speed = 300;
return this.each(function () {
var simple_slideshow = $(this),
listItems = simple_slideshow.children('li'),
listLen = listItems.length,
i = 0,
changeList = function () {
listItems.eq(i).fadeOut(transition_speed, function () {
i += 1;
if (i === listLen) {
i = 0;
}
listItems.eq(i).fadeIn(transition_speed);
});
};
listItems.not(':first').hide();
setInterval(changeList, change_img_time);
});
}
주요 요소에 공통 클래스를 제공하고 다음과 같이 사용하십시오.
$(function(){
$('.slideshow').simpleSlides()
});
each플러그인 의 루프는 인스턴스를 분리합니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다