无缝轮播图在项目中的应用(利用Ajax获取数据)
代码实现
1.HTML布局
<!-- banner -->
<div id="banner" class="fl">
<!-- banner list -->
<ul class="bannerlist">
<!-- <li>
<img src="./img/banner-1.jpg" alt="banner">
</li>
<li>
<img src="./img/banner-2.jpg" alt="banner">
</li>
<li>
<img src="./img/banner-3.jpg" alt="banner">
</li>
<li>
<img src="./img/banner-4.jpg" alt="banner">
</li>
<li>
<img src="./img/banner-5.jpg" alt="banner">
</li>
<li>
<img src="./img/banner-6.jpg" alt="banner">
</li> -->
</ul>
<!-- shift list -->
<p class="shiftlist">
<!-- <span class = "active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span> -->
</p>
<!-- left arrow and right arrow -->
<button class="left"><</button>
<button class="right">></button>
</div>
2.CSS样式
.classificationnav #banner{
width: 1366px;
height: 393px;
cursor: pointer;
overflow: hidden;
position: relative;
}
.classificationnav #banner .bannerlist{
width: 8196px;
height: 393px;
position: absolute;
left: 0;
top: 0;
}
.classificationnav #banner .bannerlist > li{
width: 1366px;
height: 393px;
float: left;
}
.classificationnav #banner .bannerlist > li > img{
width: 1366px;
height: 393px;
}
.classificationnav #banner .shiftlist{
width: 100%;
height: 5px;
position: absolute;
bottom: 25px;
text-align: center;
}
.classificationnav #banner .shiftlist span{
width: 50px;
height: 100%;
background-color: #cccccc;
display: inline-block;
margin-right: 5px;
}
.classificationnav #banner .shiftlist span.active{
background-color: #ff4400;
}
.classificationnav #banner > button{
width: 50px;
height: 100px;
line-height: 100px;
background-color: rgba(204, 204, 204, .7);
position: absolute;
font-size: 20px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
display: none;
}
.classificationnav #banner > .left{
left: 323px;
}
.classificationnav #banner > .right{
right: 210px;
}
3.Javascript功能实现
// 2.Realization of rotation banners
// 2.1 Ajax request address data
ajax('get', './data/banner.json','',function(res){
// console.log(res);
// transform data
var bannerUrl = JSON.parse(res);
// console.log(bannerUrl);
// 2.2 Data rendering to the banner
// Get banner ul span
var banner = document.getElementById('banner');
// console.log(banner);
var bannerlist = banner.querySelector('.bannerlist');
var shiftlist = banner.querySelector('.shiftlist');
// console.log(bannerlist, shiftlist);
// Declare variables to store address
var bannerImage = '', shift = '';
for(var i = 0; i < bannerUrl.length; i++){
// console.log(bannerUrl[i]);
bannerImage += '<li><img src="'+ bannerUrl[i] +'" alt="banner"></li>';
shift += '<span></span>'
}
// Rendering to the father element
bannerlist.innerHTML = bannerImage;
shiftlist.innerHTML = shift;
// 2.3 Initialize banner styles
var spans = shiftlist.getElementsByTagName('span');
spans[0].className = 'active';
// Seamless carousel puls last banner
bannerlist.innerHTML += '<li><img src="'+ bannerUrl[0] +'" alt="banner"></li>';
// Make the banner move
// Get the width of banner
var cw = banner.clientWidth;
// console.log(cw);
// Recalculate the width of bannerlist
bannerlist.style.width = (bannerUrl.length + 1) * cw + 'px';
// Suppose the picture is the first one
var n = 0;
// Distance of moving = index * bannerImage width
// Direction : 0 - 1 - 2 - 3 - 4 -5 - 0
banner.timer = setInterval(auto, 4000);
// enter the banner, clear interval
banner.onmouseenter = function(){
clearInterval(banner.timer);
}
// leave the banner, activate the timer
banner.onmouseleave = function(){
banner.timer = setInterval(auto, 4000);
}
// Click shift button, shift to corresponding banner image
for(var i = 0; i < spans.length; i++){
// Custom index
spans[i].index = i;
// Add click event to each span
spans[i].onclick = function(){
n = this.index - 1;
auto();
}
}
// Click right button, shift to the next banner image
var btns = banner.getElementsByTagName('button');
// console.log(btns);
btns[1].onclick = function(){
auto();
}
// Click left button, shift to the previous banner image
btns[0].onclick = function(){
n -= 2;
auto();
}
// auto()
function auto(){
// Index ++
n++;
// If index gets to the last one, return the first one
if(n > bannerUrl.length){
n = 0;
// Change position
bannerlist.style.left = n * (-cw) + 'px';
// Update index
n = 1;
}
// If index gets to the first one, return the last one
if(n < 0){
n = bannerUrl.length - 1;
// flash
bannerlist.style.left = n * (-cw) + 'px';
}
// Call move(ele, attr, step, target) function
move(bannerlist, 'left', 50, n * (-cw));
// Exclusive operation
for(var i = 0; i < spans.length; i++){
spans[i].className = '';
}
// shift and bannerImage corresponds to each other
spans[n == bannerUrl.length ? 0 : n].className = 'active';
}
});
function move()
// 运动函数--匀速
function move(ele, attr, step, target) {
// ele: 运动的元素
// attr: 改变的属性
// step: 每一次走的步数
// target: 目标结果
// 速度的判断 当前值(获取) < 目标值(target) 正数 当前值 > 目标值 负数
var cur = parseInt(getStyle(ele, attr));
step = (cur < target ? step : -step);
clearInterval(ele.t);
ele.t = setInterval(function () {
var cur = parseInt(getStyle(ele, attr));
var end = cur + step;
if (end >= target && step > 0 || end <= target && step < 0) {
// 清除定时器 唯一标识
clearInterval(ele.t);
// 将end赋值成target
end = target;
}
// 赋值给ele的attr
ele.style[attr] = end + 'px';
}, 20);
}