#datu { 800px; height:500px; position:relative; margin:50px auto; overflow:hidden;} #ta { margin-left:0px; transition:0.7s;} .lr { position:absolute; top:230px; 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- 0px) and (max- 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>