집

JS 특수 효과

jQuery 효과

jQuery는 1688의 홈페이지 광고 이미지 전환을 모방합니다.

지금 다운로드 시사

<!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中文网입니다.

부인 성명

이 사이트의 모든 리소스는 네티즌이 제공하거나 주요 다운로드 사이트에서 재인쇄되었습니다. 소프트웨어의 무결성을 직접 확인하십시오! 이 사이트의 모든 리소스는 학습 참고용으로만 사용됩니다. 상업적 목적으로 사용하지 마시기 바랍니다. 그렇지 않으면 모든 결과에 대한 책임은 귀하에게 있습니다! 침해가 있는 경우 당사에 연락하여 삭제하시기 바랍니다. 연락처: admin@php.cn

관련 기사

jQuery는 Alipay 홈페이지 포커스 이미지 효과를 모방합니다.

25 Apr 2018

이번에는 jQuery 모방 Alipay 홈페이지 초점 이미지 효과를 가져오겠습니다. jQuery 모방 Alipay 홈페이지 초점 이미지 효과에 대한 주의사항은 무엇입니까? 다음은 실제 사례입니다.

Jquery 드래그 앤 드롭 효과를 구현하는 방법

24 Apr 2018

이번에는 jquery 드래그 앤 드롭 효과 구현 방법을 알려드리겠습니다. jquery 드래그 앤 드롭 효과 구현 시 주의사항은 무엇인가요? 다음은 실제 사례입니다.

jQuery 애니메이션 효과 그림 캐러셀 구현(코드 포함)

24 Apr 2018

이번에는 jQuery 애니메이션 효과 그림 캐러셀 구현(코드 포함)을 가져오겠습니다. jQuery 애니메이션 효과 그림 캐러셀 구현 시 주의사항은 무엇입니까? 다음은 실제 사례입니다. 1. 요구사항 분석

jQuery 효과 사용법

15 Dec 2016

jQuery 효과 사용법

jQuery 애니메이션 효과 컬렉션

07 Dec 2016

jQuery 애니메이션 효과 컬렉션

jQuery.delay() 함수 사용 예시에 대한 자세한 설명

30 Jun 2017

지연() 함수는 대기열의 다음 항목 실행을 지연하는 데 사용됩니다. Delay()는 대기열에서 실행을 기다리는 다음 애니메이션을 실행하기 전에 지정된 시간 동안 지연시킬 수 있습니다. 이전 애니메이션 효과 실행 후 다음 애니메이션 효과의 실행 시간을 지연시키기 위해 대기열에 있는 두 개의 jQuery 효과 함수 사이에서 일반적으로 사용됩니다. 다음 항목이 효과 애니메이션이 아닌 경우 효과 대기열에 추가되지 않으므로 함수는 이에 대한 지연된 호출을 만들지 않습니다. 이 함수는 jQuery 객체(인스턴스)에 속합니다.

jQuery 이미지 전환 애니메이션 효과

08 Dec 2016

jQuery 이미지 전환 애니메이션 효과

jQuery 및 CSS_jquery용 텍스트 효과 플러그인 컬렉션

16 May 2016

이 기사에서는 주로 20가지 종류의 jQuery 및 CSS 텍스트 효과 플러그인을 요약합니다. 이들은 모두 널리 사용되는 특수 효과 플러그인이며 필요한 친구에게 권장됩니다.

jQuery UI는 동적 둥근 그라데이션 웹 사이트 탐색 메뉴 효과를 구현합니다.

16 May 2016

이 기사에서는 주로 둥근 모서리 그래픽 및 페이지 전환 효과 관련 기술을 구성하는 jquery 플러그인과 관련된 동적 둥근 모서리 그라데이션 웹 사이트 탐색 메뉴 효과 코드를 달성하기 위한 jQuery UI를 소개하며 특정 참조 값이 있으므로 필요한 친구가 참조할 수 있습니다.

See all articles