javascript原生小练习（二）--轮播图滚动效果

<pre name="code" class="javascript"><script type="text/javascript">function setClass(obj,classname){//alert(obj.className)var reg =new RegExp("(\\s|^)" + classname + "(\\s|$)");//前面有空格或者以classname为开头，后面有空格或者以classname为结尾return {hasClass : obj.className.match(reg),    addClass : function(){if(!this.hasClass){obj.className += " "+classname; }},    removeClass : function(){if(this.hasClass){obj.className = obj.className.replace(reg,"");}}}}function scrollFun(id){var scrollObj = document.getElementById(id).getElementsByTagName("div"),init = {timer : null,currentIndex : 0,con : {obj : scrollObj[0].getElementsByTagName("ul")[0],width : 400,len : scrollObj[0].getElementsByTagName("ul")[0].getElementsByTagName("li").length  },tit : scrollObj[1].getElementsByTagName("a"),btn : {  prev : scrollObj[2].getElementsByTagName("a")[0],  next : scrollObj[2].getElementsByTagName("a")[1]  },autoplay : false};autoChange();//自动播放for(var i = 0;i < init.tit.length;i++){(function($i){  init.tit.item(i).onclick = function(){show($i);  }})(i);}init.btn.prev.onclick = function(){var index = init.currentIndex - 1;if( index >= 0)show(index);}init.btn.next.onclick = function(){var index = init.currentIndex + 1;if( index <= init.con.len - 1)show(index);}function autoChange(){init.autoplay = true;init.timer = setInterval(function(){var index = init.currentIndex + 1;if(index > init.con.len - 1){index = 0;}show(index);},2500);}function show(index){clearInterval(init.timer);var cIndex = index - init.currentIndex,prevLeft = init.currentIndex * init.con.width,nowLeft = index * init.con.width,timer2 = setInterval(function(){if(Math.abs(prevLeft - nowLeft)>= 1){if(cIndex > 0)prevLeft += init.con.width/20;else prevLeft -= init.con.width/20;init.con.obj.style.left = "-" + prevLeft + "px";}else{init.currentIndex = index;init.con.obj.style.left = "-" + nowLeft + "px";for(var j = 0;j < init.tit.length; j++){if(j == init.currentIndex){setClass(init.tit[j],"current").addClass();}else{setClass(init.tit[j],"current").removeClass();}}clearInterval(timer2);if(init.autoplay){autoChange();}}},10);}}window.onload = function(){scrollFun("js-scroll");}</script>

<div id="js-scroll"><div class="scroll-wrap">    <ul class="scroll-list">        <li class="item">1</li>            <li class="item">2</li>            <li class="item">3</li>            <li class="item">4</li>        </ul>    </div><div class="scroll-tit">    <a class="item current">1</a>        <a class="item">2</a>        <a class="item">3</a>        <a class="item">4</a>    </div>    <div class="scroll-btn">    <a class="btn prev">上一张</a>        <a class="btn next">下一张</a>    </div>    </div>

<style type="text/css">*{margin:0;padding:0;list-style:none;}#js-scroll{position:relative}.scroll-wrap{width:400px;height:300px;overflow:hidden;position:relative;}.scroll-list{width:20000em;height:100%;position:absolute;left:0;}.scroll-list .item{float:left;width:400px;height:100%;background:#ddd;}.scroll-tit .current{color:red;}</style>