<!DOCTYPE html>
<html>
<head>
<!--声明当前页面的编码集charset=utf-8,中文编码集(charset=gbk,gb2312),国际编码集(charset=utf-8)-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--声明当前页面的三要素-->
<title>越努力越幸运-凡事老师</title>
<meta name="Keywords" content="关键词,关键词" />
<meta name="Description" content="描述" />
<!--Css,Js-->
<style type="text/css">
*{margin:0px;padding:0px;}
/*banner style*/
.banner{width:989px;height:410px;
margin:100px auto 0px;/*元素外边距*/position:relative;/*定位 相对定位 参照物*/}
/*button style*/
.banner .button img{width:45px;height:45px;
position:absolute;/*绝对定位 对象 控制漂浮方向*/
top:50%;/*50%包含本身宽度、高度一半*/margin-top:-23px;z-index:20;}
.banner .button img.prev{left:0;}
.banner .button img.next{right:0;}
/*con style*/
.banner .con li{list-style:none;position:absolute;/*绝对定位*/}
.banner .con li img{width:100%;height:100%;}/*图片宽高根据需求读取宽高*/
/*中间显示区块图片*/
.banner .con li.center{width:640px;height:270px;top:70px;left:170px;
z-index:15;}
/*左边、右边预备区域图片*/
.banner .con li.yvbei{width:540px;height:230px;z-index:10;top:90px;}
.banner .con li.left{left:0;}
.banner .con li.right{left:450px;}
/*切换图片区域*/
.banner .con li.content{width:540px;height:230px;left:200px;top:90px;}
</style>
</head>
<body>
<!--
小案例操作思路:
1、构思、3D轮播图里面有那些区块? 盒子、图片内容、左右切换按钮、浏览器脚本操作
2、通过div+css知识 把自己构思所想 实现布局
3、考虑Js操作
-->
<!--banner start-->
<div class="banner">
<!--图片内容、左右按钮、底部选显卡按钮-->
<!--网页中元素如何添加漂浮状态:
1、浮动(左浮动、右浮动)
2、定位(固定定位、相对定位、绝对定位)
-->
<!--button-->
<div class="button">
<!--img图片元素四要素:路径(src)、width(宽度)、height(高度)、图片描述(alt)-->
<img src="images/left.png" width="45" height="45" alt="prev" class="prev" />
<img src="images/right.png" width="45" height="45" alt="next" class="next"/>
</div>
<!--con-->
<ul class="con">
<!--
网页上3D效果:由视觉差 Css3景深 Css层级关系
内容:中间显示区块、左右预备切换区块、切换内容区块
-->
<!--中间显示区域-->
<li class="center"><img src="images/1.jpg" /></li>
<!--右边预备图片区域-->
<li class="yvbei right"><img src="images/2.jpg" /></li>
<!--内容切换区域-->
<li class="content"><img src="images/3.jpg" /></li>
<li class="content"><img src="images/4.jpg" /></li>
<li class="content"><img src="images/5.jpg" /></li>
<li class="content"><img src="images/6.jpg" /></li>
<li class="content"><img src="images/7.jpg" /></li>
<li class="content"><img src="images/8.jpg" /></li>
<li class="content"><img src="images/9.jpg" /></li>
<!--左边预备图片区域-->
<li class="yvbei left"><img src="images/10.jpg" /></li>
</ul>
</div>
<!--edn banner-->
<!--引入外部Jquery类库文件-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
//console.log($);
/*
1、预先创建好需要用到变量名称
*/
//创建序列号变量
var _index = 0;
var time = 0;//时间变量
var a = 0;// 图片张数变量
/*图片属性数组 存放图片属性:宽度、高度、Top、left、z-index*/
/*数组示例:
arr = [数据,数据,数据,.....n个数据];
0 1 2 3 4 .... n(index)
*/
var arrwidth = [];//图片宽度容器
var arrHeight = [];//图片高度容器
var arrTop = [];//图片悬浮状态位置 Top值容器
var arrLeft = [];//图片悬浮状态位置 Left值容器
var arrZindex = [];//图片悬浮状态层级关系 z-index值容器
/*设定上一张操作、下一张操作*/
time = new Date();//获取本地时间
//console.log(time);
//左切换
$(".banner .button img.prev").click(function(){
if(new Date - time>500){
z(0);
}
time = new Date();
});
//右切换 .click:点击动作 执行操作绑定方法,把动作存入到方法里面
$(".banner .button img.next").click(function(){
if(new Date - time>500){
z(1);
}
time = new Date();
});
//找对象 图片内容容器 图片元素
/*
Js获取对象常用方法:getElementById();通过元素ID获取元素
JQ获取对象对象常用方法 $(): ("标签名、id、类名")
*/
//获取图片内容对象
var obj = $(".banner .con li");//获取图片内容对象
//获取图片容器长度
var len = obj.length;// .length;获取对象长度
//console.log(len);
//简单封装轮播模块/功能
/*
function:方法
z():方法名称
lb:方法名称 传入参数
*/
function z(lb){
/*
1、设置容器数据
通过for循环找到ul li元素 for()循环 i<len;:循环动作通过对象长度执行
i++:自增 1 1+1 1+1+1 1 2 3 4 5 6.... 10 len:1~10*/
for(var i =0;i<len;i++){
//动态获取li宽度、高度、层级、top、left obj = li
arrwidth[i] = obj.eq(i).css("width");//返回li宽度属性 .css()设置/返回 css样式
arrHeight[i] = obj.eq(i).css("height");
arrTop[i] = obj.eq(i).css("top");
arrLeft[i] = obj.eq(i).css("left");
arrZindex[i] = obj.eq(i).css("z-index");
}
//2、确认用户切换操作(左切换/右切换) 默认第一张、最后一张bug处理
/*
序列号、元素长度区别:
序列号:0.... n++....; 获取序列号.index();
长度:1....n++....; 1-1 = 0; 获取长度.length-1; 长度-1 = 序列号×
*/
for(var i = 0;i<len;i++){
//判断用户操作按钮 if:判断
if(lb==0){// 固定 = 赋值 == 左边等于右边,相等 左按钮
if(i==0){//默认第一张图片
a = 9;//强制返回最后一张图片
}else{
a = i-1;//i--;上一张操作
}
}
if(lb==1){//右按钮
if(i==9){//默认最后一张图片
a = 0;
}else{
a = i+1;//i++;下一张
}
}
//元素样式通过Jquery动态操作
//动态修改li层级关系
obj.eq(i).css({"z-index":arrZindex[a]});
//动态修改li宽度、高度、Top、Left样式 .animate({属性名称:属性值});自定义动画函数
obj.eq(i).animate({
"width":arrwidth[a],
"height":arrHeight[a],
"top":arrTop[a],
"left":arrLeft[a]
},500);
}
}
</script>
</body>
</html>
<html>
<head>
<!--声明当前页面的编码集charset=utf-8,中文编码集(charset=gbk,gb2312),国际编码集(charset=utf-8)-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--声明当前页面的三要素-->
<title>越努力越幸运-凡事老师</title>
<meta name="Keywords" content="关键词,关键词" />
<meta name="Description" content="描述" />
<!--Css,Js-->
<style type="text/css">
*{margin:0px;padding:0px;}
/*banner style*/
.banner{width:989px;height:410px;
margin:100px auto 0px;/*元素外边距*/position:relative;/*定位 相对定位 参照物*/}
/*button style*/
.banner .button img{width:45px;height:45px;
position:absolute;/*绝对定位 对象 控制漂浮方向*/
top:50%;/*50%包含本身宽度、高度一半*/margin-top:-23px;z-index:20;}
.banner .button img.prev{left:0;}
.banner .button img.next{right:0;}
/*con style*/
.banner .con li{list-style:none;position:absolute;/*绝对定位*/}
.banner .con li img{width:100%;height:100%;}/*图片宽高根据需求读取宽高*/
/*中间显示区块图片*/
.banner .con li.center{width:640px;height:270px;top:70px;left:170px;
z-index:15;}
/*左边、右边预备区域图片*/
.banner .con li.yvbei{width:540px;height:230px;z-index:10;top:90px;}
.banner .con li.left{left:0;}
.banner .con li.right{left:450px;}
/*切换图片区域*/
.banner .con li.content{width:540px;height:230px;left:200px;top:90px;}
</style>
</head>
<body>
<!--
小案例操作思路:
1、构思、3D轮播图里面有那些区块? 盒子、图片内容、左右切换按钮、浏览器脚本操作
2、通过div+css知识 把自己构思所想 实现布局
3、考虑Js操作
-->
<!--banner start-->
<div class="banner">
<!--图片内容、左右按钮、底部选显卡按钮-->
<!--网页中元素如何添加漂浮状态:
1、浮动(左浮动、右浮动)
2、定位(固定定位、相对定位、绝对定位)
-->
<!--button-->
<div class="button">
<!--img图片元素四要素:路径(src)、width(宽度)、height(高度)、图片描述(alt)-->
<img src="images/left.png" width="45" height="45" alt="prev" class="prev" />
<img src="images/right.png" width="45" height="45" alt="next" class="next"/>
</div>
<!--con-->
<ul class="con">
<!--
网页上3D效果:由视觉差 Css3景深 Css层级关系
内容:中间显示区块、左右预备切换区块、切换内容区块
-->
<!--中间显示区域-->
<li class="center"><img src="images/1.jpg" /></li>
<!--右边预备图片区域-->
<li class="yvbei right"><img src="images/2.jpg" /></li>
<!--内容切换区域-->
<li class="content"><img src="images/3.jpg" /></li>
<li class="content"><img src="images/4.jpg" /></li>
<li class="content"><img src="images/5.jpg" /></li>
<li class="content"><img src="images/6.jpg" /></li>
<li class="content"><img src="images/7.jpg" /></li>
<li class="content"><img src="images/8.jpg" /></li>
<li class="content"><img src="images/9.jpg" /></li>
<!--左边预备图片区域-->
<li class="yvbei left"><img src="images/10.jpg" /></li>
</ul>
</div>
<!--edn banner-->
<!--引入外部Jquery类库文件-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
//console.log($);
/*
1、预先创建好需要用到变量名称
*/
//创建序列号变量
var _index = 0;
var time = 0;//时间变量
var a = 0;// 图片张数变量
/*图片属性数组 存放图片属性:宽度、高度、Top、left、z-index*/
/*数组示例:
arr = [数据,数据,数据,.....n个数据];
0 1 2 3 4 .... n(index)
*/
var arrwidth = [];//图片宽度容器
var arrHeight = [];//图片高度容器
var arrTop = [];//图片悬浮状态位置 Top值容器
var arrLeft = [];//图片悬浮状态位置 Left值容器
var arrZindex = [];//图片悬浮状态层级关系 z-index值容器
/*设定上一张操作、下一张操作*/
time = new Date();//获取本地时间
//console.log(time);
//左切换
$(".banner .button img.prev").click(function(){
if(new Date - time>500){
z(0);
}
time = new Date();
});
//右切换 .click:点击动作 执行操作绑定方法,把动作存入到方法里面
$(".banner .button img.next").click(function(){
if(new Date - time>500){
z(1);
}
time = new Date();
});
//找对象 图片内容容器 图片元素
/*
Js获取对象常用方法:getElementById();通过元素ID获取元素
JQ获取对象对象常用方法 $(): ("标签名、id、类名")
*/
//获取图片内容对象
var obj = $(".banner .con li");//获取图片内容对象
//获取图片容器长度
var len = obj.length;// .length;获取对象长度
//console.log(len);
//简单封装轮播模块/功能
/*
function:方法
z():方法名称
lb:方法名称 传入参数
*/
function z(lb){
/*
1、设置容器数据
通过for循环找到ul li元素 for()循环 i<len;:循环动作通过对象长度执行
i++:自增 1 1+1 1+1+1 1 2 3 4 5 6.... 10 len:1~10*/
for(var i =0;i<len;i++){
//动态获取li宽度、高度、层级、top、left obj = li
arrwidth[i] = obj.eq(i).css("width");//返回li宽度属性 .css()设置/返回 css样式
arrHeight[i] = obj.eq(i).css("height");
arrTop[i] = obj.eq(i).css("top");
arrLeft[i] = obj.eq(i).css("left");
arrZindex[i] = obj.eq(i).css("z-index");
}
//2、确认用户切换操作(左切换/右切换) 默认第一张、最后一张bug处理
/*
序列号、元素长度区别:
序列号:0.... n++....; 获取序列号.index();
长度:1....n++....; 1-1 = 0; 获取长度.length-1; 长度-1 = 序列号×
*/
for(var i = 0;i<len;i++){
//判断用户操作按钮 if:判断
if(lb==0){// 固定 = 赋值 == 左边等于右边,相等 左按钮
if(i==0){//默认第一张图片
a = 9;//强制返回最后一张图片
}else{
a = i-1;//i--;上一张操作
}
}
if(lb==1){//右按钮
if(i==9){//默认最后一张图片
a = 0;
}else{
a = i+1;//i++;下一张
}
}
//元素样式通过Jquery动态操作
//动态修改li层级关系
obj.eq(i).css({"z-index":arrZindex[a]});
//动态修改li宽度、高度、Top、Left样式 .animate({属性名称:属性值});自定义动画函数
obj.eq(i).animate({
"width":arrwidth[a],
"height":arrHeight[a],
"top":arrTop[a],
"left":arrLeft[a]
},500);
}
}
</script>
</body>
</html>