无缝轮播和有缝轮播

最新推荐文章于 2024-05-21 09:17:08 发布

lwc863481702

最新推荐文章于 2024-05-21 09:17:08 发布

阅读量1.1k

点赞数

分类专栏： php 其他

本文链接：https://blog.csdn.net/lwc863481702/article/details/52641340

版权

php 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

其他

2 篇文章 0 订阅

订阅专栏

<!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>

lwc863481702

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
无缝轮播和有缝轮播

图片无缝轮播显示"> .box,.box2{ width:500px; height:240px; margin:160px auto; overflow:hidden; position:relative;} .box,.box2 p{ text-align:center;} .picBox,.picBox2{ margi
复制链接

扫一扫

专栏目录