本案例思路:
基础布局和css样式:
- (1) 给盛放要轮播的图片的盒子绝对定位
js中的代码:
- (2) 第一张图片放在盒子最前,其余的图片放在盒子最后,点击任意一张图片时,其前面的图片部分显示,以保证轮播图左右滑动效果(否则看起来会有一点卡顿)
- (3)设置盒子位置,通过移动这个盒子的位置,产生图片移动的效果,用定时器设置轮播效果
- (4)设置延时,来达到缓慢移动的效果
本案例使用到:
- 鼠标点击事件:点击那个图片,就将其对应的图片显示完整
- $(this):代表当前操作的dom对象
- $(domObj).siblings():匹配所有该元素的兄弟元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
#app{
width: 890px;
height: 692px;
margin: 50px auto;
border: 2px solid #000000;
}
#app>div{
/* 首先将所有div的宽设置成边缘未完全显示部分的宽度 */
width: 40px;
height: 100%;
float: left;
/*延时移动*/
transition: 1s;
}
#app>div:nth-child(1) {
/* 将第一张图片设置为完全显示 */
width: 690px;
background: url(img/1.jpg);
}
#app>div:nth-child(2) {
background: url(img/2.jpg);
}
#app>div:nth-child(3) {
background: url(img/3.jpg);
}
#app>div:nth-child(4) {
background: url(img/4.jpg);
}
#app>div:nth-child(5) {
background: url(img/5.jpg);
}
#app>div:nth-child(6) {
background: url(img/6.jpg);
}
</style>
</head>
<body>
<div id="app">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<script>
$(function(){
$("#app>div").click(function(){
$(this).width(690)
// 改变当前元素兄弟元素的宽度
$(this).siblings().width(40)
})
})
</script>
</body>
</html>