轮播 margin-left实现

思路：下图是一张图片布局重要通过float 属性将li并排排列通过改变ul 的marginleft 值实现图片轮播

1、css实现

这个比较简单主要是将所有用到的图片连在一起，通过改变背景的位置改变图片

主要用到了animation

不过这个比较局限性，适合于初学者来增加信息，之后你会发现这样的背景图片完全达不到你想要的效果，包括在图片下方添加文字、标签、按钮等，无法动态变化，除非你将这些全部放在了图片里，意思是每一张图片所要显示的内容都已经很好地存在于图片内，这样就不用动态的获取图片信息了。这样就需要花更多的时间在修图上了，像我这样的修图小白，还是老老实实用js或者jquery来实现吧，之后会更新这部分内容的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纯CSS实现轮播</title>
    <style>
        @keyframes slider {
            0% {  background-position: 0 0;  } 5% {  background-position: 0 0;  }
            20%{background-position: -840px 0}  25%{background-position: -840px 0}
            50%{background-position: -1680px 0} 55%{background-position: -1680px 0}
            80%{background-position: -840px 0}  85%{background-position: -840px 0}
            100%{ background-position: 0 0;}
        }
        @-moz-keyframes slider {
            0% {  background-position: 0 0;  }5% {  background-position: 0 0;  }
            20%{background-position: -840px 0}  25%{background-position: -840px 0}
            50%{background-position: -1680px 0} 55%{background-position: -1680px 0}
            80%{background-position: -840px 0}  85%{background-position: -840px 0}
            100%{ background-position: 0 0;}
        }
        @-ms-keyframes slider {
            0% {  background-position: 0 0;  }5% {  background-position: 0 0;  }
            20%{background-position: -840px 0}  25%{background-position: -840px 0}
            50%{background-position: -1680px 0} 55%{background-position: -1680px 0}
            80%{background-position: -840px 0}  85%{background-position: -840px 0}
            100%{ background-position: 0 0;}
        }
        @-o-keyframes slider {
            0% {  background-position: 0 0;  }5% {  background-position: 0 0;  }
            20%{background-position: -840px 0}  25%{background-position: -840px 0}
            50%{background-position: -1680px 0} 55%{background-position: -1680px 0}
            80%{background-position: -840px 0}  85%{background-position: -840px 0}
            100%{ background-position: 0 0;}
        }
        @-webkit-keyframes slider {
            0% {  background-position: 0 0;  }5% {  background-position: 0 0;  }
            20%{background-position: -840px 0}  25%{background-position: -840px 0}
            50%{background-position: -1680px 0} 55%{background-position: -1680px 0}
            80%{background-position: -840px 0}  85%{background-position: -840px 0}
            100%{ background-position: 0 0;}
        }
    .box{
        background: url("4.jpg") no-repeat 0 0;
        width: 842px;height: 600px;
        animation: slider 16s linear  infinite;
        margin: 100px 100px;
        position: relative;
    }
    </style>
</head>
<body>
<div class="box">

</div>

</body>
</html>

webkit-animation:

-webkit-animation: name duration timing-function delay iteration_count direction;

包括以下几个属性

（1） -webkit-animation-name 这个属性的使用必须结合@-webkit-keyframes一起使用

eg: @-webkit-keyframes fontchange{

0%{font-size:10px;}

30%{font-size:15px;}

100%{font-siez:12px;}

}

百分比的意思就是duration的百分比，如果没有设置duration的话，则表示为无穷大

div{ -webkit-animation-name:fontchange;}

（2）-webkit-animation-duration 表示动画持续的时间

（3）-webkit-animation-timing-function 表示动画使用的时间曲线

【语法】： -webkit-animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out

（4）-webkit-animation-delay 表示开始动画之前的延时

【语法】 -webkit-animation-delay: delay_time;

（5）-webkit-animation-iteration-count 表示动画要重复几次

【语法】-webkit-animation-iteration-count: times_number;

（6） -webkit-animation-direction 表示动画的方向

【语法】-webkit-animation-direction: normal(默认) | alternate

normal 方向始终向前

alternate 当重复次数为偶数时方向向前，奇数时方向相反

【另外】跟animation有关的其他属性

（1）-webkit-animation-fill-mode : none (默认)| backwards | forwards | both 设置动画开始之前和结束之后的行为（测试结

果不是很清晰）

（2）-webkit-animation-play-state: running（默认） | paused 设置动画的运行状态

　2.jq实现

我的代码只能说是简单的实现了轮播的方式，之后会再去优化代码包括css 下面的css只是简单用了重要的属性设置，其他用于使页面更美好的属性统统没有设置，毕竟我现在的目的是实现轮播，方便读者更快的看懂多余的修饰性代码我就没有码上去

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播</title>
    <!--思路使用marginleft实现轮播
    ul li 放置图片
    -->
    <style>
        .slider{width: 990px;height: 380px;overflow: hidden}/*最外层宽度 可变化 如果需要添加其他栏*/
        .slider ul{width: 1000px;height: 380px;}/*图片所处表格宽度*/
        .slider ul li{float: left;list-style: none;margin: 0px 40px}/*左浮动 清除表格样式 margin一定要设置*/
    </style>
</head>
<body>
<div class="slider">
    <ul >
        <li>
            <a href="#" target="_blank"><img src="2.1.png" title="" name="oo" alt="那些让人失控的烘焙甜品"> </a>
        </li>
        <li>
            <a href="#" target="_blank"><img src="2.2.png" title="oo" name="oo" alt="妈妈的爱心早餐表"> </a>
        </li>
        <li>
            <a href="#" target="_blank"><img src="2.3.png" title="oo" name="oo" alt="春季必吃的滋补食物"> </a>
        </li>
        <li>
            <a href="#" target="_blank"><img src="2.4.png" title="oo" name="oo" alt="十里桃花 灼灼芳华"> </a>
        </li>
        <li>
            <a href="#" target="_blank"><img src="2.5.png" title="oo" name="oo" alt="食物挂起海洋风"> </a>
        </li>
        <li>
            <a href="#" target="_blank"><img src="2.6.png" title="oo" name="oo" alt="信手拈来的排毒好物"> </a>
        </li>
    </ul>
</div>
</body>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script>
    $(document).ready(function () {
     var ul = $(".slider ul"),
         li = ul.find('li'),
         len = $(".slider li").length,
         liW = li.outerWidth(true),
         index = 0;

        ul.css({"width":liW*(len+1),'margin-left':liW*index});

       function  play() {
              li.first().eq(index).clone().appendTo(ul);
               ul.css({"margin-left":-liW*index});
               index++;
           if(index>len){
               index =0;ul.css({"margin-left":liW*index});
               index++;
           }
       }
       ul.hover(function () {
           clearInterval(play());
       },setInterval(play,1500))
    })
</script>
</html>

posted @ 2017-03-29 09:33 可以用标点做名字吗 Views(577) Comments(0) 收藏举报

刷新页面返回顶部

可以用标点做名字吗

轮播 margin-left实现

公告