1.这是我第一次发博客咯！看到本文章后不喜勿喷，有什么需要改进的地方请多多指教！
2.今天和大家分享一下2D banner，代码如下，注释都有。因为本地测试和上传到博客环境不太一样，样式变化比较大，样式表写的比较罗嗦！还望见谅！
3.我仅仅是在chrome浏览器上测试通过，所以请大家用chrome浏览器查看可能效果更好，其他浏览器兼容可能会有问题！
4.最后,效果图在底部
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="Keywords" content=""/>
<meta name="Description" content=""/>
<title> 2D Banner</title>
<style type="text/css">
*{padding:0;margin:0;}
body{
font-family:"微软雅黑";
background:url("http://images.cnblogs.com/cnblogs_com/zhangbin-java/872130/t_11.jpg");
background-size:cover
}
#banner ul{
margin-left:0;
}
#banner ul li{
list-style:none;
}
#banner_index ul li {
list-style:none;
}
.banner{
padding:0;
margin:0;
border:1px solid red;
width:600px;
height:250px;
margin:30px auto;
overflow:hidden;
position:relative;
}
.banner ul{
width:1000%;
height:250px;
position:absolute;
}
.banner li{
float:left;
}
.banner a{
display:block;
width:52px;
height:30px;
background:#633;
color:#fff;
font-size:16px;
text-decoration:none;
line-height:30px;
text-align:center;
}
.banner .prev{
position:absolute;
top:48%;
left:10px;
z-index:1;
}
.banner .next{
position:absolute;
top:48%;
right:10px;
}
.banner_index ul{
position:relative;
top:-65px;
left:47%;
}
.banner_index ul li{
width:20px;
height:20px;
border-radius:100%;
color:#000;
font-size:16px;
text-align:center;
float:left;
margin:5px;
cursor:pointer;
line-height:20px;
}
.bag_nor{
background:#8EA221;
}
.bag{
background:#29921E;
}
</style>
</head>
<body>
<div class="banner" id="banner">
<a href="javascript:void(0);" class="prev">上一个</a>
<ul>
<li><img src="//bbsmax.ikafan.com/static/L3Byb3h5L2h0dHAvaW1hZ2VzLmNuYmxvZ3MuY29tL2NuYmxvZ3NfY29tL3poYW5nYmluLWphdmEvODcyMTMwL3RfMS5qcGc=.jpg" width=600 height=250/></li>
<li><img src="//bbsmax.ikafan.com/static/L3Byb3h5L2h0dHAvaW1hZ2VzLmNuYmxvZ3MuY29tL2NuYmxvZ3NfY29tL3poYW5nYmluLWphdmEvODcyMTMwL3RfMi5qcGc=.jpg" width=600 height=250/></li>
<li><img src="//bbsmax.ikafan.com/static/L3Byb3h5L2h0dHAvaW1hZ2VzLmNuYmxvZ3MuY29tL2NuYmxvZ3NfY29tL3poYW5nYmluLWphdmEvODcyMTMwL3RfMy5qcGc=.jpg" width=600 height=250/></li>
<li><img src="//bbsmax.ikafan.com/static/L3Byb3h5L2h0dHAvaW1hZ2VzLmNuYmxvZ3MuY29tL2NuYmxvZ3NfY29tL3poYW5nYmluLWphdmEvODcyMTMwL3RfNC5qcGc=.jpg" width=600 height=250/></li>
</ul>
<a href="javascript:void(0);" class="next">下一个</a>
</div>
<div class="banner_index" id="banner_index">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script type="text/javascript" src="http://files.cnblogs.com/files/zhangbin-java/jquery-1.11.3.js"></script>
<script type="text/javascript">
$(function(){
var $li = $(".banner_index ul").find("li");
$li.addClass("bag_nor");//给轮播的四个按钮添加默认样式
var $li_1 = $li.eq(0);
$li_1.addClass("bag");//第一张图片加载的时候就轮播了，默认样式不同
var len = $(".banner ul").find("li").length;//获取图片的个数
var index = 0;
var width = $(".banner ul li").eq(0).width();//获取图片的宽度（每张图一样宽）
/*给“下一个”按钮添加单机事件*/
$(".banner").find(".next").on("click",function(){
index++;
if(index == len)index = 0;//当轮播到最后一张时，重头开始轮播
/***两种不同的轮播效果***/
//$(".banner ul").css("left",-width*index);
$(".banner ul").animate({left:-width*index},200);
/**点击“上一个” 、“下一个”按钮时，轮播图下方的四个按钮颜色也应该跟着变化 **/
$li.removeClass("bag");//每轮播一次就把当前的按钮样式去掉
$li.eq(index).addClass("bag");//给下一个按钮添加样式
});
/*给“上一个”按钮添加单机事件*/
$(".banner").find(".prev").on("click",function(){
index--;
if(index < 0)index = len-1;
//$(".banner ul").css("left",-width*index);
$(".banner ul").animate({left:-width*index},200);
$li.removeClass("bag");
$li.eq(index).addClass("bag");
});
/*给下方的四个轮播按钮添加单击事件*/
$(".banner_index ul").find("li").each(function(){
$(this).click(function(){
$li.removeClass("bag");
$(this).addClass("bag");
index = ($(this).text())-1;
//$(".banner ul").css("left",-width*index)
$(".banner ul").animate({left:-width*index},200);
})
});
});
</script>
</body>
</html>
- 1
- 2
- 3
- 4
//