轮播 margin-left实现

时间:2022-11-14 22:37:18

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

轮播 margin-left实现

1、css实现

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

主要用到了animation

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

轮播 margin-left实现

<!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>