四种方式实现轮播图

其他 2018-07-26 05:10:10 阅读次数: 0

转载自：http://www.jianshu.com/p/bd1f34e7e953


不论是app，还是网站，基本上都会出现轮播图，今天和大家分享几种不同工具实现轮播图的几种方式。

轮播图的基本样式和功能就不需要解释了，相信能根据题目选择看文章的话都知道啥是轮播图，如果哪位读者老爷真的让非要我解释一下啥是轮播图，求您饶了在下吧，真心词穷~

为了方便大家观看，我把css，html，js都写在一个文件里。

swiper插件实现轮播图

swiper是一个实现轮播图很强大，上手也容易。并且也是现在app，网址等用的最多的，
官方网址：http://www.swiper.com.cn/
下载插件导入，按照教程即可实现精美效果

运行效果


GIF.gif

代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="swiper-3.4.1.min.css">
    <script type="text/javascript" src="jquery/jquery-3.0.0.min.js"></script>
    <script type="text/javascript" src="swiper-3.4.1.jquery.min.js"></script>
    <style type="text/css">
        .swiper-container{
            width: 790px;
            height: 340px;
        }
    </style>
</head>

<!-- 结构以及class的类名不允许更改 -->
<body>
    <div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">![]((1).jpg)</div>
        <div class="swiper-slide">![]((2).jpg)</div>
        <div class="swiper-slide">![]((3).jpg)</div>
        <div class="swiper-slide">![]((4).jpg)</div>
        <div class="swiper-slide">![]((5).jpg)</div>
        <div class="swiper-slide">![]((6).jpg)</div>
        <div class="swiper-slide">![]((7).jpg)</div>
        <div class="swiper-slide">![]((8).jpg)</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- 如果需要滚动条 -->
    <!-- <div class="swiper-scrollbar"></div> -->
</div>

<script type="text/javascript">
    var mySwiper = new Swiper ('.swiper-container', {
      // 滚动方向 horizontal/vertical
    direction: 'horizontal',
    // 自动播放
    autoplay:2000,
    // 是否循环播放
    loop: true,
    // 如果需要分页器（小圆点）
    // 是否需要分页器
    pagination: '.swiper-pagination',
    // 点击分页器是否切换到对应的图片 是 true 否 false
    paginationClickable:true,

    // 如果需要前进后退按钮
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',

     // 用户操作swiper之后，是否禁止autoplay。默认为true：停止。
    // 如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。
    // 操作包括触碰，拖动，点击pagination等。
    autoplayDisableOnInteraction:false,
  }) 

</script>
</body>

</body>
</html>

JS实现轮播图

运行效果


GIF.gif


代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        #loopDiv{
            width: 790px;
            height: 340px;
            margin: 0 auto;
            position: relative;
        }

        #list{
            list-style: none;

            position: absolute;
            bottom: 10px;
            left: 250px;
        }
        #list li{
            float: left;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            border-radius: 50%;
            background: #aaa;
            margin-right: 10px;
        }
        .chooseBut{
            width: 50px;
            height: 80px;
            background-color: rgba(0,0,0,0.2);
            color: #fff;
            font-size: 30px;
            line-height: 80px;
            text-align: center;
            display: none;
        }
        #left{
            position: absolute;
            left: 0px;
            top: 130px;
        }
        #right{
            position: absolute;
            right: 0px;
            top: 130px;
        }
    </style>
</head>
<body>
    <div id="loopDiv">
        ![](img/0.jpg)
        <ul id="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
        <div id="left" class="chooseBut"><</div>
        <div id="right" class="chooseBut">></div>
    </div>
    <script type="text/javascript">
        var jsDivBox = document.getElementById("loopDiv");
        //图片节点
        var jsImg = document.getElementById("pic");
        //左右按钮节点
        var jsLeft = document.getElementById("left");
        var jsRight = document.getElementById("right");
        //获取所有的li
        var jsUl = document.getElementById("list");
        var jsLis = jsUl.getElementsByTagName("li");
        //让第一个小圆点变为红色
        jsLis[0].style.backgroundColor = "red";

        //显示当前的图片下标
        var currentPage = 0;

        //启动定时器
        var timer = setInterval(func, 1000);
        function func() {
            currentPage++;
            changePic();

        }
        function changePic() {
            if (currentPage == 8) {
                currentPage = 0;
            }
            if (currentPage == -1) {
                currentPage = 7;
            }
            //更换图片
            //"img/1.jpg"
            jsImg.src = "img/" + currentPage + ".jpg";
            //将所有的小圆点颜色清空
            for (var i = 0; i < jsLis.length; i++) {
                jsLis[i].style.backgroundColor = "#aaa";
            }
            //改变对应小圆点为红色
            jsLis[currentPage].style.backgroundColor = "red";
        }

        //鼠标进入
        jsDivBox.addEventListener("mouseover", func1, false);
        function func1() {
            //停止定时器
            clearInterval(timer);
            //显示左右按钮
            jsLeft.style.display = "block";
            jsRight.style.display = "block";
        }
        //鼠标移出
        jsDivBox.addEventListener("mouseout", func2, false);
        function func2() {
            //重启定时器
            timer = setInterval(func, 1000);

            //隐藏左右按钮
            jsLeft.style.display = "none";
            jsRight.style.display = "none";
        }

        //点击左右按钮
        jsLeft.addEventListener("click", func3, false);
        function func3() {
            currentPage--;
            changePic();
        }
        jsLeft.onmouseover = function() {
            this.style.backgroundColor = "rgba(0,0,0,0.6)";
        }
        jsLeft.onmouseout = function() {
            this.style.backgroundColor = "rgba(0,0,0,0.2)";
        }
        jsRight.addEventListener("click", func4, false);
        function func4() {
            currentPage++;
            changePic();
        }
        jsRight.onmouseover = function() {
            this.style.backgroundColor = "rgba(0,0,0,0.6)";
        }
        jsRight.onmouseout = function() {
            this.style.backgroundColor = "rgba(0,0,0,0.2)";
        }

        //进入小圆点
        for (var j = 0; j < jsLis.length; j++) {
            jsLis[j].onmouseover = function() {
                currentPage = parseInt(this.innerHTML) - 1;
                changePic();
            };
        }

    </script>
</body>
</html>

jQuery实现轮播图

运行结果


GIF.gif


代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .pic{
            width: 790px;
            height: 340px;
            margin: 10px auto;
            position: relative;
            overflow: hidden;
        }
        .content{
            width: 99999px;
            height: 340px;
            position: absolute;
            left: 0px;
            top: 0px;

        }
        .content img{
            float: left;
        }
        .index{
            position: absolute;
            left: 300px;
            bottom: 5px;
            width: 200px;
            height: 20px;
            list-style: none;
        }
        .index li{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            float: left;
            margin-left: 10px;
            background-color: rgba(100,100,100,0.3);
        }

        .left{
            width: 30px;
            height:50px;
            background-color:rgba(100,100,100,0.5);  
            position: absolute;
            left: 0px;
            top: 150px;
            line-height: 50px;
            text-align: center;
            font-size: 20px;
            color: #fff;
            display: none;
        }
        .right{
            width: 30px;
            height:50px;
            background-color:rgba(100,100,100,0.5);  
            position: absolute;
            right: 0px;
            top: 150px;
            line-height: 50px;
            text-align: center;
            font-size: 20px;
            color: #fff;
            display: none;
        }
        .index .first{
            background-color: red;
        }

    </style>
    <script type="text/javascript" src="jquery/jquery-3.0.0.min.js"></script>
</head>
<body>
    <div class="pic">
        <div class="content">
            ![](img/(1).jpg)
            ![](img/(2).jpg)
            ![](img/(3).jpg)
            ![](img/(4).jpg)
            ![](img/(5).jpg)
            ![](img/(6).jpg)
            ![](img/(7).jpg)
            ![](img/(8).jpg)
        </div>
        <ul class="index">
            <li class="first"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="right">></div>
        <div class="left"><</div>
    </div>
    <script type="text/javascript">
        $(function(){
            //每个固定的时间移动图片
            var timer = setInterval(picLoop,1000);
            var index = 0;
            function picLoop(){
                index++;
                if (index==8) {index=0;}
                $(".content").animate({"left":-790*index},300);
                $("li").eq(index).css("background-color","red")
                       .siblings().css("background-color","rgba(100,100,100,0.3)");
            }

            //定时器的控制
            $(".pic").hover(function(){
                clearInterval(timer);
                $(".left").show();
                $(".right").show();
            },function(){
                timer = setInterval(picLoop,1000);
                $(".left").hide();
                $(".right").hide();
            })

            $("li").mouseover(function(){
                $(this).css("background-color","red")
                       .siblings().css("background-color","rgba(100,100,100,0.3)");
                index = $(this).index();
                $(".content").animate({"left":-790*index},300);

            })

            $(".left").click(function(){
                index--;
                if (index==-1) {index=7;}
                $(".content").animate({"left":-790*index},300);
                $("li").eq(index).css("background-color","red")
                       .siblings().css("background-color","rgba(100,100,100,0.3)");
            })
            $(".right").click(function(){
                index++;
                if (index==8) {index=0}
                $(".content").animate({"left":-790*index},300);
                $("li").eq(index).css("background-color","red")
                       .siblings().css("background-color","rgba(100,100,100,0.3)");    
            })


        })
    </script>
</body>
</html>

css3实现轮播图

css3的轮播实用性差，但是也可以使用，但是可以锻炼我们的思维。
运行效果


GIF.gif


代码部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        * {
              margin:0;
            padding:0;
        }

        ul {
              list-style:none;
        }
        .loop{
            position: relative;
            margin:30px auto;
            width:600px;
            height:300px;
        }

        #wrap {
              position:relative;
              width:600px;
              height:300px;
               border:1px solid #9cc5ef;
               overflow:hidden;
        }

        #slider {
              width:300%;
              height:100%;
              font:100px/400px Microsoft Yahei;
              text-align:center;
              color:#fff;
              margin-left:0;
              -webkit-animation:slide1 3s ease-out infinite;
        }

        #slider li {
              float:left;
              width:600px;
              height:100%;
        }
        #slider img{
             width:600px;
             height:100%;
        }
        /*创建三种动画策略*/
        @-webkit-keyframes slide1 {
          0% { margin-left:0;}
          23% { margin-left:0;}
          33% { margin-left:-600px;}
          56% { margin-left:-600px;}
          66% { margin-left:-1200px;}
          90% { margin-left:-1200px;}
          100% {margin-left:0;}
        }

        @-webkit-keyframes slide2 {
          0% { margin-left:-600px;}
          23% { margin-left:-600px;}
          33% { margin-left:-1200px;}
          56% { margin-left:-1200px;}
          66% { margin-left:0;}
          90% { margin-left:0;}
          100% {margin-left:-600px;}
        }

        @-webkit-keyframes slide3 {
          0% { margin-left:-1200px;}
          23% { margin-left:-1200px;}
          33% { margin-left:0;}
          56% { margin-left:0;}
          66% { margin-left:-600px;}
          90% { margin-left:-600px;}
          100% {margin-left:-1200px;}
        }


        /*当我们点击对应按钮时显示对应的动画*/
        #first:checked ~ #wrap #slider {
          -webkit-animation-name:slide1;
        }

        #second:checked ~ #wrap #slider {
          -webkit-animation-name:slide2;
        }

        #third:checked ~ #wrap #slider {
          -webkit-animation-name:slide3;
        }


        /*短暂地取消动画名称，模拟重启动画*/
        #first:active ~ #wrap #slider {
          -webkit-animation-name:none;
          margin-left:0;
        }

        #second:active ~ #wrap #slider {
          -webkit-animation-name:none;
          margin-left:-600px;
        }

        #third:active ~ #wrap #slider {
          -webkit-animation-name:none;
          margin-left:-1200px;
        }
        #opts {
          width:600px;
          height:40px;
          margin:auto;
          color:#fff;
          text-align:center;
          font:16px/30px Microsoft Yahei;
          position: absolute;
          top: 260px;
          left: 250px;
        }

        #opts label {
          float:left;
          width:30px;
          height:30px;
          margin-right:10px;
          background:#cccccc;
          cursor:pointer;
          border-radius: 50%;
        }

        #opts label:hover {
          background:#405871;
        }

        /* 隐藏Input按钮*/
        #first, #second, #third {
          display:none;
        }

        </style>
    </head>
    <body>
        <div class="loop">
            <input type="radio" name="slider" id="first">
            <input type="radio" name="slider" id="second">
            <input type="radio" name="slider" id="third">

            <div id="wrap">
              <ul id="slider">
                <li>![](img/0.jpg)</li>
                <li>![](img/1.jpg)</li>
                <li>![](img/2.jpg)</li>
              </ul>
            </div>  
            <div id="opts">
              <label for="first">1</label>
              <label for="second">2</label>
              <label for="third">3</label>
            </div>
        </div>
    </body>
</html>

觉得有收获就点赞啦




转载自：http://www.jianshu.com/p/bd1f34e7e953


不论是app，还是网站，基本上都会出现轮播图，今天和大家分享几种不同工具实现轮播图的几种方式。

轮播图的基本样式和功能就不需要解释了，相信能根据题目选择看文章的话都知道啥是轮播图，如果哪位读者老爷真的让非要我解释一下啥是轮播图，求您饶了在下吧，真心词穷~

为了方便大家观看，我把css，html，js都写在一个文件里。

swiper插件实现轮播图

swiper是一个实现轮播图很强大，上手也容易。并且也是现在app，网址等用的最多的，
官方网址：http://www.swiper.com.cn/
下载插件导入，按照教程即可实现精美效果

运行效果


GIF.gif

代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="swiper-3.4.1.min.css">
    <script type="text/javascript" src="jquery/jquery-3.0.0.min.js"></script>
    <script type="text/javascript" src="swiper-3.4.1.jquery.min.js"></script>
    <style type="text/css">
        .swiper-container{
            width: 790px;
            height: 340px;
        }
    </style>
</head>

<!-- 结构以及class的类名不允许更改 -->
<body>
    <div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">![]((1).jpg)</div>
        <div class="swiper-slide">![]((2).jpg)</div>
        <div class="swiper-slide">![]((3).jpg)</div>
        <div class="swiper-slide">![]((4).jpg)</div>
        <div class="swiper-slide">![]((5).jpg)</div>
        <div class="swiper-slide">![]((6).jpg)</div>
        <div class="swiper-slide">![]((7).jpg)</div>
        <div class="swiper-slide">![]((8).jpg)</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- 如果需要滚动条 -->
    <!-- <div class="swiper-scrollbar"></div> -->
</div>

<script type="text/javascript">
    var mySwiper = new Swiper ('.swiper-container', {
      // 滚动方向 horizontal/vertical
    direction: 'horizontal',
    // 自动播放
    autoplay:2000,
    // 是否循环播放
    loop: true,
    // 如果需要分页器（小圆点）
    // 是否需要分页器
    pagination: '.swiper-pagination',
    // 点击分页器是否切换到对应的图片 是 true 否 false
    paginationClickable:true,

    // 如果需要前进后退按钮
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',

     // 用户操作swiper之后，是否禁止autoplay。默认为true：停止。
    // 如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。
    // 操作包括触碰，拖动，点击pagination等。
    autoplayDisableOnInteraction:false,
  }) 

</script>
</body>

</body>
</html>

JS实现轮播图

运行效果


GIF.gif


代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        #loopDiv{
            width: 790px;
            height: 340px;
            margin: 0 auto;
            position: relative;
        }

        #list{
            list-style: none;

            position: absolute;
            bottom: 10px;
            left: 250px;
        }
        #list li{
            float: left;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            border-radius: 50%;
            background: #aaa;
            margin-right: 10px;
        }
        .chooseBut{
            width: 50px;
            height: 80px;
            background-color: rgba(0,0,0,0.2);
            color: #fff;
            font-size: 30px;
            line-height: 80px;
            text-align: center;
            display: none;
        }
        #left{
            position: absolute;
            left: 0px;
            top: 130px;
        }
        #right{
            position: absolute;
            right: 0px;
            top: 130px;
        }
    </style>
</head>
<body>
    <div id="loopDiv">
        ![](img/0.jpg)
        <ul id="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
        <div id="left" class="chooseBut"><</div>
        <div id="right" class="chooseBut">></div>
    </div>
    <script type="text/javascript">
        var jsDivBox = document.getElementById("loopDiv");
        //图片节点
        var jsImg = document.getElementById("pic");
        //左右按钮节点
        var jsLeft = document.getElementById("left");
        var jsRight = document.getElementById("right");
        //获取所有的li
        var jsUl = document.getElementById("list");
        var jsLis = jsUl.getElementsByTagName("li");
        //让第一个小圆点变为红色
        jsLis[0].style.backgroundColor = "red";

        //显示当前的图片下标
        var currentPage = 0;

        //启动定时器
        var timer = setInterval(func, 1000);
        function func() {
            currentPage++;
            changePic();

        }
        function changePic() {
            if (currentPage == 8) {
                currentPage = 0;
            }
            if (currentPage == -1) {
                currentPage = 7;
            }
            //更换图片
            //"img/1.jpg"
            jsImg.src = "img/" + currentPage + ".jpg";
            //将所有的小圆点颜色清空
            for (var i = 0; i < jsLis.length; i++) {
                jsLis[i].style.backgroundColor = "#aaa";
            }
            //改变对应小圆点为红色
            jsLis[currentPage].style.backgroundColor = "red";
        }

        //鼠标进入
        jsDivBox.addEventListener("mouseover", func1, false);
        function func1() {
            //停止定时器
            clearInterval(timer);
            //显示左右按钮
            jsLeft.style.display = "block";
            jsRight.style.display = "block";
        }
        //鼠标移出
        jsDivBox.addEventListener("mouseout", func2, false);
        function func2() {
            //重启定时器
            timer = setInterval(func, 1000);

            //隐藏左右按钮
            jsLeft.style.display = "none";
            jsRight.style.display = "none";
        }

        //点击左右按钮
        jsLeft.addEventListener("click", func3, false);
        function func3() {
            currentPage--;
            changePic();
        }
        jsLeft.onmouseover = function() {
            this.style.backgroundColor = "rgba(0,0,0,0.6)";
        }
        jsLeft.onmouseout = function() {
            this.style.backgroundColor = "rgba(0,0,0,0.2)";
        }
        jsRight.addEventListener("click", func4, false);
        function func4() {
            currentPage++;
            changePic();
        }
        jsRight.onmouseover = function() {
            this.style.backgroundColor = "rgba(0,0,0,0.6)";
        }
        jsRight.onmouseout = function() {
            this.style.backgroundColor = "rgba(0,0,0,0.2)";
        }

        //进入小圆点
        for (var j = 0; j < jsLis.length; j++) {
            jsLis[j].onmouseover = function() {
                currentPage = parseInt(this.innerHTML) - 1;
                changePic();
            };
        }

    </script>
</body>
</html>

jQuery实现轮播图

运行结果


GIF.gif


代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .pic{
            width: 790px;
            height: 340px;
            margin: 10px auto;
            position: relative;
            overflow: hidden;
        }
        .content{
            width: 99999px;
            height: 340px;
            position: absolute;
            left: 0px;
            top: 0px;

        }
        .content img{
            float: left;
        }
        .index{
            position: absolute;
            left: 300px;
            bottom: 5px;
            width: 200px;
            height: 20px;
            list-style: none;
        }
        .index li{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            float: left;
            margin-left: 10px;
            background-color: rgba(100,100,100,0.3);
        }

        .left{
            width: 30px;
            height:50px;
            background-color:rgba(100,100,100,0.5);  
            position: absolute;
            left: 0px;
            top: 150px;
            line-height: 50px;
            text-align: center;
            font-size: 20px;
            color: #fff;
            display: none;
        }
        .right{
            width: 30px;
            height:50px;
            background-color:rgba(100,100,100,0.5);  
            position: absolute;
            right: 0px;
            top: 150px;
            line-height: 50px;
            text-align: center;
            font-size: 20px;
            color: #fff;
            display: none;
        }
        .index .first{
            background-color: red;
        }

    </style>
    <script type="text/javascript" src="jquery/jquery-3.0.0.min.js"></script>
</head>
<body>
    <div class="pic">
        <div class="content">
            ![](img/(1).jpg)
            ![](img/(2).jpg)
            ![](img/(3).jpg)
            ![](img/(4).jpg)
            ![](img/(5).jpg)
            ![](img/(6).jpg)
            ![](img/(7).jpg)
            ![](img/(8).jpg)
        </div>
        <ul class="index">
            <li class="first"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="right">></div>
        <div class="left"><</div>
    </div>
    <script type="text/javascript">
        $(function(){
            //每个固定的时间移动图片
            var timer = setInterval(picLoop,1000);
            var index = 0;
            function picLoop(){
                index++;
                if (index==8) {index=0;}
                $(".content").animate({"left":-790*index},300);
                $("li").eq(index).css("background-color","red")
                       .siblings().css("background-color","rgba(100,100,100,0.3)");
            }

            //定时器的控制
            $(".pic").hover(function(){
                clearInterval(timer);
                $(".left").show();
                $(".right").show();
            },function(){
                timer = setInterval(picLoop,1000);
                $(".left").hide();
                $(".right").hide();
            })

            $("li").mouseover(function(){
                $(this).css("background-color","red")
                       .siblings().css("background-color","rgba(100,100,100,0.3)");
                index = $(this).index();
                $(".content").animate({"left":-790*index},300);

            })

            $(".left").click(function(){
                index--;
                if (index==-1) {index=7;}
                $(".content").animate({"left":-790*index},300);
                $("li").eq(index).css("background-color","red")
                       .siblings().css("background-color","rgba(100,100,100,0.3)");
            })
            $(".right").click(function(){
                index++;
                if (index==8) {index=0}
                $(".content").animate({"left":-790*index},300);
                $("li").eq(index).css("background-color","red")
                       .siblings().css("background-color","rgba(100,100,100,0.3)");    
            })


        })
    </script>
</body>
</html>

css3实现轮播图

css3的轮播实用性差，但是也可以使用，但是可以锻炼我们的思维。
运行效果


GIF.gif


代码部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        * {
              margin:0;
            padding:0;
        }

        ul {
              list-style:none;
        }
        .loop{
            position: relative;
            margin:30px auto;
            width:600px;
            height:300px;
        }

        #wrap {
              position:relative;
              width:600px;
              height:300px;
               border:1px solid #9cc5ef;
               overflow:hidden;
        }

        #slider {
              width:300%;
              height:100%;
              font:100px/400px Microsoft Yahei;
              text-align:center;
              color:#fff;
              margin-left:0;
              -webkit-animation:slide1 3s ease-out infinite;
        }

        #slider li {
              float:left;
              width:600px;
              height:100%;
        }
        #slider img{
             width:600px;
             height:100%;
        }
        /*创建三种动画策略*/
        @-webkit-keyframes slide1 {
          0% { margin-left:0;}
          23% { margin-left:0;}
          33% { margin-left:-600px;}
          56% { margin-left:-600px;}
          66% { margin-left:-1200px;}
          90% { margin-left:-1200px;}
          100% {margin-left:0;}
        }

        @-webkit-keyframes slide2 {
          0% { margin-left:-600px;}
          23% { margin-left:-600px;}
          33% { margin-left:-1200px;}
          56% { margin-left:-1200px;}
          66% { margin-left:0;}
          90% { margin-left:0;}
          100% {margin-left:-600px;}
        }

        @-webkit-keyframes slide3 {
          0% { margin-left:-1200px;}
          23% { margin-left:-1200px;}
          33% { margin-left:0;}
          56% { margin-left:0;}
          66% { margin-left:-600px;}
          90% { margin-left:-600px;}
          100% {margin-left:-1200px;}
        }


        /*当我们点击对应按钮时显示对应的动画*/
        #first:checked ~ #wrap #slider {
          -webkit-animation-name:slide1;
        }

        #second:checked ~ #wrap #slider {
          -webkit-animation-name:slide2;
        }

        #third:checked ~ #wrap #slider {
          -webkit-animation-name:slide3;
        }


        /*短暂地取消动画名称，模拟重启动画*/
        #first:active ~ #wrap #slider {
          -webkit-animation-name:none;
          margin-left:0;
        }

        #second:active ~ #wrap #slider {
          -webkit-animation-name:none;
          margin-left:-600px;
        }

        #third:active ~ #wrap #slider {
          -webkit-animation-name:none;
          margin-left:-1200px;
        }
        #opts {
          width:600px;
          height:40px;
          margin:auto;
          color:#fff;
          text-align:center;
          font:16px/30px Microsoft Yahei;
          position: absolute;
          top: 260px;
          left: 250px;
        }

        #opts label {
          float:left;
          width:30px;
          height:30px;
          margin-right:10px;
          background:#cccccc;
          cursor:pointer;
          border-radius: 50%;
        }

        #opts label:hover {
          background:#405871;
        }

        /* 隐藏Input按钮*/
        #first, #second, #third {
          display:none;
        }

        </style>
    </head>
    <body>
        <div class="loop">
            <input type="radio" name="slider" id="first">
            <input type="radio" name="slider" id="second">
            <input type="radio" name="slider" id="third">

            <div id="wrap">
              <ul id="slider">
                <li>![](img/0.jpg)</li>
                <li>![](img/1.jpg)</li>
                <li>![](img/2.jpg)</li>
              </ul>
            </div>  
            <div id="opts">
              <label for="first">1</label>
              <label for="second">2</label>
              <label for="third">3</label>
            </div>
        </div>
    </body>
</html>

觉得有收获就点赞啦




猜你喜欢

转载自blog.csdn.net/weixin_41897234/article/details/80658856
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022