css:
a {
text-decoration: none;
}
.banner-slider {
float: left;
width: 544px;
height: 414px;
background-color: #8edff3;
}
.ui-slider {
width: 544px;
height: 414px;
position: relative;
overflow: hidden;
}
.ui-slider-wrap {
width: 99999px;
height: 414px;
position: absolute;
left: 0;
right: 0;
transition: all .5s;
}
.ui-slider-wrap .item {
display: block;
float: left;
width: 544px;
height: 414px;
}
.ui-slider-arrow {
width: 544px;
height: 40px;
position: absolute;
top: 50%;
margin-top: -20px;
}
.ui-slider-arrow .item {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
background: url(img/ui-slider-arrow.png) no-repeat;
}
.ui-slider-arrow .left {
left: 0;
}
.ui-slider-arrow .right {
right: 0;
background-position: -40px 0;
}
.ui-slider-process {
width: 544px;
height: 12px;
text-align: center;
position: absolute;
left: 0;
bottom: 20px;
}
.ui-slider-process .item {
display: inline-block;
width: 16px;
height: 16px;
background: url(img/ui-slider-process.png) no-repeat;
}
.ui-slider-process .item_focus,
.ui-slider-process .item:hover {
background-position: -23px 0;
}
html:
// 幻灯片
<div class="banner-slider ui-slider">
//图片
<div class="ui-slider-wrap">
<a href="#0" class="item"><img src="img/banner_1.jpg" alt="banner-1"></a>
<a href="#1" class="item"><img src="img/banner_2.jpg" alt="banner-1"></a>
<a href="#2" class="item"><img src="img/banner_3.jpg" alt="banner-1"></a>
</div>
//箭头
<div class="ui-slider-arrow">
<a href="#l" class="item left"> </a>
<a href="#r" class="item right"> </a>
</div>
//小圆点
<div class="ui-slider-process">
<a href="#0" class="item item_focus"> </a>
<a href="#1" class="item item"> </a>
<a href="#2" class="item item"> </a>
</div>
</div>
js:
// ui-slidder
// 1. 左右箭头需要能控制翻页
// 2. 翻页的时候,进度点,要联动进行focus
// 3. 翻到第三页的时候,下一页需要回到 第一页,翻到第一页的时候,同理
// 4. 进度点,在点击的时候,需要切换到对应的页面
// 5. 没有(进度点点击、翻页操作)的时候需要进行自动滚动
// 6. 滚动过程中,屏蔽其他操作(自动滚动、左右翻页、进度点点击)
// 7. 高级-无缝滚动
$.fn.UiSlider = function() {
var ui = $(this);
var wrap = $('.ui-slider-wrap');
var btn_prev = $('.ui-slider-arrow .left', ui);
var btn_next = $('.ui-slider-arrow .right', ui);
var items = $('.ui-slider-wrap .item', ui);
var tips = $('.ui-slider-process .item', ui);
// 预定义
var current = 0;
var size = items.size();
var width = items.eq(0).width();
var enableAuto = true;
// 设置自动滚动感应(如果鼠标在 wrap 中,不要自动滚动)
ui
.on('mouseover', function() {
enableAuto = false;
})
.on('mouseout', function() {
enableAuto = true;
})
// 具体操作
wrap
.on('move_prev', function() {
if(current <= 0) {
current = size;
}
current = current - 1;
wrap.triggerHandler('move_to', current);
})
.on('move_next', function() {
if(current >= size - 1) {
current = -1;
}
current = current + 1;
wrap.triggerHandler('move_to', current);
})
.on('move_to', function(evt, index) {
wrap.css('left', index * width * -1);
tips.removeClass('item_focus').eq(index).addClass('item_focus');
})
.on('auto_move', function() {
setInterval(function() {
enableAuto && wrap.triggerHandler('move_next');
}, 2000);
})
.triggerHandler('auto_move');
// 事件
btn_prev.on('click', function() {
wrap.triggerHandler('move_prev');
});
btn_next.on('click', function() {
wrap.triggerHandler('move_next');
});
tips.on('click', function() {
var index = $(this).index();
wrap.triggerHandler('move_to', index);
})
}
// 页面的脚本逻辑
$(function() {
$('.ui-slider').UiSlider();
});
图片下载地址:https://pan.baidu.com/s/15ZFC5MRcfxh7TJ2xGk0BOQ 密码:7e3l