图片横向动态显示

注意事项：

1. :animated选择器，选中有动画效果的元素；
   2.animate()方法，使用"+="和"-="创建相对动画

//:animated选择器实例
div{
    height: 40px;
    width: 100px;
    position: relative;
    margin-bottom: 5px;
    background: #98bf21;
}



点击选中有动画效果的元素

//js
$(function()  {
  
    function box() {
          $("#box").animate({width: 300},"slow");
          $("#box").animate({width: 100}, "slow", box); //这里box表示自己调用自己
     } 
    box();
    $(".btn1").click(function{
      
      $(":animated").css("background-color": "green");
  
})
      
})
//出现的是效果是，有动画状态的div会变成绿色

图片动态显示

  
    

        

            
图片展示
            

                1
                2
                3
                4          
            
            

                prev
                next
            
            更多>>
        
        

            

                

                    

                        ![](img/15/01.jpg)
                        
标题一
                        时间：2016-7-8
                    
                    

                        ![](img/15/01.jpg)
                        
标题一
                        时间：2016-7-8
                    
                    

                        ![](img/15/01.jpg)
                        
标题一
                        时间：2016-7-8
                    
                    

                        ![](img/15/01.jpg)
                        
标题一
                        时间：2016-7-8
                    
                    

                        ![](img/15/01.jpg)
                        
标题一
                        时间：2016-7-8
                    
                    

                        ![](img/15/01.jpg)
                        
标题一
                        时间：2016-7-8
                    
                    

                        ![](img/15/01.jpg)
                        
标题一
                        时间：2016-7-8
                    
                    

                        ![](img/15/01.jpg)
                        
标题一
                        时间：2016-7-8
                    
                    

                        ![](img/15/01.jpg)
                        
标题一
                        时间：2016-7-8
                    
                    

                        ![](img/15/01.jpg)
                        
标题一
                        时间：2016-7-8
                    
                    

                        ![](img/15/01.jpg)
                        
标题一
                        时间：2016-7-8
                    
                    

                        ![](img/15/01.jpg)
                        
标题2
                        时间：2016-7-8
                    
                    

                        ![](img/15/01.jpg)
                        
标题3
                        时间：2016-7-8
                    
                    

                        ![](img/15/01.jpg)
                        
标题4
                        时间：2016-7-8
                    
                    

                        ![](img/15/01.jpg)
                        
标题5
                        时间：2016-7-8
                    

                
            
        
    

/*css*/

*{
    margin: 0;
    padding: 0;
    font-size: "宋体";
}
body {
    font-size: 14px;
}
ul {
    list-style-type: none;
}
a {
    color: red;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
img {
    border: 0;
}
h1 {
    font-size: 14px;

}

#box {
    width: 595px;
    margin: 0 auto;
    border: 1px solid #e7e7e7;
}
#title {
    height: 35px;
    background: #eee;
    /*line-height: 35px;*/
}
#title h1 {
    height: 35px;
    line-height: 35px;
    padding-left: 10px;
    float: left;
}
#title .point {
    float: left;
    margin: 14px 0 0 10px;
}

#title .point span{
    width: 7px;
    height: 7px;
    float: left;
    margin: 0 2px;
    background: url(../img/15/1.gif) no-repeat center center;
    text-indent: -999px;
    cursor: pointer;
}
#title .point .select {
    background: url(../img/15/2.gif) no-repeat center center;
}
#title .page span{
    float: left;
    background: url(../img/15/3.gif) no-repeat;
    width: 31px;
    height: 22px; 
    margin-top: 7px;
    text-indent: -999px;
    cursor: pointer;
}
#title .page span.next {
    background-position: -31px 0;
}
#title em {
    float: right;
    padding-right: 10px;
    padding-top: 8px;
}

#mian {
    overflow: hidden;
    width: 595px;
    height: 165px;
    /*overflow: hidden;*/
    position: relative;
    /*border: 1px solid #e7e7e7;*/
    border-top: none;
}
#mian .a {
    width: 2222px;
    position: absolute;
    top: 0;
    left: 0;
}
#mian ul li{
    float: left;
    margin: 10px 2px 0 2px;
    padding: 8px;
}
#mian ul li h1 {
    padding-top: 4px;
    padding-left: 5px;
}

//js

    $(function() {
        var page = 1; //定义显示页面只有1个
        var i = 4; // 每个页面显示4副图片

    //点击向右移动
        $(".next").click(function() {

            var e1 = $(this).parents("#box");//找到ID为box的父元素
            // find()搜索当前元素所有的后代元素
            var e2 = e1.find(".a");
            var e3 = e1.find("#mian");

            var width = e3.width();//
            console.log(width)
            var len = e2.find("li").length; //获取有li的个数

            var page_count = Math.ceil(len / i);//计算出有几页图片;
            console.log(page_count)

            if (!e3.is(":animated")) { //不是动画的时候执行

                // += 或者 -=创建相对动画
                if (page_count === page) {
                    //如果显示的是第最后页，那么div的left为0px
                    e2.animate({left: "0px"}, "slow");
                    console.log(page)
                    page = 1;
                }else {

                    e2.animate({
                        left: "-=" + width
                    }, "slow")
                    page++;
                    console.log(page)
                }

            }   

            var point = e1.find(".point");
            var a = point.find("span")
            console.log(e1.find("span"))
            // 给第eq(page - 1)个span元素添加class
            a.eq(page - 1).addClass("select").siblings().removeClass("select");


        });

    //向左移动

        $(".prev").click(function() {

            var e1 = $(this).parents("#box");
            var e2 = e1.find("#mian");
            var e3 = e2.find(".a");

            var width = e2.width();
            var len = e3.find("li").length;
            var page_count = Math.ceil(len / i);

            if  (page === 1) {

                e3.animate({left: "-=" + width * (page_count - 1)}, "slow");
                page = page_count
            }else {

                e3.animate({left: "+=" + width}, "slow");
                page--;
            }

            e1.find("span").eq(page - 1).addClass("select").siblings().removeClass("select");
        })

    })