WEB02_Day01(下)-jQuery实战、jQuery动画
一、jQuery实战
1.1 轮播图案例
版本一：
在页面中添加三张图片，并一字展开，隐藏浏览器滑动条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图_显示图片01</title>
<style type="text/css">
/* 设置div的尺寸大小和图片尺寸大小一致 */
div,img {
width: 1000px;
height: 400px;
}
/* 设置图片以div为参照依据 */
div {
position: relative;
/* 处理浏览器带滑动条问题 */
overflow: hidden;
}
/* 设置图片为绝对定位 */
img {
position: absolute;
}
</style>
</head>
<body>
<div>
<img src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/itemCat_banner1.png">
<img src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/itemCat_banner2.png">
<img src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/itemCat_banner3.png">
</div>
<script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
<script type="text/javascript">
//将三张图片在一字排开，不要互相之间遮挡
var imgwidth = 1000;
//for(var i = 0; i < 3 ; i++)
$("img").each(function (i) {
$(this).css("left", i * imgwidth + "px");
});
</script>
</body>
</html>
版本二：
添加定时器，设定每间隔一段事件，进行控制页面中图片元素的移动，从而实现图片轮播的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图_图片轮播02</title>
<style type="text/css">
/* 设置div的尺寸大小和图片尺寸大小一致 */
div,img {
width: 1000px;
height: 400px;
}
/* 设置图片以div为参照依据 */
div {
position: relative;
/* 处理浏览器带滑动条问题 */
overflow: hidden;
}
/* 设置图片为绝对定位 */
img {
position: absolute;
}
</style>
</head>
<body>
<div>
<img src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/itemCat_banner1.png">
<img src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/itemCat_banner2.png">
<img src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/itemCat_banner3.png">
</div>
<script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
<script type="text/javascript">
//将三张图片在一字排开，不要互相之间遮挡
var imgwidth = 1000;
//for(var i = 0; i < 3 ; i++)
$("img").each(function (i) {
$(this).css("left", i * imgwidth + "px");
});
//将图片整个切换的逻辑定义一个方法进行封装
function imgChange() {
//定义定时器对象，每间隔10毫秒进行图片的向左移动
var timer = setInterval(function () {
//遍历当前三张图片的位置
$("img").each(function () {
//获取每张图片距离左侧一个像素单位
var pos = parseInt($(this).css("left"));
//图片每次向左侧移动10像素
pos -= 10;
/*
*判断当前图片向左移动以后是否脱离的div的显示区域
* 图片的左边界，距离div左侧1000px
*/
if (pos <= -imgwidth) {
//停止定时器对象，并且让移出边界的图片的位置设置成所有图片的最后方
pos = 2000;
clearInterval(timer);
}
//将移动以后的图片位置再次赋值
$(this).css("left",pos + "px");
});