CSS3实现轮播图效果2

先前用CSS3做了一个一张图片实现的轮播,但是这样的图片很难找,于是又改进了一下。

HTML:

<div class="box">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

CSS:

<style>
        .box{
            position: relative;
            width: 500px;
            height: 300px;
            overflow: hidden;
            margin: 100px auto;
        }
        div ul{
            position: relative;
            top: 0;
            left: 0;
            width: 400%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
            animation: lb 12s  cubic-bezier(0.3,0.4,0.3,1) 0s infinite;
        }
        @keyframes lb {
            0%{
                left: 0%;
            }
            25%{
                left: -100%;
            }
            50%{
                left: -200%;
            }
            75%{
                left: -300%;
            }
            100%{
                left: 0%;
            }
        }
        .box ul li{
            float: left;
            height: 100%;
            list-style: none;
            width: 25%;
        }
        .box ul li:nth-of-type(1){
            background-color: #999;
        }
       .box ul li:nth-of-type(2){
            background-color: #FEA;
        }
        .box ul li:nth-of-type(3){
            background-color: #F00;
        }
        .box ul li:nth-of-type(4){
            background-color: #000;
        }

</style>

原理和上次轮播差不多,让ul改变位置。轮播图片,在li里放图片即可。

时间: 2024-09-29 18:31:36

CSS3实现轮播图效果2的相关文章

css3百叶窗轮播图效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>    <head>        <!--声明当前页面的编码集charset=gbk中文编码gb2312,charset=utf-8 国际编码-->        &

js实现轮播图效果(附源码)--原生js的应用

1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="Author" content="奇客艺术"> <meta name="keyword" content="关键字"> <meta name=

JavaScript实现移动端轮播图效果

功能描述: 自动无缝轮播图片,底部小圆点跟图片保持一致:手指左右移动轮播图,移动距离大于50px播放下一张(或上一张),小于50px则回弹 具体功能实现: 1.定时器 自动轮播图片 先声明一个index=0用来存图片索引: 添加一个定时器,每隔两秒调用一次,每调用一次定时器(图片播放一次)index就加一: 通过transform(变形)属性和transition(过渡)属性实现图片的轮播. 1 var index = 0; 2 var timer = setInterval(function(

【学习ios之路:UI系列】实现轮播图效果(UIImageView,UIScrollView,UIPageControl,NSTimer相结合)

实现效果,在不点击的情况下,自定滚动,点击时,停止.如下图 部分代码如下: //调用NSTimer方法,自定计时 - (void)autoScroll { self.timer = [NSTimer scheduledTimerWithTimeInterval:1.5 target:self  selector:@selector(scrollToRight) userInfo:nil repeats:YES]; } //实现触发方法 - (void)scrollToRight { [UIVie

AngularJS:实现轮播图效果

要实现这个功能,可以https://github.com/sroze/ngInfiniteScroll这个第三方控件实现的.实现步骤如下: 1. 下载ng-infinite-scroll.js程序http://sroze.github.io/ngInfiniteScroll/ 目前版本是1.0.0 2. 如果你是用的jQuery2.0以上版本,还需要修改ng-infinite-scroll.js程序,将所有的将所有的$window.xxx改为$(window).xxx, elem.xxx改为$(

Html5如何快速在页面中写出多个轮播图效果

我们在做项目的过程中,有时候客户需求要求你在同一个页面中,写几个不同样式的轮播图效果,那么如何快速实现呢?(要知道若果你每个轮播图都要用原生javascript写的话,会很麻烦,代码也不够简洁) 这里我们就可以借助插件来实现这一功能,swiper.js就是一个专门处理轮播图效果的js库,下面举例来说明: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g

花瓣网轮播图效果

没有加上定时器效果,仅仅能手动进行图片的切换 效果图: index.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>index</title> &

css3无缝轮播图案例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } div{ width: 1000px; margin:300px auto; border:1px solid #ccc; overflow: hid

实现比较简单的轮播图效果

实现简单的轮播图效果. 废话不多说,我们开始. HTML和CSS较为简单,不在这里做赘述.简单的给大家一个HTML代码. <div class="carousel"> <div id="goLeft"></div> <ul> <li><img src="" /></li> <li><img src="" /></l