자바스크립트는 이미지 캐러셀 효과를 구현합니다. (1) 이미지를 점프하게 만듭니다_javascript 기술
- WBOY원래의
- 2016-05-16 15:15:131329검색
이미지 캐러셀 효과는 모든 주요 웹사이트의 홈페이지에서 볼 수 있으며 비교적 일반적입니다. 아래 편집기에서는 이 효과의 간단한 구현을 공유합니다.
1. 사진이 튀어요
2. 영상순차제어 구현
3. 전면, 후면 버튼 컨트롤 구현
이번 글에서는 간격에 따라 사진이 바뀌는 모습을 살펴보겠습니다.
먼저 구조 코드를 완성하고 자세한 설명은 생략하겠습니다. 먼저 렌더링을 보여드리겠습니다.
코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
box-sizing: border-box;
}
a {
text-decoration: none;
}
ul,ol,li{
list-style: none;
margin: 0;
padding: 0;
}
#slider{
width: 800px;
height: 300px;
overflow: hidden;
position: relative;
margin: 0 auto;
}
#slider ul{
width: 2400px;
position: relative;
}
#slider ul:after{
content: " ";
width: 0;
height: 0;
display: block;
}
#slider ul li{
float: left;
width: 800px;
height: 300px;
overflow: hidden;
}
#slider ul li img{
width: 100%;
}
#slider ol{
position: absolute;
bottom: 10px;
left: 46%;
}
#slider ol li{
display: inline-block;
}
#slider ol li a{
display: inline-block;
padding:4px 8px;
border-radius:15px;
background-color: #000;
color: #fff;
}
#slider .prev, #slider .next{
display: inline-block;
position: absolute;
top: 49%;
background-color: #000;
opacity: 0.6;
color: #fff;
padding: 3px;
}
#slider .prev{
left: 10px;
}
#slider .next{
right: 10px;
}
</style>
</head>
<body>
<div id="slider">
<ul>
<li> <img src="http://www.bates-hewett.com/images/sliders/slider-1.jpg" /> </li>
<li> <img src="http://www.bates-hewett.com/images/sliders/slider-2.jpg" /> </li>
<li> <img src="http://www.bates-hewett.com/images/sliders/slider-3.jpg" /> </li>
</ul>
<ol>
<li> <a href="#">1</a> </li>
<li> <a href="#">2</a> </li>
<li> <a href="#">3</a> </li>
</ol>
<a href="#">上一张</a>
<a href="#">下一张</a>
</div>
</body>
</html>
자, 이제 JS를 통해 이미지 점프를 제어해 보겠습니다.
먼저 사진의 위치를 찾아야 합니다. 여기서는 ul을 사용하여 레이아웃을 작성하므로 먼저 UL 아래의 LI 번호를 찾아야 합니다.
그런 다음 사진을 하나씩 표시해 보겠습니다. 마스크 레이어 모드인 창 모드를 사용했습니다. #슬라이더는 창, ul은 창 밖 풍경, 풍경 ul은 가로로 배열되어 있습니다
그러면 외부 풍경이 창 크기에 맞게 표시됩니다. 즉, 매번 각 그림이 창 풍경으로 사용됩니다. 여기서는 그림 크기가 창 크기와 동일하도록 조절됩니다.
위에서는 레이아웃 처리라는 개념을 설명합니다. 다음으로 JS를 제어합니다. 그림의 표시 간격을 다르게 하려면 JS의 setInterval 또는 setTimeout을 사용해야 합니다. 올라갑니다.)
점프할 때마다 UL 위치의 왼쪽을 조절하여 ul 아래의 풍경이 매번 다르게 표시될 수 있도록 하며, 이 왼쪽은 창의 너비에 따라 결정됩니다. 물론 왼쪽입니다. 는 -800 * 0, 두 번째는 -800*1, 세 번째는 -800*2 등입니다. 그러면 다음 코드를 얻을 수 있습니다
<script>
(function(){
var slider = document.getElementById("slider");
var imgul = slider.getElementsByTagName("ul")[0];
var imglis = imgul.getElementsByTagName("li");
var len = imglis.length;
var index = 0;
setInterval(function(){
if(index >= len){
index = 0;
}
imgul.style.left = - (800 * index) + "px";
index++;
},2000);
})();
</script>
JS 코드는 이렇게 매우 간단해 보입니다. 여기서는 2초 점프 시퀀스를 설정한 다음 점프 횟수가 사진 수보다 크거나 같으면 첫 번째 사진으로 돌아갑니다.
위 내용은 이미지 캐러셀 효과(1)를 구현하여 이미지를 점프하게 만드는 편집자의 Javascript 소개 내용입니다. 모든 분들께 도움이 되기를 바랍니다.