html+css+jQuery文字上下滑动banner特效
1、新建html文档。
2、书写hmtl代码。
<div class="slide-wrap">
<div class="slide-mask">
<ul class="slide-group" style="top: -100%;">
<li class="slide"><a href="#">百度经验1</a></li>
<li class="slide"><a href="#">百度经验2</a></li>
<li class="slide"><a href="#">百度经验3</a></li>
<li class="slide"><a href="#">百度经验4</a></li>
<li class="slide"><a href="#">百度经验5</a></li>
</ul>
</div>
<div class="slide-nav">
<ul>
<li class="bullet"></li>
<li class="bullet current"></li>
<li class="bullet"></li>
<li class="bullet"></li>
<li class="bullet"></li>
</ul>
</div>
</div>
3、书写css代码。
<style>
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;color:#fff;}
body {background: rgb(191, 76, 76);}
.slide-wrap{margin:5% auto 0;width:50%;}
.slide-mask{position:relative;overflow:hidden;height:130px;}
.slide-group{position:absolute; top:0px; left:0;width:100%;}
.slide{height:130px;font:100 90px/135px "lato";font-size:2em;color:#fff;text-align:center;text-transform:uppercase;}
.slide-nav{text-align:center;}
.slide-nav ul{margin:0;padding:0;}
.slide-nav li{display:inline-block;width:10px;height:10px;background:rgb(175, 56, 56);cursor:pointer;margin-left:.5em;}
.slide-nav li.current{background:rgb(144, 39, 39);}
</style>
4、书写js引用代码。
<script src="s/jquery-1.8.3.min.js"></script>
<script src="s/index.js"></script>
5、书写<script src="s/index.js"></script>代码。
<script>
var $slide = $('.slide'),
$slideGroup = $('.slide-group'),
$bullet = $('.bullet');
var slidesTotal = ($slide.length - 1),
current = 0,
isAutoSliding = true;
$bullet.first().addClass('current');
var clickSlide = function() {
//stop auto sliding
window.clearInterval(autoSlide);
isAutoSliding = false;
var slideIndex = $bullet.index($(this));
updateIndex(slideIndex);
};
var updateIndex = function(currentSlide) {
if(isAutoSliding) {
if(current === slidesTotal) {
current = 0;
} else {
current++;
}
} else {
current = currentSlide;
}
$bullet.removeClass('current');
$bullet.eq(current).addClass('current');
transition(current);
};
var transition = function(slidePosition) {
$slideGroup.animate({
'top': '-' + slidePosition + '00%'
});
};
$bullet.on( 'click', clickSlide);
var autoSlide = window.setInterval(updateIndex, 2000);</script>
6、代码整体结构。
7、查看效果。
