jquery는 PC에서 캐러셀 이미지 코드를 구현합니다.
저는 최근 다른 프로젝트로 별로 바쁘지 않았습니다. 회사의 공식 웹사이트 프로젝트를 위한 새 페이지를 만드는 일을 맡았습니다. 프로젝트에서는 이미 jQuery를 사용했기 때문에 그냥 jQuery를 사용하여 캐러셀 이미지를 작성하겠습니다. 이 글에서는 주로 jquery를 사용하여 PC측 캐러셀 효과의 예제를 작성하는 방법을 설명합니다. 관심 있는 친구들은 참고할 수 있습니다.
이제 따로 작성한 캐러셀 이미지 코드를 꺼내서 작은 데모를 만들고 여기에 적어서 기록해두세요. (데모 속 캐러셀 이미지 사진은 온라인에서 무작위로 찾은 것입니다.)
얻은 효과:
1. 자동 캐러셀(캐러셀 시간 간격은 js 코드로 맞춤 설정됨)
2. 왼쪽 및 오른쪽 버튼을 클릭하면 수동 전환이 가능합니다.
3. 하단의 작은 점은 전환된 이미지의 위치에 따라 활성 상태를 표시합니다.
4 , 마우스가 캐러셀 영역을 통과하여 캐러셀을 중지하고 캐러셀 영역을 떠나 캐러셀을 시작합니다.
코드 디렉토리 결과는 다음과 같습니다.
1. index.html
Note : 여기 5장의 사진이 있습니다. 예를 들어, 페이지의 실제 캐러셀은 사용자에게 5개의 다른 그림을 보여줍니다. 그러나 캐러셀 효과의 연속성을 위해 첫 번째 그림 이전과 다섯 번째 그림 뒤에 다섯 번째 그림이 추가됩니다. 첫 번째 사진이 업로드되었으므로 데모 구조에는 7장의 사진이 있으며, 각 사진의 크기는 동일해야 합니다(여기서는 너비와 높이가 720*350px입니다).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PC-jquery版轮播图</title>
<link rel="stylesheet" href="css/style.css" rel="external nofollow" >
</head>
<body>
<p class="layout">
<h2 style="text-align: center;">PC-jquery版轮播图</h2>
<p class="slide" id="slide">
<p id="outer" class="outer">
<ul id="inner" class="inner">
<li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p>图片-5</p><img src="images/slide-5.jpg"></a></li>
<li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p>图片-1</p><img src="images/slide-1.jpg"></a></li>
<li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p>图片-2</p><img src="images/slide-2.jpg"></a></li>
<li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p>图片-3</p><img src="images/slide-3.jpg"></a></li>
<li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p>图片-4</p><img src="images/slide-4.jpg"></a></li>
<li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p>图片-5</p><img src="images/slide-5.jpg"></a></li>
<li><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><p>图片-1</p><img src="images/slide-1.jpg"></a></li>
</ul> <!--底部小圆点-->
<ol class="dot" id="dot">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</p>
<!--左右两侧的点击切换按钮-->
<p class="arrow-box">
<p class="arrow arrow-l" id="arrow_l">‹</p>
<p class="arrow arrow-r" id="arrow_r">›</p>
</p>
</p>
</p>
<script src="js/jquery.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>2.style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.layout {
width: 1000px;
margin: 30px auto;
}
ul,ol,li {
list-style: none;
}
.slide {
position: relative;
width: 900px;
margin:auto;
}
.slide .outer {
position: relative;
margin: 30px auto;
width: 720px;
height: 400px;
overflow: hidden;
}
.slide .outer .inner {
width: 5040px;
height: 350px;
position: absolute;
left: -720px;
top: 0;
}
.slide .outer .inner li {
float: left;
height: 350px;
}
.slide .outer .inner li a {
display: block;
position: relative;
width: 100%;
height: 100%;
}
.slide .outer .inner li a p {
position: absolute;
left: 0;
bottom: 0;
color: #fff;
font-size: 18px;
width: 720px;
height: 80px;
line-height: 80px;
padding-left: 50px;
background: linear-gradient(180deg,rgba(0,0,0,0), rgba(0,0,0,0.5));
}
.slide .outer .dot {
margin-top: 365px;
text-align: center;
}
.slide .outer .dot li {
height: 6px;
width: 6px;
border-radius: 3px;
background-color: #d2cbcb;
display: inline-block;
margin: 0 3px;
}
.slide .outer .dot li.active {
background-color: #6e5ca5;
}
.slide .arrow-box {
position: absolute;
width: 900px;
height: 60px;
top: 150px;
left: 0;
}
.slide .arrow-box .arrow {
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
border-radius: 30px;
background-color: #dde2e6;
font-size: 60px;
color: #999;
cursor: pointer;
}
.slide .arrow-box .arrow.arrow-l {
float: left;
}
.slide .arrow-box .arrow.arrow-r {
float: right;
}3.index.js
참고: js 코드에는 각 변수가 주석 처리되어 있습니다. 여기서는 빠른 다중 클릭으로 인해 애니메이션이 정지되는 것을 방지하기 위해 이미지가 전환될 때마다 여기서 stop(false,true)를 호출합니다. 단, 왼쪽으로 스크롤할 때 마지막 사진으로 스크롤한 후 다시 전환할 때 stop(false,true) 을 사용하지 말고 즉시 첫 번째 사진(실제로는 dom 구조에서 세 번째 사진)(두 개의 사진)을 찾으세요. ) 마찬가지로 오른쪽으로 스크롤하면 첫 번째 사진으로 스크롤한 후 다시 전환할 때 중지(false, true)할 필요가 없지만 즉시 마지막 사진을 찾습니다(실제로는 두 번째에서 마지막 사진까지의 돔 구조). ).
var interval = 3000; //轮播间隔时间
var arrowL = $('#arrow_l'); //左侧箭头
var arrowR = $('#arrow_r'); //右侧箭头
var slideBox = $('#slide'); //轮播图区域
var innerBox = $('#inner'); //内层大盒子
var img = innerBox.children('li'); //每个图片
var dot = $('#dot'); //小圆点盒子
var imgW = $(img[0]).outerWidth(); //每个li标签的宽度
var imgCount = 5; //总图片个数（不同图片的个数）（实际dom上是有7张）
var i = 0; //初始化为第0张图片
timer = null; //定时器
//自动轮播
timer = setInterval(function () {
i++;
innerBox.stop(false, true).animate({'left':-i*imgW+'px'},300)
dot.find('li').removeClass('active').eq(i-1).addClass('active')
if(i > imgCount){
innerBox.animate({'left':-1*imgW+'px'},0);
dot.find('li').removeClass('active').eq(0).addClass('active')
i = 1;
}
},interval)
//点击右侧箭头，播放下一张
arrowR.click(function () {
i++;
innerBox.stop(false, true).animate({'left':-i*imgW+'px'},300)
dot.find('li').removeClass('active').eq(i-1).addClass('active')
if(i > imgCount){
innerBox.animate({'left':-1*imgW+'px'},0);
dot.find('li').removeClass('active').eq(0).addClass('active')
i = 1;
}
})
//点击左侧箭头，播放上一张
arrowL.click(function () {
i--;
innerBox.stop(false, true).animate({'left':-i*imgW+'px'},300)
dot.find('li').removeClass('active').eq(i-1).addClass('active')
if(i < 1){
innerBox.animate({'left':-imgCount*imgW+'px'},0);
dot.find('li').removeClass('active').eq(imgCount-1).addClass('active')
i = imgCount;
}
})
//鼠标经过轮播图区域时，清除定时器，停止自动轮播
slideBox.mouseenter(function () {
clearInterval(timer);
})
//鼠标离开轮播图区域时，重新启动自动轮播
slideBox.mouseleave(function () {
timer = setInterval(function () {
i++;
innerBox.stop(false, true).animate({'left':-i*imgW+'px'},300)
dot.find('li').removeClass('active').eq(i-1).addClass('active')
if(i > imgCount){
innerBox.animate({'left':-1*imgW+'px'},0);
dot.find('li').removeClass('active').eq(0).addClass('active')
i = 1;
}
},interval)
})관련 권장사항:
캡슐화된 모션 프레임워크의 실제 구현에서 슬라이딩 포커스 회전형 차트에 대한 설명
회전형 차트 효과의 jquery 버전 및 확장 확장 인스턴스 공유
위 내용은 jquery는 PC에서 캐러셀 이미지 코드를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7470
15
1377
52
77
11
48
19
19
29
Huawei 휴대폰에서 이중 WeChat 로그인을 구현하는 방법은 무엇입니까?
Mar 24, 2024 am 11:27 AM
Huawei 휴대폰에서 이중 WeChat 로그인을 구현하는 방법은 무엇입니까? 소셜 미디어의 등장으로 WeChat은 사람들의 일상 생활에 없어서는 안될 커뮤니케이션 도구 중 하나가 되었습니다. 그러나 많은 사람들이 동일한 휴대폰에서 동시에 여러 WeChat 계정에 로그인하는 문제에 직면할 수 있습니다. Huawei 휴대폰 사용자의 경우 듀얼 WeChat 로그인을 달성하는 것은 어렵지 않습니다. 이 기사에서는 Huawei 휴대폰에서 듀얼 WeChat 로그인을 달성하는 방법을 소개합니다. 우선, 화웨이 휴대폰과 함께 제공되는 EMUI 시스템은 듀얼 애플리케이션 열기라는 매우 편리한 기능을 제공합니다. 앱 듀얼 오픈 기능을 통해 사용자는 동시에
모든 장치에서 GE 범용 원격 코드 프로그램
Mar 02, 2024 pm 01:58 PM
장치를 원격으로 프로그래밍해야 하는 경우 이 문서가 도움이 될 것입니다. 우리는 모든 장치 프로그래밍을 위한 최고의 GE 범용 원격 코드를 공유할 것입니다. GE 리모콘이란 무엇입니까? GEUniversalRemote는 스마트 TV, LG, Vizio, Sony, Blu-ray, DVD, DVR, Roku, AppleTV, 스트리밍 미디어 플레이어 등과 같은 여러 장치를 제어하는 데 사용할 수 있는 리모컨입니다. GEUniversal 리모컨은 다양한 기능과 기능을 갖춘 다양한 모델로 제공됩니다. GEUniversalRemote는 최대 4개의 장치를 제어할 수 있습니다. 모든 장치에서 프로그래밍할 수 있는 최고의 범용 원격 코드 GE 리모컨에는 다양한 장치에서 작동할 수 있는 코드 세트가 함께 제공됩니다. 당신은 할 수있다
PHP 프로그래밍 가이드: 피보나치 수열을 구현하는 방법
Mar 20, 2024 pm 04:54 PM
프로그래밍 언어 PHP는 다양한 프로그래밍 논리와 알고리즘을 지원할 수 있는 강력한 웹 개발 도구입니다. 그중 피보나치 수열을 구현하는 것은 일반적이고 고전적인 프로그래밍 문제입니다. 이 기사에서는 PHP 프로그래밍 언어를 사용하여 피보나치 수열을 구현하는 방법을 소개하고 구체적인 코드 예제를 첨부합니다. 피보나치 수열은 다음과 같이 정의되는 수학적 수열입니다. 수열의 첫 번째와 두 번째 요소는 1이고 세 번째 요소부터 시작하여 각 요소의 값은 이전 두 요소의 합과 같습니다. 시퀀스의 처음 몇 가지 요소
Huawei 휴대폰에서 WeChat 복제 기능을 구현하는 방법
Mar 24, 2024 pm 06:03 PM
Huawei 휴대폰에서 WeChat 복제 기능을 구현하는 방법 소셜 소프트웨어의 인기와 개인 정보 보호 및 보안에 대한 사람들의 강조가 높아지면서 WeChat 복제 기능이 점차 주목을 받고 있습니다. WeChat 복제 기능을 사용하면 사용자가 동일한 휴대폰에서 여러 WeChat 계정에 동시에 로그인할 수 있으므로 관리 및 사용이 더 쉬워집니다. Huawei 휴대폰에서 WeChat 복제 기능을 구현하는 것은 어렵지 않습니다. 다음 단계만 따르면 됩니다. 1단계: 휴대폰 시스템 버전과 WeChat 버전이 요구 사항을 충족하는지 확인하십시오. 먼저 Huawei 휴대폰 시스템 버전과 WeChat 앱이 최신 버전으로 업데이트되었는지 확인하세요.
Golang이 어떻게 게임 개발 가능성을 가능하게 하는지 마스터하세요
Mar 16, 2024 pm 12:57 PM
오늘날의 소프트웨어 개발 분야에서 효율적이고 간결하며 동시성이 뛰어난 프로그래밍 언어인 Golang(Go 언어)은 점점 더 개발자들의 선호를 받고 있습니다. 풍부한 표준 라이브러리와 효율적인 동시성 기능으로 인해 게임 개발 분야에서 주목받는 선택이 되었습니다. 이 기사에서는 게임 개발에 Golang을 사용하는 방법을 살펴보고 특정 코드 예제를 통해 Golang의 강력한 가능성을 보여줍니다. 1. 게임 개발에서 Golang의 장점 Golang은 정적인 유형의 언어로서 대규모 게임 시스템을 구축하는 데 사용됩니다.
PHP 게임 요구 사항 구현 가이드
Mar 11, 2024 am 08:45 AM
PHP 게임 요구사항 구현 가이드 인터넷의 대중화와 발전으로 인해 웹 게임 시장이 점점 더 대중화되고 있습니다. 많은 개발자는 PHP 언어를 사용하여 자신만의 웹 게임을 개발하기를 원하며 게임 요구 사항을 구현하는 것이 핵심 단계입니다. 이 문서에서는 PHP 언어를 사용하여 일반적인 게임 요구 사항을 구현하는 방법을 소개하고 특정 코드 예제를 제공합니다. 1. 게임 캐릭터 만들기 웹게임에서 게임 캐릭터는 매우 중요한 요소입니다. 이름, 레벨, 경험치 등 게임 캐릭터의 속성을 정의하고, 이를 운용할 수 있는 방법을 제공해야 합니다.
Linux '.a' 파일 생성 및 실행
Mar 20, 2024 pm 04:46 PM
Linux 운영 체제에서 파일을 작업하려면 개발자가 파일, 코드, 프로그램, 스크립트 및 기타 항목을 효율적으로 생성하고 실행할 수 있도록 하는 다양한 명령과 기술을 사용해야 합니다. Linux 환경에서는 확장자가 ".a"인 파일이 정적 라이브러리로서 매우 중요합니다. 이러한 라이브러리는 소프트웨어 개발에서 중요한 역할을 수행하므로 개발자는 여러 프로그램에서 공통 기능을 효율적으로 관리하고 공유할 수 있습니다. Linux 환경에서 효과적인 소프트웨어 개발을 위해서는 ".a" 파일을 생성하고 실행하는 방법을 이해하는 것이 중요합니다. 이번 글에서는 리눅스 ".a" 파일을 포괄적으로 설치하고 구성하는 방법을 소개한다. 리눅스 ".a" 파일의 정의, 목적, 구조, 생성 및 실행 방법을 살펴보자. L은 무엇입니까?
Copilot을 사용하여 코드를 생성하는 방법
Mar 23, 2024 am 10:41 AM
프로그래머로서 저는 코딩 경험을 단순화하는 도구에 흥미를 느낍니다. 인공 지능 도구의 도움으로 데모 코드를 생성하고 요구 사항에 따라 필요한 수정 작업을 수행할 수 있습니다. Visual Studio Code에 새로 도입된 Copilot 도구를 사용하면 자연어 채팅 상호 작용을 통해 AI 생성 코드를 만들 수 있습니다. 기능을 설명함으로써 기존 코드의 의미를 더 잘 이해할 수 있습니다. Copilot을 사용하여 코드를 생성하는 방법은 무엇입니까? 시작하려면 먼저 최신 PowerPlatformTools 확장을 가져와야 합니다. 이를 위해서는 확장 페이지로 이동하여 "PowerPlatformTool"을 검색하고 설치 버튼을 클릭해야 합니다.
