前端笔记(jquery轮播图和选项卡) 第一次发文章，请各位看官素质3联

注：以下代码中所有的位置属性都是由变量index驱动，请具体问题具体分析，该代码可以解决大部分轮播图

第一种：自动滑动式 多用于展示

HTML部分：
<div id="box">        
    <ul id="banner">            
        <li>1</li>           
        <li>2</li>            
        <li>3</li>            
        <li>4</li>            
        <li>5</li>            
        <li>6</li>            
        <li>7</li>            
        <li>8</li>        
    </ul>    
</div>

CSS部分：
<style>        
*{            
    margin: 0;            
    padding: 0;        
}        
#box{            
    width: 280px;            
    margin: 100px auto 0px;            
    background-color: red;            
    overflow: hidden;        
}        
ul{            
    width: 560px;            
    overflow: hidden;        
}        
ul li{            
    width: 60px;            
    height: 200px;            
    margin-right: 10px;            
    background-color: purple;            
    list-style: none;            
    float: left;            
    line-height: 200px;            
    font-size: 30px;            
    text-align: center;        
}    
</style>

JS部分：
<script>        
    $(function(){            
        var str=$("#banner").html();// 复制结构            
        $("#banner").html(str+str);            
        $("#banner").width($("#banner li").length*70);            
        var index=0;//启动定时器            
        function moveChange(){                
            index++;                
            if(index>560){//走完一组图片时，将ul拉回0的位置                    
                $("#banner").css("marginLeft",0+"px");                    
                index=0;                
            }                
            $("#banner").css("marginLeft",-index+"px");            
        }            
        var t=setInterval(moveChange,30)        
    })    
</script>

var str=$("#banner").html();// 复制结构 $("#banner").html(str+str); 

2. 第二种轮播图（普通轮播图）
结构样式与第二种一样

$(function(){            
    $("#left").click(function(){            
        // 如何判断一个元素是否在执行动画，如果在执行动画返回true，没有在执行，返回false
        // console.log($("#banner").is(":animated"))                
        if(!$("#banner").is(":animated")){                    
            $("#banner li").last().prependTo($("#banner"))// 需要将变过来的第一个li藏出去
            $("#banner").css("marginLeft","-70px")                    
            $("#banner").animate({                        
                "marginLeft":0                    
            },600)                  
        }            
    })            
    $("#right").click(function(){                
        if(!$("#banner").is(":animated")){                    
            $("#banner").animate({                        
                "marginLeft":-70+"px"                    
            },600,function(){                        
                $("#banner li").first().appendTo($("#banner"))     
                $("#banner").css("marginLeft",0)                    
            })                
        }            
    })        
})

如何判断一个元素是否在执行动画

if(!执行动画的元素.is(":animated")){
执行的动画 (代码块)
}

第三种 无缝滚动轮播图 详见英雄联盟官网

HTML部分：
<div class="wrap">        
    <ul class&#