jquery를 사용하여 윤방도 효과 구현
32964 단어 javascript
html 스타일 css 스타일 js 스타일
첫 번째 단계: jquery 파일 가져오기
<script src="./jquery.js"></script>
2단계:html스타일
<div id="banner">
<ul id="banner_img">
<li>
<img src="./img/1.jpg" alt="">
li>
<li>
<img src="./img/2.jpg" alt="">
li>
<li>
<img src="./img/3.jpg" alt="">
li>
<li>
<img src="./img/4.jpg" alt="">
li>
ul>
<ul id="banner_yuandian">
<li class="active">1li>
<li>2li>
<li>3li>
<li>4li>
ul>
<button id="banner_back"><button>
<button id="banner_next">>button>
div>
정상으로 돌아오다
3단계: css 스타일
정상으로 돌아오다
4단계:js 스타일
<script>
// ， ， 0
var index=0;
//
function show(){
// +1
index+=1;
// ， ， index=0
if(index>=$("#banner_img>li").length){
index=0;
}
// li ，
$("#banner_img>li").eq(index).show(1000).siblings().hide(1000);
//
$("#banner_yuandian>li").eq(index).addClass("active").siblings().removeClass("active");
}
//
var x=setInterval(show,2000);
// ，
$("#banner_img>li").hover(
function(){
clearInterval(x);
},
function(){
x=setInterval(show,2000);
}
)
// ， ，
$("#banner_yuandian>li").on("click",function(){
//
var index=$(this).index();// index()
// ，
$("#banner_img>li").eq(index).show(1000).siblings().hide(1000);
// ， ，
$("#banner_yuandian>li").eq(index).addClass("active").siblings().removeClass("active");
})
//
$("#banner_yuandian>li").hover(
function(){
clearInterval(x);
},
function(){
x=setInterval(show,2000);
}
)
//
$("#banner_back").on("click",function(){
// 1
index--;
// 0 ，
if(index<0){
index=0;
}
// ，
$("#banner_img>li").eq(index).show(1000).siblings().hide(1000);
// ， ，
$("#banner_yuandian>li").eq(index).addClass("active").siblings().removeClass("active");
})
//
$("#banner_next").on("click",function(){
show();
})
// button
$("button").hover(
function(){
clearInterval(x);
},
function(){
x=setInterval(show,2000);
}
)
정상으로 돌아오다
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
개별 마크다운 블로그 페이지 만들기 - 13부이를 통해 개별 마크다운 기반 블로그 게시물 작성을 시작할 수 있습니다! 이 기사를 따르려면 을 시작점으로 사용하십시오. blog 페이지 디렉토리에 동적 페이지를 생성하여 시작할 수 있습니다. 이 파일[slug].j...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
