美文网首页
图片横向动态显示

图片横向动态显示

作者: RelaxedAndHappy | 来源:发表于2017-06-04 00:03 被阅读0次

    注意事项:

    1. :animated选择器,选中有动画效果的元素;
      2.animate()方法,使用"+="和"-="创建相对动画
    //:animated选择器实例
    div{
        height: 40px;
        width: 100px;
        position: relative;
        margin-bottom: 5px;
        background: #98bf21;
    }
    <div></div>
    <div id="box"></div>
    <div></div>
    <button class="btn1">点击选中有动画效果的元素</button>
    
    //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会变成绿色
    
    

    图片动态显示

    
      <body>
        <div id="box">
            <div id="title">
                <h1>图片展示</h1>
                <div class="point">
                    <span class="select">1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>          
                </div>
                <div class="page">
                    <span class="prev">prev</span>
                    <span class="next">next</span>
                </div>
                <em><a href="#">更多&gt&gt</a></em>
            </div>
            <div id="mian">
                <div class="a">
                    <ul>
                        <li>
                            <a href="#">![](img/15/01.jpg)</a>
                            <h1><a href="#">标题一</a></h1>
                            <span>时间:<em>2016-7-8</em></span>
                        </li>
                        <li>
                            <a href="#">![](img/15/01.jpg)</a>
                            <h1><a href="#">标题一</a></h1>
                            <span>时间:<em>2016-7-8</em></span>
                        </li>
                        <li>
                            <a href="#">![](img/15/01.jpg)</a>
                            <h1><a href="#">标题一</a></h1>
                            <span>时间:<em>2016-7-8</em></span>
                        </li>
                        <li>
                            <a href="#">![](img/15/01.jpg)</a>
                            <h1><a href="#">标题一</a></h1>
                            <span>时间:<em>2016-7-8</em></span>
                        </li>
                        <li>
                            <a href="#">![](img/15/01.jpg)</a>
                            <h1><a href="#">标题一</a></h1>
                            <span>时间:<em>2016-7-8</em></span>
                        </li>
                        <li>
                            <a href="#">![](img/15/01.jpg)</a>
                            <h1><a href="#">标题一</a></h1>
                            <span>时间:<em>2016-7-8</em></span>
                        </li>
                        <li>
                            <a href="#">![](img/15/01.jpg)</a>
                            <h1><a href="#">标题一</a></h1>
                            <span>时间:<em>2016-7-8</em></span>
                        </li>
                        <li>
                            <a href="#">![](img/15/01.jpg)</a>
                            <h1><a href="#">标题一</a></h1>
                            <span>时间:<em>2016-7-8</em></span>
                        </li>
                        <li>
                            <a href="#">![](img/15/01.jpg)</a>
                            <h1><a href="#">标题一</a></h1>
                            <span>时间:<em>2016-7-8</em></span>
                        </li>
                        <li>
                            <a href="#">![](img/15/01.jpg)</a>
                            <h1><a href="#">标题一</a></h1>
                            <span>时间:<em>2016-7-8</em></span>
                        </li>
                        <li>
                            <a href="#">![](img/15/01.jpg)</a>
                            <h1><a href="#">标题一</a></h1>
                            <span>时间:<em>2016-7-8</em></span>
                        </li>
                        <li>
                            <a href="#">![](img/15/01.jpg)</a>
                            <h1><a href="#">标题2</a></h1>
                            <span>时间:<em>2016-7-8</em></span>
                        </li>
                        <li>
                            <a href="#">![](img/15/01.jpg)</a>
                            <h1><a href="#">标题3</a></h1>
                            <span>时间:<em>2016-7-8</em></span>
                        </li>
                        <li>
                            <a href="#">![](img/15/01.jpg)</a>
                            <h1><a href="#">标题4</a></h1>
                            <span>时间:<em>2016-7-8</em></span>
                        </li>
                        <li>
                            <a href="#">![](img/15/01.jpg)</a>
                            <h1><a href="#">标题5</a></h1>
                            <span>时间:<em>2016-7-8</em></span>
                        </li>
    
                    </ul>
                </div>
            </div>
        </div>
    </body>
    
    /*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");
            })
    
        })
    

    相关文章

      网友评论

          本文标题:图片横向动态显示

          本文链接:https://www.haomeiwen.com/subject/ypzmfxtx.html