发表于： 2017-07-04 23:42:28
0 967
css task8 如何实现轮播图
成都第160期
1.背景介绍
轮播图，是由网页banner进化而来，通常放在屏幕最显眼的位置，以大图显示。随着网页中需要推广的信息越来越多，为了相互妥协，轮播图应运而生。总而言之，轮播图就是可以切换的一块信息。
2.知识剖析
轮播图一般由logo，底部指示器和左右切换按键组成。
3.常见问题
如何制作轮播图
4.解决方案
制作轮播图的方法有两种:css轮播或js轮播
5.编码实战
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.banner-wrapper{
margin:0;
width:900px;
height: 300px;
border: 5px solid lightpink;
margin:auto;
overflow: hidden;
position: relative;
}
.banner-wrapper:hover button{
display: block;
}
button{
cursor: pointer;
display: none;
width:100px;
height:100%;
background-color: transparent;
z-index: 2;
position: absolute;
border:none;
color: white;
font-size: 2rem;
outline: none;
}
button:hover{
background-color: rgba(0,0,0,0.1);
}
.box{
position: absolute;
bottom:15px;
left: 50%;
transform: translate(-50%);
min-width: 300px;
height: 20px;
background-color: transparent;
z-index: 2;
text-align: center;
}
.box span{
display: inline-block;
width:15px;
height:15px;
border: 1px solid white;
border-radius: 50%;
background-color: transparent;
margin-left:10px;
margin-right:10px;
vertical-align: middle;
cursor: pointer;
}
.box .white-span{
background-color: white;
}
.left-button{
left: 0;
top: 50%;
transform: translate(0px,-50%);
}
.right-button{
right: 0;
top: 50%;
transform: translate(0px,-50%);
}
img{
width: 900px;
height:300px;
}
ul{ width:900px;
top: 0px;
margin:0;
padding: 0;
position: absolute;
}
li{
list-style-type: none;
float: left;
height: 300px;
}
</style>
</head>
<body>
<div>
<button><</button>
<button>></button>
<div>
</div>
<ul>
<li><img src="banner1.jpg" alt="nothing"></li>
<li><img src="banner2.jpg" alt="nothing"></li>
<li><img src="banner3.jpg" alt="nothing"></li>
<li><img src="banner4.jpg" alt="nothing"></li>
<li><img src="banner1.jpg" alt="nothing"></li>
</ul>
</div>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
function red(y){//定义动画函数
$("ul").animate({top:y});
black();//给小圆点添加样式
};
var x=0;
function blue(){//设置播放规则
if(x<1200){//不是最后一张正常播放动画
x=x+300;
var y="-"+x+"px";
red(y);
}
else{//如果是最后一张，更换整个位置并播放动画
$("ul").css("top","0px")
x=300;
var y="-"+x+"px";
red(y);
};
};
function yellow(){//上一页函数
if(x>0){//不是最后一张正常播放动画
x=x-300;
var y="-"+x+"px";
red(y);
}
else{//如果是最后一张，更换整个位置并播放动画
$("ul").css("top","-1200px")
x=900;
var y="-"+x+"px";
red(y);
}
}
time=setInterval(blue,3000); //设置间隔时间
$(".banner-wrapper").mouseover(function(){//鼠标移入阻止事件
clearInterval(time),function(){
time=setInterval(blue,5000);
}
})
$(".banner-wrapper").mouseleave(function(){//鼠标移出继续事件
time=setInterval(blue,5000);
})
//左右两侧按钮事件
$(".right-button").click(function(){//上一张
if(!$("ul").is(":animated")){//只有当动画完成的时候才会执行函数
blue();
}
})
$(".left-button").click(function(){//下一张
if(!$("ul").is(":animated")){//只有当动画完成的时候才会执行函数
yellow();
}
})
//生成小圆点函数
function purple(){
var l=$("ul").children("li").length-1;//获得图片张数
var html="";
for(i=0;i<l;i++){
html+="<span></span>"
}
$(".box").append(html);
}
purple();//运行生成小圆点函数
black();
//给小圆点添加样式函数
function black(){
if(x==0||x==1200){//当时第一张图片的时候
var b=$(".box").children("span").eq(0)
$(".box").children("span").eq(0).addClass("white-span");
$(".box").children("span").not(b).removeClass("white-span");
}
else{//其他图片的时候
var b=$(".box").children("span").eq(x / 300)
$(".box").children("span").eq(x / 300).addClass("white-span")
$(".box").children("span").not(b).removeClass("white-span");
}
}
$(".box").children("span").click(function(){//点击小圆点跳转到相对应的页面
var c=$(this).index()*300;
x=c;//同步小圆点
var y="-"+c+"px";
red(y);
})
})
</script>
</body>
</html>
6.扩展思考
如何设计轮播图才能吸引到用户
1.让轮播图看起来像是站点的一部分。
2.给予清晰的操作反馈和内容预期
3.用轻量的图片，复杂的大图导致网站性能低，加载速度慢
7.参考文献
参考一：You-Dont-Need-JavaScript
参考二：bootstrap组件-carousel
参考三：你还在用轮播图吗
8.更多讨论
返回列表
评论