使用JavaScript实现简单的滑动窗口。效果图如下,可以左右滑动。
源代码已经上传到github上了,地址如下:https://github.com/dongxiaoshi/slidingWindow
主体代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
list-style: none;
}
.banner {
width: 50%;
height: 300px;
margin-left:30%;
border: 1px solid red;
overflow: hidden;
position: relative;
}
.banner .img {
width: 600%;
position: absolute;
}
.banner .img li{
float: left;
}
.banner .img img {
width: 100%;
height: 300px;
border: 1px solid yellow;
}
.banner .num {
position: absolute;
width: 100%;
border: 1px solid red;
bottom: 10px;
left: 0px;
text-align: center;
}
.banner .num li {
width: 10px;
height: 10px;
background-color: #96E555;
border-radius: 50%;
/*float: left;*/
display: inline-block;
margin: 0px 3px;
cursor: pointer;
}
.banner .num li.on {
background-color: #FF0000;
}
.banner .btn {
width: 30px;
height: 50px;
background-color: gray;
opacity: 0.5;
filter: alpha(opacity:0.5);
position: absolute;
top: 50%;
margin-top: -25px;
cursor: pointer;
line-height: 50px;
font-size: 40px;
color: #fff;
display: none;
}
.banner .btn_l{
left: 0px;
}
.banner .btn_r{
right: 0px;
}
.banner:hover .btn {
display: block;
}
</style>
</head>
<body>
<div class="banner">
<ul class="img">
<li><img src="bannerimg/banner1.jpg"/></li>
<li><img src="bannerimg/banner2.jpg"/></li>
<li><img src="bannerimg/banner3.jpg"/></li>
<li><img src="bannerimg/banner4.jpg"/></li>
</ul>
<ul class="num">
</ul>
<div class="btn btn_l"><</div>
<div class="btn btn_r">></div>
</div>
</body>
<script type="text/javascript" src="../js/jquery-2.1.0.js" ></script>
<script type="text/javascript">
var i=0;
var t;
var imgWidth = $('.banner').width();
// alert(imgWidth);
$('.banner img').width(imgWidth);
// 克隆第一张图片
var clone = $('.banner .img li').first().clone();
// 复制到列表的最后
$('.banner .img').append(clone);
var size =$('.banner .img li').size();
console.log(size);
for(var j=0;j<size-1;j++){
$('.banner .num').append("<li></li>");
}
$('.banner .num li').first().addClass('on');
// 移动事件
function move(){
if(i == size){
$('.banner .img').css({left:0});
i = 1;
}
// 箭头点击过头了
if(i == -1){
$('.banner .img').css({left:-(size-1) * imgWidth});
i = size -2;
}
$('.banner .img').stop().animate({left : -i * imgWidth},500);
if(i == size -1){
$('.banner .num li').eq(0).addClass('on').siblings().removeClass('on');
} else {
$('.banner .num li').eq(i).addClass('on').siblings().removeClass('on');
}
}
// 鼠标悬停
$('.banner').hover(function(){
clearInterval(t); // 鼠标悬停的时候
},function(){
t = setInterval(function(){
i++;
move();
},2000); // 鼠标移出
})
// 鼠标滑入事件
$('.banner .num li').hover(function(){
var index = $(this).index();//获取当前索引值
i = index;
$('.banner .img').stop().animate({left : -index * imgWidth},500);
$(this).addClass('on').siblings().removeClass('on');
})
// 向左按钮
$('.banner .btn_l').click(function(){
i--;
move();
})
// 向右按钮
$('.banner .btn_r').click(function(){
i++;
move();
})
t = setInterval(function(){
i++;
move();
},2000);
$(window).resize(function(){
// var a = $(window).width();
imgWidth = $('.banner').width();
$('.banner img').width(imgWidth);
move();
})
</script>
</html>