이 글에서는 주로 jquery를 사용하여 PC측 캐러셀 효과의 예를 작성하는 방법을 설명합니다. 관심 있는 친구들은 참고할 수 있습니다.
저는 최근 다른 프로젝트로 별로 바쁘지 않았습니다. 회사 공식 웹사이트 프로젝트를 위한 새 페이지를 만드는 일을 맡았습니다. (회사 공식 웹사이트 프로젝트에 노출된 적이 없습니다.) 캐러셀 이미지가 있는 곳이 있습니다. 처음에는 swiper.js 플러그인을 직접 사용해보고 싶었는데, 생각해보니 공식 홈페이지 프로젝트에는 swiper.js가 도입된 적이 없었네요. 순차적으로 다른 네트워크 요청을 추가하지 않기 위해 도입하지 않기로 결정했습니다. 프로젝트에서는 이미 jQuery를 사용했기 때문에 간단히 jQuery를 사용하여 캐러셀 차트를 작성했습니다.
이제 별도로 작성한 캐러셀 이미지 코드를 꺼내서 작은 데모를 만들고 여기에 적어서 기록해 보세요. (데모에 있는 캐러셀 이미지 사진은 온라인에서 무작위로 발견되었습니다.)
얻은 효과:
1 , 자동 캐러셀(캐러셀 시간 간격은 js 코드에서 맞춤 설정됨)
2. 왼쪽 및 오른쪽 버튼을 클릭하면 수동 전환이 가능합니다.
3 하단의 작은 점은 전환된 이미지의 위치에 따라 활성 상태를 표시합니다.
4. 마우스는 캐러셀 영역을 통과하여 캐러셀을 중지하고 캐러셀 영역을 떠나 캐러셀을 시작합니다.
코드 디렉토리 결과는 다음과 같습니다.
1. index.html
참고: 다음은 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)
})로그인 후 복사
4. 효과 사진 표시
위 내용은 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
webpack 4.0.0-beta.0 버전의 새로운 기능(자세한 튜토리얼)
vue2.0 구성 요소에서 값 전송 및 통신을 구현하는 방법
SpringMVC를 사용하여 vue cross 문제 해결 -도메인 요청
위 내용은 jquery를 사용하여 PC 측 캐러셀을 작성하는 방법(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
