css3简单的图片轮播

    <style>
    @-webkit-keyframes move{
        0%{left:0px;}
        100%{left:-500px;}
    }
    #wrap{
        width:500px;
        height:100px;
        border:1px solid #000000;
        position:relative;
        margin:100px auto;
        overflow:hidden;

    }
    /*定位的时候可以不写px*/
    #list{
               position:absolute;
               left:0;
               padding:0px;
               padding:0px;
               -webkit-animation:3s move infinite;width:200%;
            }
      #list li{
    list-style:none;
    width:98px;
    height:98px;
    border:1px solid #234aab;
    color:#ffffff;
    background:#000;
    font-size:50px;
    text-align:center;
    float:left;
}
     /*-webkit-animation-play-state:paused;当鼠标放上去时停止*/
     #wrap:hover #list{
       -webkit-animation-play-state:paused;
     }
    </style>
</head>
<body>

    <div id="wrap">
    <!-- li{$}*5 -->
        <ul id="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>

时间： 2024-08-06 07:56:29

css3简单的图片轮播的相关文章

css3实践之图片轮播（Transform，Transition和Animation）

原文:css3实践之图片轮播(Transform,Transition和Animation) 楼主喜欢追求视觉上的享受,虽常以牺牲性能无法兼容为代价却也乐此不疲.本文就通过一个个的demo演示来简单了解下css3下的Transform,Transition和Animation. 本文需要实现效果:(请用chrome打开) 图片轮播图片自动轮播 Transform 根据我的理解,transform和width.height.background一样,都是dom的属性,不同的是它是css3旗下的,

js最简单焦点图片轮播代码

将下面代码保存为banner.js,在需要显示焦点图的地方调用该js即可. <script type="text/javascript" src="banner.js"></script> 注意:代码中图片路径修改为你自己的图片地址 var widths=725; //焦点图片宽 var w=0; var widthss=widths+w; var heights=295; //焦点图片高 var heightss=heightss+w; v

简单的图片轮播效果

用js代码来实现一个简单的图片轮播效果鼠标移入图片后显示左右箭头按钮,点击就可以实现图片的切换. 以下分别是html代码和js代码,欢迎批评和讨论! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮播</title> <style> *{padding:0px; margin:0px;

一个简单的图片轮播功能（图片自动播放，点击控件可直接跳转对对应图片）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

简单的图片轮播jquery

转自:http://www.oschina.net/code/snippet_590876_14396 html代码  <div class='contentone'> <div class='checkone'> <a><img src='http://images.mangocity.com/upload/6998122/201172320545.jpg'/></a> <a class='site

纯CSS3代码实现简单的图片轮播

以4张图片为例:1.基本布局:将4张图片左浮动横向并排放入一个div容器内,图片设置统一尺寸,div宽度设置4个图片的总尺寸,然后放入相框容器div,相框设置1个图片的大小并设置溢出隐藏,以保证正确显示一个照片.2.设置动画:然后使用css3动画,通过对photos进行位移,从而达到显示不同的图片,每次偏移一个图片的宽度,即可显示下一张图片.4张图片,需要切换3次.根据需要可以对各个图片添加相应的序号和图片简介. 3.代码如下: <style> #frame{position:absolute

js实现简单的图片轮播

js代码如下 1 <script type="text/javascript"> 2 var n=1; 3 var map=new Array(); 4 map[0]=new Image(); 5 map[1]=new Image(); 6 map[2]=new Image(); 7 map[3]=new Image(); 8 map[4]=new Image(); 9 map[5]=new Image(); 10 map[0].src="images/0.jpg

使用jQuery实现简单的图片轮播

<style> *{ box-sizing: border-box; margin: 0px; padding: 0px; } body{ background-color: lightgray; } .MarginDiv{ border: 1px solid green; width: 1320px; height: 245px; overflow: hidden; margin: 0px auto; position: relative; } .M

一个简单的图片轮播效果，

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <style type="text/css"> .asd{ background-color:#1ADC9D; border:2px solid:#F30A0E; width:25px; height:25px