6월까지 자바스크립트&제이쿼리 수업을 들었던 학생입니다.
수업 마지막 날 레시피 수업 중 알려주셨던 이미지 슬라이드 코드를 이용하여 홈페이지를 만들려 합니다.
그런데 슬라이드를 줄 이미지 가로 크기가 화면에 꽉 찰 경우, 어떻게 코드를 변경해야 할지 몰라 문의 드립니다.
<html>
<div di="slider">
<div>
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
</div>
</div>
</html>
<css>
#slider {
width: 100%; height: 400px; overflow: hidden; position: relative;
}
.slide {
position: absolute; top: 0; left: 0;
}
.slider1 {
background: url('슬라이드 줄 이미지 경로');
}
<javaScript>
$(function() {
doSlider("#slider");
});
function doSlider(slider) {
var slider = slider;
var itemWidth = $(slider).width();
var itemCount = $(slider + "> div > div").length;
var intervalID;
_init();
intervalID = setInterval(_animate, 2000);
function _init() {
$(slider + "> div").css({
width : (itemWidth * itemCount) + "px"
}).mouseover(function() {
clearInterval(intervalID);
}).mouseout(function() {
intervalID = setInterval(_animate, 2000);
});
}
function _animate() {
$(slider + "> div").animate({
"left" : "-=" + itemWidth + "px"
}, "slow", function() {
$(slider + "> div div:first-child").clone().appendTo(slider + ">div");
$(slider + "> div div:first-child").remove();
$(slider + "> div").css("left", "0");
});
}
}