无缝轮播和有缝轮播

来源：互联网发布：win10引导安装ubuntu 编辑：程序博客网时间：2024/05/29 10:58
<!doctype html><html><head><meta charset="utf-8"><title>图片无缝轮播显示</title><base href="<?php echo base_url() ?>"><script type="text/javascript" src="./public/jquery-1.7.2.min.js"></script><style>  .box,.box2{    width:500px;    height:240px;    margin:160px auto;    overflow:hidden;    position:relative;}  .box,.box2 p{    text-align:center;}  .picBox,.picBox2{    margin:0px;    padding:0px;    list-style:none;    width:1500px;} <!--此处很关键，在实现无疑轮播时这个宽度一定要比显示图片数量+1的宽度宽-->  .picBox:hover,.picBox2:hover{    cursor:pointer;}  .picBox li,.picBox2 li{    float:left;}  .picBox img,.picBox2 img{    width:200px;    height:240px;}</style></head><body>  <div class="box">    <p>第一种图片轮播：非无缝轮播</p>    <span></span>    <ul class="picBox">      <li><img src="./public/images/(156).jpg"/></li>      <li><img src="./public/images/(160).jpg"/></li>      <li><img src="./public/images/(77).jpg"/></li>      <li><img src="./public/images/(86).jpg"/></li>      <li><img src="./public/images/(77).jpg"/></li>    </ul>  </div>  <div class="box2">    <p>第二种图片轮播：无缝轮播</p>    <span></span>    <ul class="picBox2">      <li><img src="./public/images/(160).jpg"/></li>      <li><img src="./public/images/(156).jpg"/></li>      <li><img src="./public/images/(156).jpg"/></li>      <li><img src="./public/images/(77).jpg"/></li>      <li><img src="./public/images/(86).jpg"/></li>    </ul>  </div><script>  $(function(){    <!--第一种图片轮播：非无缝轮播-->    function rollOne(){      $(".picBox li:first").animate({left:"-=200px"},"linear",function(){        $(this).remove().clone(true).appendTo(".picBox").fadeIn("slow");      });    }    var startRollOne=setInterval(rollOne,5000);    <!--鼠标移入停止移出继续-->    $(".box").hover(function(){      clearInterval(startRollOne);    },function(){      startRollOne=setInterval(rollOne,5000);    });    <!--第二种图片轮播：无缝轮播-->    <!--这种无缝轮播可以通过设置animate动画播放速度值和setInterval中的函数调用时间间隔实现间隔无缝轮播-->    function rollTwo(){      $(".picBox2").animate({marginLeft:"-200px"},2000,"linear",function(){        $(".picBox2").css({marginLeft:"0px"});        $(".picBox2 li:first").remove().clone(true).appendTo(".picBox2");      })    }    var startRollTwo=setInterval(rollTwo,2000);    <!--鼠标移入停止移出继续-->    $(".picBox2").hover(function(){      clearInterval(startRollTwo);    },function(){      startRollTwo=setInterval(rollTwo,2000);    });  });  function time(){    //获取放学的时间    var old_time = new Date('2016 6 6 11:30:00');    //获取当前时间    var new_time = new Date();    //alert(new_time.getTime());    //获取时间差的时间戳    var time = (old_time.getTime() - new_time.getTime());    //获取小时    days = parseInt(time/1000/60/60%24);    //alert(days)    //获取分钟    hours = parseInt(time/1000/60%60);    //获取秒    minutes = parseInt(time/1000%60);    $("span").html("距离放学还有："+days+"小时"+hours+"分钟"+minutes+"秒");  }  setInterval("time()",1000);  //setTimeout("time()",1000);</script></body></html>
0 0