图片轮播

Posted 2020-08-19 尘暮

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片轮播相关的知识，希望对你有一定的参考价值。

#datu
{
    width:800px;
    height:500px;
    position:relative;
    margin:50px auto;
    overflow:hidden;}
#ta
{
    margin-left:0px;
    transition:0.7s;}
.lr
{
    position:absolute;
    top:230px;
    width:32px;
    height:32px;
    z-index:99;}
#left
{
    left:10px;
}
#right
{
    right:10px;
}

</style>
</head>

<body>
<div id="datu" onmouseover="pause()" onmouseout="conti()">
    <table id="ta" cellpadding="0" cellspacing="0">
        <tr height="500">
            <td width="800"><img src="Images/1.jpg" /></td>
            <td width="800"><img src="Images/2.jpg" /></td>
            <td width="800"><img src="Images/3.jpg" /></td>
            <td width="800"><img src="Images/4.jpg" /></td>
            <td width="800"><img src="Images/5.jpg" /></td>
        </tr>
    </table>
    <div class="lr" id="left" onclick="dong(-1)">
        <img src="Images/left.png" />
    </div>
    <div class="lr" id="right" onclick="dong(1)">
        <img src="Images/right.png" />
    </div>
</div>
</body>
</html>
<script>
document.getElementById("ta").style.marginLeft="0px";
function huan()
{
    var tu =document.getElementById("ta");
    var a=parseInt(tu.style.marginLeft);    
    if(a<=-3200)
    {
        tu.style.marginLeft="0px";    
    }
    else
    {
        tu.style.marginLeft= (a-800)+"px";    
    }
    shi =window.setTimeout("huan()",1000);    
}
var shi =window.setTimeout("huan()",1000);

function pause()/*鼠标指向大图*/
{
    window.clearTimeout(shi);    
}

function conti()/*鼠标移开大图*/
{
    shi = window.setTimeout("huan()",3000);    
}

function dong(ad)
{
    var tu =document.getElementById("ta");
    var a=parseInt(tu.style.marginLeft);
    if(ad==-1)
    {
        if(a==0)
        {
            tu.style.marginLeft=-3200+"px";    
        }
        else
        {
            tu.style.marginLeft= (a+800)+"px";    
        }    
    }
    else
    {
        if(a==-3200)
        {
            tu.style.marginLeft=0+"px";    
        }
        else
        {
            tu.style.marginLeft= (a-800)+"px";    
        }        
    }
}

<meta name="viewport" content="width = device-width, initial-scale = 1.0" />
<link href="royalslider/royalslider.css" rel="stylesheet">
<script src="royalslider/jquery-1.8.3.min.js"></script>
<script src="royalslider/jquery.royalslider.min.js?v=9.3.6"></script>
<link href="preview-assets/css/reset.css?v=1.0.4" rel="stylesheet">
<link href="royalslider/skins/default/rs-default.css?v=1.0.4" rel="stylesheet">
<style>
      #video-gallery {
  width: 100%;
}

.videoGallery .rsTmb {
  padding: 20px;
}
.videoGallery .rsThumbs .rsThumb {
  width: 220px;
  height: 80px;
  border-bottom: 1px solid #2E2E2E;
}
.videoGallery .rsThumbs {
  width: 220px;
  padding: 0;
}
.videoGallery .rsThumb:hover {
  background: #000;
}
.videoGallery .rsThumb.rsNavSelected {
  background-color: #02874A;
  border-bottom:-color #02874A;
}

.sampleBlock {
  left: 3%; 
  top: 1%; 
  width: 100%;
  max-width: 400px;
}

.rsVideoContainer {
width:100%; 
height:100%; 
overflow:hidden; 
display:block; 
float:left; 
}


@media screen and (min-width: 0px) and (max-width: 500px) {
  .videoGallery .rsTmb {
    padding: 6px 8px;
  }
  .videoGallery .rsTmb h5 {
    font-size: 12px;
    line-height: 17px;
  }
  .videoGallery .rsThumbs.rsThumbsVer {
    width: 100px;
    padding: 0;
  }
  .videoGallery .rsThumbs .rsThumb {
    width: 100px;
    height: 47px;
  }
  .videoGallery .rsTmb span {
    display: none;
  }
  .videoGallery .rsOverflow,
  .royalSlider.videoGallery {
    height: 300px !important;
  }
  .sampleBlock {
    font-size: 14px;
  }
}

    </style>
    
  </head>
  <body >

  <div  class="page wrapper main-wrapper">  
      <div class="row clearfix">
    <div id="page-navigation" class="col span_6"> 
         
        <div class="left page-nav-item"></div> 
         
          
        <div class="right page-nav-item"></div> 
         
        
    </div> 
</div>
<div class="row clearfix">
  <div class="col span_6 fwImage">
<div id="video-gallery" class="royalSlider videoGallery rsDefault">
  <a class="rsImg" data-rsw="843" data-rsh="473" href="../../../小组/qaq/首页/4.jpg">
    <div class="rsTmb">
      <h5>New Ro123123yalSlider</h5>
      <span>21</span>
    </div>
  </a>
   <a class="rsImg" data-rsVideo="https://vimeo.com/45830194" href="img/video/08.jpg">
    <div class="rsTmb">
      <h5>Stanley Piano</h5>
      <span>by Digital Kitchen</span>
    </div>
  </a>
  <div class="rsContent">
    <a class="rsImg" data-rsVideo="https://vimeo.com/31240369" href="img/video/07.jpg">
      <div class="rsTmb">
        <h5>I Believe I Can Fly</h5>
        <span>by sebastien montaz-rosset</span>
      </div>
    </a>
    <h3 class="rsABlock sampleBlock">Animated block, to show you that you can put anything you want inside each slide.</h3>
  </div>
   <a class="rsImg" data-rsVideo="https://vimeo.com/44878206" href="img/video/06.jpg">
    <div class="rsTmb">
      <h5>Dubstep Dispute</h5>
      <span>by Fluxel Media</span>
    </div>
  </a>
  <a class="rsImg" data-rsVideo="https://vimeo.com/45778774" href="img/video/05.jpg">
    <div class="rsTmb">
      <h5>The Epic & The Beasts</h5>
      <span>by Sebastian Linda</span>
    </div>
  </a>
   <a class="rsImg" data-rsVideo="https://vimeo.com/41132461" href="img/video/04.jpg">
    <div class="rsTmb">
      <h5>Barcode Band</h5>
      <span>by Kang woon Jin</span>
    </div>
  </a>
 <a class="rsImg" data-rsVideo="hhttps://vimeo.com/44388232" href="img/video/03.jpg">
    <div class="rsTmb">
      <h5>Samm Hodges Reel</h5>
      <span>by Animal</span>
    </div>
  </a>
  <a class="rsImg" href="img/video/02.jpg">
    <div class="rsTmb">
      <h5>The Foundry Showreel</h5>
      <span>by The Foundry</span>
    </div>
  </a>
</div>
  </div>
 
</div>

  </div>
  <div class="wrapper page">

    <script>
      jQuery(document).ready(function($) {
  $(‘#video-gallery‘).royalSlider({
    arrowsNav: false,
    fadeinLoadedSlide: true,
    controlNavigationSpacing: 0,
    controlNavigation: ‘thumbnails‘,

    thumbs: {
      autoCenter: false,
      fitInViewport: true,
      orientation: ‘vertical‘,
      spacing: 0,
      paddingBottom: 0
    },
    keyboardNavEnabled: true,
    imageScaleMode: ‘fill‘,
    imageAlignCenter:true,
    slidesSpacing: 0,
    loop: false,
    loopRewind: true,
    numImagesToPreload: 3,
    video: {
      autoHideArrows:true,
      autoHideControlNav:false,
      autoHideBlocks: true
    }, 
    autoScaleSlider: true, 
    autoScaleSliderWidth: 960,     
    autoScaleSliderHeight: 450,

    imgWidth: 640,
    imgHeight: 360

  });
});

    </script>

  </div>
 
  </body>
</html>

以上是关于图片轮播的主要内容，如果未能解决你的问题，请参考以下文章

网页设计图片轮播，将鼠标放在图片上，图片会自动播放，代码怎么改？

轮播图片高效图片轮播，两个imageView实现