집

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 없이 맨 위로 부드러운 애니메이션 스크롤을 만드는 방법은 무엇입니까?

03 Nov 2024

많은 브라우저에서 맨 위로 애니메이션 스크롤(jQuery 제외) 웹에서 부드러운 애니메이션 "맨 위로 스크롤" 효과 구현...

CSS가 콘텐츠에 영향을 주지 않고 반투명 요소에 대한 배경 흐림을 달성할 수 있습니까?

29 Oct 2024

CSS에서 배경 흐림 효과 달성: 동적 투명 효과 가이드질문:Vista/7-aero-glass 스타일 효과를 만드는 것이 바람직합니다...

JavaScript 없이 CSS에서 hover 효과를 어떻게 지연할 수 있나요?

26 Nov 2024

CSS에서 :hover 효과 지연JavaScript를 사용하지 않고 :hover 이벤트를 지연할 수 있습니까? CSS에서 hover 효과 적용을 지연하는 것이 가능합니다...

구구단 출력 효과

25 Jul 2016

구구단 출력 효과

내 CSS 전환으로 인해 Chrome에서 이미지가 흐릿해지고 움직임이 발생하는 이유는 무엇입니까?

25 Dec 2024

Chrome에서 이미지 흐림 및 움직임을 유발하는 CSS 전환 효과?Chrome에서 이미지 흐림 및 움직임을 유발하는 CSS 전환 효과 문제...

오버레이에서 CSS Glass Blur 효과를 얻는 방법은 무엇입니까?

24 Nov 2024

오버레이에 CSS 유리/흐림 효과 적용Q: 반투명 오버레이에 흐림 효과 구현 웹 개발자가 어려움을 겪고 있는 이유는 다음과 같습니다.

PHP 모방 Comsenz 설치 효과 코드

29 Jul 2016

shifenzheng.bak:shifenzheng.bak php는 Comsenz 설치 효과 코드 패키지를 모방하고 다운로드를 제공합니다. 최종 효과는 다음과 같습니다. step.inc.php 설치 단계 효과 클래스: 다음과 같이 코드 코드를 복사합니다:/** * step.inc. php 설치 단계 효과 클래스 * * 누구나 배울 수 있는 Comsenz 제품의 설치 효과 데이터 시트에서 메인 코드 추출 * @author tianxin * @version 1.0.0 * */ class StepClass { function show_header() { defi