정말 간단한 슬라이더(Very Simple Slider)
3(3000)초 마다 전환되는 매우 간단한 슬라이더입니다. 별도의 애니메이션 전환 효과나 페이지네이션 기능이 없고 심지어 이전/다음 버튼도 없습니다. 전환 효과는 Javascript 코드에 기능을 추가하면 쉽게 만들 수 있습니다. (예: .animate()) 이미지의 갯수는 상관없이 계속해서 추가할 수 있으며, 매우 간단하게 수정할 수 있습니다.
아주 간단한 전환되는 광고배너 등을 만들 때 사용하면 좋습니다.
<img src="Img1.jpg" id="mainImage" alt="Simple Slider" style="width:1000px; height:auto;">
<script>
var myImage=document.getElementById("mainImage");
var imageArray=["Img1.jpg","Img2.jpg","Img3.jpg","Img4.jpg"];
var imageIndex=0;
function changeImage(){
myImage.setAttribute("src",imageArray[imageIndex]);
imageIndex++;
if(imageIndex>=imageArray.length){
imageIndex=0;
}
}
setInterval(changeImage,3000);
</script>
'Web Development > JavaScript' 카테고리의 다른 글
JQuery 선택자(Selector) (0) | 2021.07.17 |
---|---|
JavaScript event keycode 목록 (0) | 2021.07.17 |
[JavaScript] 부드러운 스크롤 (0) | 2021.07.17 |
jQuery를 사용하여 페이지로드시 자동 클릭 단추 요소 (0) | 2021.07.17 |
자바스크립트로 버튼 클릭시 순서대로 숫자 호출방법 (0) | 2021.07.17 |
JQuery 학습사이트 - 제이쿼리를 공부할 때 유용한 사이트 (1) | 2021.07.17 |
JavaScript(JQuery) 선별선택자·복수선택자 (0) | 2021.07.17 |
Onclick Event(온클릭 이벤트) (0) | 2021.07.17 |