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、查看效果。
