CSS实现图片轮播效果

吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-01-22 14:58:27.0

我们使用图片轮播,基本都是通过JS来完成,现在轮播插件也是很多可供我们选择.其效果也是有所不一样.看大家的需求而定.

今天我们用CSS来简单的实现图片轮播的效果.其效果的原理,还是利用CSS3中的动画来完成.


首先我们写好基本的结构和效果,这一点应该前端工程师写得比较多了,就是轮播的布局.图片我们是使用京东首页的轮播图片.

代码名称


 <div id="slider">

    <ul>

        <li>

            <a href=""> 

             <img src="http://img12.360buyimg.com/da/jfs/t2146/139/1446536217/98035/c6888bf9/56a05078N6add136b.jpg" alt="">

            </a>

        </li>

        <li>

            <a href=""> <img src="http://img20.360buyimg.com/da/jfs/t2371/1/2017035119/102726/7701b5b0/569f00f6N54856568.jpg" alt=""> </a>

        </li>

        <li>

            <a href=""> <img src="http://img13.360buyimg.com/da/jfs/t2542/83/1241281238/100625/fb471b02/5698a582N1c889ce3.jpg" alt=""> </a>

        </li>

    </ul>


  </div>



其次就是用CSS来完成页面的布局效果.#slider就是一个视窗,相当于你呆在房间,然后向外望去,这个视窗就是窗户.而窗外的景色是从下往上走的.那代码就是

代码名称


ul,li{

    list-style: none;

    margin: 0;

    padding: 0;

}

#slider{

    position: relative;

    width: 730px;

    height: 454px;

    overflow: hidden;

}

#slider ul{

    position: relative;

    animation: anims 10s infinite ease-in-out alternate;

}


OK,结构效果弄好了,现在我们加入必要的动画.刚布局里就知道,动画是从上往下走的,那自然我们想到的是position的处理.

代码名称


@keyframes anims {

    0%{

      top:0;

    }

    50%{

      top: -454px;

    }

    100%{

        top: -908px;

    }

}


动画代码是不是很简单.代码结构中UL就是一个画布,画布利用这个动画,循环的从上往下,从下往上来回替换.效果没有展示完(图片GIF过大).大家可以试试DEMO.


android项目没有android.jar这个依赖包的解决办法
|
11个最好的Jquery和HTML5的在线HTML编辑器插件