效果要求
- 三张图片从左到有轮播,第三张图片播完后,再轮播第一张,循环播放。
- 每张图片都在窗口中静止1秒后再轮播。
- 点击左右两侧的小箭头可以立马开始轮播。
- 点击右下角的数字可以立马开始轮播到相应的图片。
静态的图片展示
编写思路
- 首先创造出一个显示窗口,即代码中的div。
- 导入四张图片,第一张和第四张相同,每张图片与窗口大小一致。
- 将每张图片放入一个
li
标签中,设置css使四张图片排成一排。 - 初始时,将第一张图片与窗口位置重叠。
- 将每个小箭头放入一个
li
标签以及都放入ul标签中,设置css使两个箭头在图片左右两侧。 - 将三个数字分别放入一个
li
标签以及都放入ul标签中,设置css使三个数字在图片右下角。
<html>
<head>
<meta charset="UTF-8">
<title>轮播效果</title>
<script src="js/jquery-1.8.3.min.js"></script>
<style>
*{
margin: 0 auto;
padding: 0;
}
#father{
width: 320px;
height: 180px;
overflow: hidden;
position: relative;
}
#ul1{
width: 1280px;
height: 180px;
position: absolute;
top: 0;
left: 0;
}
#ul1>li{
width: 320px;
height: 180px;
float: left;
}
#ul2{
width: 108px;
height: 36px;
position: absolute;
bottom: 5px;
right: 5px;
}
#ul2>li{
width: 26px;
height: 26px;
margin: 5px;
float: left;
line-height: 26px;
font-size: 18px;
color: white;
text-align: center;
cursor: pointer;
border-radius: 50%;
background-color: rgba(0,0,0,0.6);
}
#son1{
width: 26px;
height: 26px;
position: absolute;
top: 77px;
left: 0;
background-color: rgba(0,0,0,0.5);
line-height: 26px;
font-size: 15px;
color: white;
text-align: center;
cursor: pointer;
}
#son2{
cursor: pointer;
width: 26px;
height: 26px;
position: absolute;
top: 77px;
right: 0;
background-color: rgba(0,0,0,0.5);
line-height: 26px;
font-size: 15px;
color: white;
text-align: center;
}
li{
list-style-type: none;
}
</style>
</head>
<body>
<div id="father">
<ul id="ul1">
<!--最后多出第一张图片-->
<li><img src="images/1.jpg" width="320" height="180" /></li>
<li><img src="images/2.jpg" width="320" height="180" /></li>
<li><img src="images/3.jpg" width="320" height="180" /></li>
<li><img src="images/1.jpg" width="320" height="180" /></li>
</ul>
<ul id="ul2">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div id="son1"><</div>
<div id="son2">></div>
</div>
<script type="text/javascript" src="js/图片轮播.js">
</script>
</body>
</html>
注意:
div
标签内的元素如果脱离了标椎文档流,将不会撑开div
,但是div
的边界外隐藏的效果还是作用于标签内的元素。
动态效果
/*初始绑定*/
var isAnimate = false; //动画状态定义
var playTime = null; //跳转动画计时器
var points = [0,-320,-640,-960]; //记录火车定位
father.onmouseover = stop; //鼠标移入停止自动播放
father.onmouseout = play; //鼠标移除继续播放
$("#ul2>li").each(function(index,ele){ //每一个数字按钮绑定单击事件
$(this).click(function(){
myAnimate(points[index]);
});
});
//jquary与纯javaScript的区别:
//实现上述语句功能,如果作为纯javaScript,需要循环语句实现,
$("#son1").click(function(){ //前一张按钮绑定单击之间
if(!isAnimate){ //判断是否在动画中 意义在于防止连续点击
isAnimate=true; //“上锁”
var leftPont = parseInt($("#ul1").css("left")); //获取当前位置
if(leftPont==0){ //如果是第一张图片
$("#ul1").css("left","-960px"); //置为最后一张
}
$("#ul1").animate({'left':parseInt($("#ul1").css("left"))+320+"px"},1000,function(){
isAnimate=false; //在回调函数中“取锁” 回调函数:当动画完成后执行!
});
}
});
$("#son2").click(function(){ //下一张按钮绑定事件
myAnimate();
});
play();
/*定义函数*/
//如果toPoint不为空,则div轮播到指定图片
//如果toPoint为空,则div轮播到下一张指定图片。如果上一张图片是第四张,则在第一个if语句中先直接跳转到第一张
function myAnimate(toPoint){ //图片过渡动画函数
if(!isAnimate){ //判断是否在动画中
isAnimate=true; //“上锁”
if((parseInt($("#ul1").css("left")))-320<-960){
$("#ul1").css("left","0");
}
if(toPoint==null){
toPoint=(parseInt($("#ul1").css("left")))-320;
}
$("#ul1").animate({'left':toPoint+"px"},1000,function(){
isAnimate=false; //在回调函数中“取锁”
});
}
}
//jquary与纯javaScript的区别:
//在第一个if语句中,对于“ul1”来说作为jquary对象,比起作为纯javaScript对象,少了获取对象交给某一个变量,
// 在重新设定“ul1”的left值时,比起作为纯javaScript对象,jquary对象不需要u.style.left=i+"px";
//在第二个if语句中,对于“ul1”来说作为jquary对象,比起作为纯javaScript对象,少了获取对象交给某一个变量。
//在第三个if语句中,渐进改变“ul1”的left,如果作为纯javaScript对象以及只需要实现连续轮播,可以轻松实现
// 但是,再加上按钮控制播放,一条语句变为:
// setInterval(function(){
// var i = parseInt(u.style.left);
// i=i-2;
// if(i<-960){
// i=0;
// }
// u.style.left=i+"px";
// },10);
function play(){ //开始播放动画函数
playTime=setInterval(function(){
myAnimate();
},2000);
}
function stop(){ //停止动画函数
if(playTime!=null){
clearInterval(playTime);
}
}