div 요소의 배경 이미지 속성을 대상으로 지정하고 Jquery를 사용하여 변경하여 슬라이드 쇼를 만들고 싶습니다. 일부 웹 사이트에서 다음 코드를 받았지만 작동하도록 관리 할 수 없습니다.
var images=new Array('/ccl/sites/default/files/Speed_Queen_Equipped.jpg','/ccl/sites/default/files/Speed_Queen_Equipped2.jpg','/ccl/sites/default/files/Speed_Queen_Equipped3.jpg');
var nextimage=0;
doSlideshow();
function doSlideshow(){
if(nextimage>=images.length){nextimage=0;}
$('#homeBanner')
.css('background-image','url("'+images[nextimage++]+'")')
.fadeIn(500,function(){
setTimeout(doSlideshow,1000);
});
}
드루팔 프로젝트의 page.tpl.php 페이지에 배너 코드를 배치했습니다.
<div class="container-fluid">
<div id="homeBanner" class="row">
<div class="container">
<div id="homeBannerText">
<h1>Consulting Cleaning Laundry</h1>
<p>Le spécialiste des solutions propreté au Maghreb et en Afrique.</p>
</div>
</div>
</div>
</div>
다음은 background-image 속성이 적용되는 관련 CSS입니다.
#homeBanner{background-image: url(/ccl/sites/default/files/Speed_Queen_Equipped.jpg); height:600px}
#homeBannerText{ padding-top:230px; color:white; font-size: 200%;}
#homeBannerText>h1{ font-size: 70px;}
내 html.tpl.php 페이지 하단에 내 스크립트에 대한 참조를 포함하고 실제로 개발자 도구를 사용하여 내 HTML에 표시되는지 확인했습니다.
<script src="sites/all/themes/bootsfire/js/main.js"></script>
그래도 아무 일도 일어나지 않습니다. 내가 뭘 잘못하고 있습니까? 원하는 동작을 얻기 위해 코드를 어떻게 변경할 수 있습니까?
이것은 실제로 JavaScript없이 애니메이션을 사용하여 CSS로만 달성 할 수 있습니다.
여기에 제가 여러분을 위해 함께 던진 간단한 예가 있습니다. 나는 시간이 조금 눌려서 가장자리가 약간 거칠지 만 적어도 올바른 방향을 가리켜 야합니다. 나도 안타깝게도 전체 설명을 작성할 시간이 없었지만 명확하게해야 할 점이 있으면 알려주세요.
body{margin:0;}
div{
-webkit-animation:bg linear 20s infinite;
animation:bg linear 20s infinite;
background:url(http://lorempixel.com/1920/480/sports) center center no-repeat;
background-size:contain;
margin:0 auto;
padding:0 0 25%;
max-width:1920px;
}
@-webkit-keyframes bg{
5%{
background-image:url(http://lorempixel.com/1920/480/sports);
}
20%,30%{
background-image:url(http://lorempixel.com/1920/480/city);
}
45%,55%{
background-image:url(http://lorempixel.com/1920/480/nightlife);
}
70%,80%{
background-image:url(http://lorempixel.com/1920/480/technics);
}
95%{
background-image:url(http://lorempixel.com/1920/480/business);
}
}
@keyframes bg{
5%{
background-image:url(http://lorempixel.com/1920/480/sports);
}
20%,30%{
background-image:url(http://lorempixel.com/1920/480/city);
}
45%,55%{
background-image:url(http://lorempixel.com/1920/480/nightlife);
}
70%,80%{
background-image:url(http://lorempixel.com/1920/480/technics);
}
95%{
background-image:url(http://lorempixel.com/1920/480/business);
}
}<div></div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다