zoukankan      html  css  js  c++  java
  • 轮播2-css

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>图片无缝轮播显示</title>
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <style>
    .box,.box2{
    800px;
    height:260px;
    margin:160px auto;
    overflow:hidden;
    position:relative;}
    .box,.box2 p{
    text-align:center;}
    .picBox,.picBox2{
    margin:0px;
    padding:0px;
    list-style:none;
    1500px;}
    /*<!--此处很关键,在实现无疑轮播时这个宽度一定要比显示图片数量+1的宽度宽-->*/
    .picBox:hover,.picBox2:hover{
    cursor:pointer;}
    .picBox li,.picBox2 li{
    float:left;}
    .picBox img,.picBox2 img{
    200px;
    height:240px;}
    </style>
    </head>
    <body>
    <div class="box2">
    <p>第二种图片轮播:无缝轮播</p>
    <ul class="picBox2">
    <li><img src="images/1.jpg"/></li>
    <li><img src="images/2.jpg"/></li>
    <li><img src="images/3.jpg"/></li>
    <li><img src="images/4.jpg"/></li>
    <li><img src="images/5.jpg"/></li>
    </ul>
    </div>
    <script>
    $(function(){
    function rollTwo(){
    $(".picBox2").css({marginLeft:"-200px"});
    $(".picBox2 li:first").remove().clone(true).appendTo(".picBox2");
    }
    var startRollTwo=setInterval(rollTwo,1000);
    //<!--鼠标移入停止移出继续-->
    $(".picBox2").hover(function(){
    clearInterval(startRollTwo);
    },function(){
    startRollTwo=setInterval(rollTwo,2000);
    });
    });
    </script>
    </body>
    </html>

  • 相关阅读:
    浅析http缓存
    多级路由请求js文件路径不对的解决方法
    移动端屏幕适配原理以及方法讲解
    zoom与scale的异同
    querySelectorAll选择器的js实现
    垂直居中效果汇总
    windows配置php开发环境
    CentOS 6.2安装nagios
    Ganglia安装
    Ubuntu 14.04上安装Riak
  • 原文地址:https://www.cnblogs.com/liuhuilh/p/6681999.html
Copyright © 2011-2022 走看看