jQuery는 이미지 캐러셀 효과를 얻기 위해 수동으로 클릭합니다.
- WBOY원래의
- 2016-05-16 15:26:371334검색
이 글에서는 스킬 연습을 위해 캐러셀 이미지를 먼저 작성해봤습니다. 먼저 캐러셀을 수동으로 클릭하는 캐러셀 이미지를 작성한 다음 자동 캐러셀 이미지와 마우스오버 이미지를 천천히 깊게 써서 움직임을 멈추겠습니다. 캐러셀 이미지.
최종 수동 클릭 캐러셀 효과를 살펴보겠습니다.
1. 원리설명
(1) 첫 번째는 캐러셀 이미지의 구조입니다. 가장 바깥쪽의 큰 div를 사용하여 두 개의 작은 div 하나에는 4개의 사진이 있고 다른 작은 div에는 4개의 숫자 버튼이 있습니다.
(2) 가장 바깥쪽의 큰 div의 너비를 이미지의 너비로 설정합니다. 큰 div의 너비를 초과하는 것은 숨겨야 합니다. 그러나 이미지가 들어 있는 작은 div의 너비는 2000px로 설정됩니다. 더 큰 이미지는 4개 이미지의 왼쪽 부동을 촉진합니다
(3) 숫자 버튼을 클릭하면 버튼의 인덱스 값을 얻어 각 그림이 왼쪽으로 얼마나 이동했는지 알 수 있습니다
위 사진에서 볼 수 있듯이 4개의 사진이 가로 레이아웃으로 배치되어 있는데, 숫자 버튼을 클릭하면 숫자 버튼의 인덱스 값에 따라 사진이 상위 프레임에 표시되기 때문입니다. 상위 프레임 밖의 이미지는 숨겨집니다~~~~아직도 원리를 이해하지 못하면 피를 토할 수밖에 없습니다~~~
2. 메인 프로그램을 살펴보겠습니다
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>轮播图①（手动点击轮播）</title>
<link type="text/css" rel="stylesheet" href="css/layout.css" />
</head>
<body>
<div class="slideShow">
<!--图片布局开始-->
<ul>
<li><a href="#"><img src="img/picture01.jpg" /></a></li>
<li><a href="#"><img src="img/picture02.jpg" /></a></li>
<li><a href="#"><img src="img/picture03.jpg" /></a></li>
<li><a href="#"><img src="img/picture04.jpg" /></a></li>
</ul>
<!--图片布局结束-->
<!--按钮布局开始-->
<div class="showNav">
<span class="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<!--按钮布局结束-->
</div>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/layout.js"></script>
</body>
</html>
위의 레이아웃을 원리로 설명했습니다. 관심 있으신 분들은 직접 원리를 읽어보셔도 좋습니다~~
3. CSS 스타일
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.slideShow{
width: 346px;
height: 210px; /*其实就是图片的高度*/
border: 1px #eeeeee solid;
margin: 100px auto;
position: relative;
overflow: hidden; /*此处需要将溢出框架的图片部分隐藏*/
}
.slideShow ul{
width: 2000px;
position: relative; /*此处需注意relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动*/
}
.slideShow ul li{
float: left; /*让四张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/
width: 346px;
}
.slideShow .showNav{ /*用绝对定位给数字按钮进行布局*/
position: absolute;
right: 10px;
bottom: 5px;
text-align:center;
font-size: 12px;
line-height: 20px;
}
.slideShow .showNav span{
cursor: pointer;
display: block;
float: left;
width: 20px;
height: 20px;
background: #ff5a28;
margin-left: 2px;
color: #fff;
}
.slideShow .showNav .active{
background: #b63e1a;
}
위 스타일에서 중요한 점을 적어두었습니다. 처음에는 .slideShow ul 스타일에서 position:relative를 작성하는 것을 잊어버렸습니다. 이후 jquery 프로그램 이미지가 움직일 수 없게 되었습니다. 이 오류를 찾는 데 시간이 오래 걸렸습니다. 이 부분을 주의 깊게 살펴보시기 바랍니다~~~~
4. jQuery 프로그램
$(document).ready(function(){
var slideShow=$(".slideShow"), //获取最外层框架的名称
ul=slideShow.find("ul"),
showNumber=slideShow.find(".showNav span"),//获取按钮
oneWidth=slideShow.find("ul li").eq(0).width(); //获取每个图片的宽度
showNumber.on("click",function(){ //为每个按钮绑定一个点击事件
$(this).addClass("active").siblings().removeClass("active"); //按钮被点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉
var index=$(this).index(); //获取哪个按钮被点击，也就是找到被点击按钮的索引值
ul.animate({
"left":-oneWidth*index, //注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值index确定
})
})
})
아주 간단하다고 생각하시나요? 위 프로그램에서 주의해야 할 점은 왼쪽 속성이 왼쪽으로 이동하므로 수동 클릭의 캐러셀 효과를 얻을 수 있다는 것입니다. 음수값입니다~~~~~~~~
자동 캐러셀 효과는 다음 글에서 전해드릴 테니 놓치지 마시길 바랍니다.