최신 다운로드
판타지 아쿠아리움
소녀전선
별의 날개
작은 꽃요정 요정의 천국
레스토랑 큐트스토리
산허 여행 탐험
사랑과 프로듀서
가장 강력한 두뇌 3
오드 더스트: 다밀라
젊은 서유기 2
24시간11리더보드 읽기
- 1 컴파일하는 동안 아키텍처를 기반으로 Go 소스 파일을 제외하는 방법은 무엇입니까?
- 2 MySQL JSON 필드를 테이블 조인에 사용할 수 있습니까?
- 3 djsalert.loc - djsalert.loc가 무엇인가요?
- 4 내 Python `main()` 함수가 실행되지 않는 이유는 무엇입니까?
- 5 PHP에서 타임스탬프를 사람이 읽을 수 있는 날짜 및 시간으로 변환하는 방법은 무엇입니까?
- 6 dlbkcoms.exe - dlbkcoms.exe란 무엇입니까?
- 7 \"var\" 없이 함수 내에서 전역 변수를 선언하는 것이 RAM 최적화 전략입니까?
- 8 C 변수 선언에 괄호가 사용되는 시기와 이유는 무엇입니까?
- 9 구조체를 함수에 전달할 때 \"인수가 너무 많습니다\"되는 이유는 무엇입니까?
- 10 POST 요청으로 JSON 데이터를 보낼 때 Jersey REST 서비스에서 \"415 지원되지 않는 미디어 유형\" 오류를 해결하려면 어떻게 해야 합니까?
- 11 dll32phi.dll - dll32phi.dll이란 무엇입니까?
- 12 std::bind는 멤버 함수를 어떻게 처리하며 객체 참조가 필요한 이유는 무엇입니까?
- 13 Win32 스레딩 모델을 사용하는 MinGW-w64는 기본적으로 std::thread를 지원합니까?
- 14 My Go 웹서버가 MP4 비디오를 재생할 수 없는 이유는 무엇입니까?
- 15 데이터베이스 최적화를 위해 키워드를 분할하는 방법: 효율적인 PHP 및 MySQL 접근 방식?
최신 튜토리얼
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
-
- 해외 웹 개발 풀스택 강좌 총집합
- 1658 2024-04-24
-
- Go 언어 실습 GraphQL
- 1934 2024-04-19
-
- 550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다
- 3349 2024-04-18
-
- 기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬
- 2880 2024-04-10
-
- MySQL 시작하기(mosh 교사)
- 1755 2024-04-07
-
- Mock.js | Axios.js | Json - 10일간의 고품질 수업
- 2570 2024-03-29
<!DOCTYPE html>
<html lang="ko">
<머리>
<meta charset="UTF-8">
<title>jQuery首页广告图文切换 </title>
<style type="text/css">
div,ul,li,a,span,img{margin:0;padding:0;}
li{목록 스타일:없음;}
#slider{너비:790px;높이:340px;여백:10% 자동;위치:상대적;}
.slider_list li{위치:절대;표시:없음;}
.slider_list li:first-child{display:block;}
.slider_icon{위치:절대;z-색인:1;왼쪽:40%;하단:20px;글꼴 크기:0;패딩:4px 8px;국경 반경:12px;배경색:hsla(0,0%, 100%,.3);}
.slider_icon i{display:inline-block;width:12px;height:12px;border-radius:50%;margin:0 5px;}
.btn{배경:#fff;}
.arrow{display:none;width:30px;height:60px; background-color:rgba(0,0,0,.2);position:absolute;top:50%;margin-top:-30px;}
.prve{왼쪽:0;}
.다음{오른쪽:0;}
.arrow 범위{display:block;width:10px;height:10px;border-bottom:2px solid #fff;border-left:2px solid #fff;}
.slider_left{margin:25px 0 0 10px;transform:rotate(45deg);}
.slider_right{margin:25px 0 0 5px;transform:rotate(-135deg);}
.arrow:hover{배경:#444;}
#slider:hover .arrow{display:block;}
.btn_act{배경:#db192a;}
</스타일>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<스크립트 유형="텍스트/자바스크립트">
$(함수(){
변수 개수 = 0;
var $li = $("#slider>ul>li");
$(".next").click(function(){
카운트++;
if(개수 == $li.length){
개수 =0;
}
$li.eq(count).fadeIn().siblings().fadeOut();
$(".slider_icon i").eq(count).addClass("btn_act").siblings().removeClass('btn_act');
console.log(개수);
});
$(".prve").click(함수(){
카운트--;
if(개수 == -1){
개수 = $li.length-1;
}
console.log(개수);
$li.eq(count).fadeIn().siblings().fadeOut();
$(".slider_icon i").eq(count).addClass("btn_act").siblings().removeClass('btn_act');
});
$(".slider_icon i").mouseenter(function(){
$(this).addClass('btn_act').siblings().removeClass("btn_act");
$li.eq($(this).index()).fadeIn().siblings().fadeOut();
개수 = $(this).index();
});
});
</머리>
<몸>
<div id="slider">
<ul class="slider_list">
<li><a href="#"><img src="img/59e5df51Na34c52da.jpg"></a></li>
<li><a href="#"><img src="img/59e6f772Nde97ca5e.jpg"></a></li>
<li><a href="#"><img src="img/59e8ab7dN48b529e7.jpg"></a></li>
<li><a href="#"><img src="img/59e89be7N0031c258.jpg"></a></li>
<li><a href="#"><img src="img/59e980a2Nc4314079.jpg"></a></li>
<li><a href="#"><img src="img/59ed6dd8Ncaee86ed.jpg"></a></li>
<li><a href="#"><img src="img/59e99072N4baea8f3.jpg"></a></li>
<li><a href="#"><img src="img/598abe52Nb1c8cfe4.jpg"></a></li>
</ul>
<div class="slider_icon">
<i class="btn btn_act"></i>
<i class="btn"></i>
<i class="btn"></i>
<i class="btn"></i>
<i class="btn"></i>
<i class="btn"></i>
<i class="btn"></i>
<i class="btn"></i>
</div>
<a href="자바스크립트:;" class="arrow prve">
<span class="slider_left"></span>
</a>
<a href="자바스크립트:;" class="다음 화살표">
<span class="slider_right"></span>
</a>
</div>
<div style="text-align:center;margin:50px 0; 글꼴:normal 14px/24px 'MicroSoft YaHei';">
</div>
</본문>
</html>
这是一个jQuery는 1688의 首页广告图文字切换, 需要的朋友可以直接下载使用, 更多特效代码尽特效代码尽 in PHP中文网입니다.
관련 추천
모바일 Happy Scratch HTML5 플러그인
선물 상자 애니메이션 특수 효과로 접힌 HTML5 종이
순수한 CSS3 복고풍 필름 플레이어 특수 효과
경량의 html5 WinBox 페이지 팝업 플러그인
jQuery 아코디언 그림 슬라이딩 메뉴 표시줄
빨간색 드롭다운 탐색 메뉴를 생성하는 순수 CSS3 코드
HTML5 마우스 휠 회전 그림 표시 특수 효과
인기 추천
jQuery+Html5로 아름다운 고백 애니메이션 코드 구현
커플의 로맨틱 고백 js 특수효과 코드
H5 팬더 튀는 게임 소스 코드
H5 3D 롤링 볼 게임 소스 코드
Bunker의 HTML5 입자 애니메이션 표현 효과