加了很多技术群,前端的,程序的,运维的等等。。。
经常有入门菜鸟问 图片轮播怎么实现。
我总是很无奈的说,这个百度上一搜一大堆视频教程,为毛不看看呢?
后来有人竟然说看不懂。我也是醉了。
于是就自己花了 5分钟。写了一个demo 很简单,甚至可以更精简。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function(){
var this_num = 0 ; // 当前下标
var b_li_count = 0; // 图片总数
var left_num = 0; // 当前偏移量
// 计算总数
b_li_count = $("#banner .banner_box ul li").length;
b_li_count = b_li_count-1; // 减去1 与数组下标相符
// 点击右边 图片
$(".banner_right").click(function(){
$("#banner .banner_box").stop();
this_num++;
// 如果当前下标 大于总数
if(this_num>b_li_count){
this_num = 0;
left_num =0;
}else{
left_num = this_num*1000*-1;
}
$("#banner .banner_box").animate({
left: left_num
}, 500);
});
// 点击左边图片
$(".banner_left").click(function(){
$("#banner .banner_box").stop();
this_num--;
// 计算值
if(this_num<0){
this_num = b_li_count;
left_num = b_li_count*1000*-1;
}else{
left_num = this_num*1000*-1;
}
$("#banner .banner_box").animate({
left: left_num
}, 500);
});
})
</script>
</head>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#banner{
height: 500px;
width: 1000px;
position: relative;
background: #222;
overflow: hidden;
margin: 0px auto;
}
.banner_left{
width: 60px;
height: 100%;
margin: 0px 30px;
display: block;
background: transparent url("slider-arrow.png") no-repeat scroll 0px 50%;
position: absolute;
top: 0px;
z-index: 10;
cursor: pointer;
text-indent: -9999px;
opacity: 0;
}
.banner_right{
width: 60px;
height: 100%;
margin: 0px 30px;
display: block;
background: transparent url("slider-arrow.png") no-repeat scroll 0px 50%;
background-position: 100% 50%;
position: absolute;
top: 0px;
right: 0px;
z-index: 10;
cursor: pointer;
text-indent: -9999px;
opacity: 0;
}
.banner_left:hover,.banner_right:hover{
opacity: 1;
}
.banner_box{
width: 9999999999px;
position: absolute;
left: 0px;
top: 0px;
}
.banner_box ul li{
float: left;
display: block;
}
.banner_box ul li a{
border: 0px none;
display: block;
}
.banner_box ul li a img{
border: 0px none;
width: 1000px;
height: 500px;
}
</style>
<body>
<div id="banner">
<div class="banner_box">
<ul>
<li><a href=""><img src="01.jpg"></a></li>
<li><a href=""><img src="02.jpg"></a></li>
<li><a href=""><img src="03.jpg"></a></li>
<li><a href=""><img src="04.jpg"></a></li>
</ul>
</div>
<div class="banner_left"></div>
<div class="banner_right"></div>
</div>
</body>
</html>