前面我有篇笔记是小米淡入淡出轮播图的,现在顺手附上淘宝首页的无缝滚动轮播图,这是源码地址 https://github.com/luoyu6/slideshow_taobao
暂时没有效果图,劳烦大家去下载源码自己看一下了,这个轮播图细节处理的还是比较好的,点击很快的时候,也不会出现空白的情况
代码在这里:
<!DOCTYPE HTML>
<html>
<head>
<title>淘宝网轮播图</title>
<meta charset="utf-8">
<meta name="Author" content="luoyu">
<style type='text/css'>
* {
margin: 0;
padding: 0;
}
#banner {
width: 520px;
height: 280px;
margin: 20px auto;
border: 1px solid red;
position: relative;
}
#banner .pic {
width: 100%;
height: 100%;
overflow: hidden;
}
li {
list-style: none;
}
#banner .pic ul {
width: 1000%;
overflow: hidden;
margin-left: -520px;
}
#banner .pic ul li {
float: left;
}
#banner .tab {
width: 70px;
height: 14px;
background: #fff;
background: rgba(255, 255, 255, 0.5);
position: absolute;
left: 50%;
margin-left: -35px;
bottom: 10px;
border-radius: 7px;
}
#banner .tab ul li {
width: 10px;
height: 10px;
border-radius: 100%;
background: #999;
float: left;
margin: 2px 2px;
cursor: pointer;
}
#banner .tab ul li.on {
background: #f60;
}
#banner .btn {
display: none;
}
#banner .btn div {
width: 40px;
height: 40px;
background: #000;
background: rgba(0, 0, 0, 0.3);
color: #fff;
font-size: 26px;
font-weight: bold;
text-align: center;
line-height: 40px;
cursor: pointer;
position: absolute;
top: 50%;
margin-top: -20px;
}
#leftBtn {
left: 5px;
}
#rightBtn {
right: 5px;
}
#banner .btn div.hover {
background: rgba(0, 0, 0, 0.6)
}
</style>
</head>
<body>
<div id="banner">
<div class="pic">
<ul>
<li>
<a href="#"><img src="img/5.jpg" /></a>
</li>
<li>
<a href="#"><img src="img/1.jpg" /></a>
</li>
<li>
<a href="#"><img src="img/2.jpg" /></a>
</li>
<li>
<a href="#"><img src="img/3.jpg" /></a>
</li>
<li>
<a href="#"><img src="img/4.jpg" /></a>
</li>
<li>
<a href="#"><img src="img/5.jpg" /></a>
</li>
<li>
<a href="#"><img src="img/1.jpg" /></a>
</li>
</ul>
</div>
<div class="tab">
<ul>
<li class="on"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="btn">
<div id="leftBtn"><</div>
<div id="rightBtn">></div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.12.1.min.js"></script>
<script type="text/javascript">
$(function() {
var $tabLi = $('#banner .tab li');
var $picUl = $('#banner .pic ul');
var $banner = $('#banner');
var $btn = $('#banner .btn');
var $btnDiv = $('#banner .btn div');
var imgWidth = $('#banner .pic li').width();
var index = 0;
var timer
var nowTime = new Date();
$tabLi.click(function() {
index = $(this).index();
$(this).addClass('on').siblings().removeClass('on');
$picUl.animate({
marginLeft: -imgWidth * (index + 1) + 'px'
}, 300);
});
$banner.hover(function() {
$btn.show();
clearInterval(timer);
}, function() {
$btn.hide();
auto();
});
$btnDiv.hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
}).click(function() {
if(new Date() - nowTime > 350) {
nowTime=new Date();
var i = $(this).index();
i ? index++ : index--;
fn();
}
}).mousedown(function() {
return false;
});
function fn() {
var liIndex = index;
if(liIndex > $tabLi.length - 1) {
liIndex = 0;
} else if(liIndex < 0) {
liIndex = $tabLi.length - 1
}
console.log(index)
$tabLi.eq(liIndex).addClass('on').siblings().removeClass('on');
$picUl.animate({
marginLeft: -imgWidth * (index + 1)
}, 300, function() {
if(index > $tabLi.length-1) {
$picUl.css({
'margin-left': -imgWidth
});
index = 0;
} else if(index < 0) {
$picUl.css({
'margin-left': -imgWidth * ($tabLi.length)
});
index = $tabLi.length - 1;
}
})
}
auto();
function auto() {
timer = setInterval(function() {
index++;
fn();
}, 1000);
}
});
</script>
</body>
</html>