html+css+jQuery文字上下滑动banner特效

1、新建html文档。

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>

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>

7、查看效果。