图片横向动态显示

2017-06-04  本文已影响0人  RelaxedAndHappy

注意事项:

  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");
        })

    })
上一篇下一篇

猜你喜欢

热点阅读