SHARE
TWEET

Untitled

a guest Oct 14th, 2019 88 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <style type="text/css">
  6.         #bannerBox{
  7.             width:520px;
  8.             margin: 0 auto;
  9.             border:1px solid black;
  10.             padding:10px;
  11.             position: relative;
  12.         }
  13.  
  14.         #bannerBox img{
  15.             display: none;
  16.         }
  17.         /*子级元素 absolute。是要根据 具有定位能力的父亲级元素。*/
  18.         #bannerBox input{
  19.             position: absolute;
  20.             top:40%;
  21.         }
  22.     </style>
  23. </head>
  24.  
  25. <body>
  26.     <div id ="bannerBox">
  27.         <img src="images/banner01.jpg" style="display: block">
  28.         <img src="images/banner02.jpg">
  29.         <img src="images/banner03.jpg">
  30.         <img src="images/banner04.jpg">
  31.         <input type="button" name="" value="<" id="leftBtn" style="left:0;">
  32.         <input type="button" name="" value=">" id="rightBtn" style="right:0;">
  33.     </div>
  34.     <script type="text/javascript">
  35.  
  36.     var slideRight = function() {
  37.             tag++;
  38.             if(tag>3){
  39.                 tag=0;
  40.             }
  41.             for(var i = 0; i < allImg.length; i++){
  42.                 allImg[i].style.display ='none';
  43.             }
  44.             allImg[tag].style.display ='block';
  45.         }
  46.        
  47.         var slideLeft = function() {
  48.             tag--;
  49.             if(tag<0){
  50.                 tag=3;
  51.             }
  52.             for (i= 0; i<allImg.length; i++){
  53.                 allImg[i].style.display ='none';
  54.             }  
  55.             allImg[tag].style.display ='block';
  56.         }
  57.  
  58.         /*
  59.         轮播图的制作
  60.             1.会自动切换
  61.             2.循环播放
  62.             3.鼠标放上去后,停止播放,移出后恢复播放
  63.             4.下方小圆点,可以点击切换图片
  64.             5.左右可以切换
  65.  
  66.  
  67.         */
  68.         //1.实现自动切换
  69.         //手动设置一个下标 用于 轮播图切换效果
  70.  
  71.         var tag = 0;
  72.         var allImg = document.getElementById('bannerBox').getElementsByTagName('img');
  73.         // console.log(allImg);
  74.        
  75.         var timer = setInterval(slideRight, 2000);
  76.         //以上会一直++到两百多,不可行。
  77.  
  78.         //鼠标移入暂停,鼠标移出, 恢复轮播
  79.         var oBox = document.getElementById('bannerBox');
  80.         oBox.onmouseover = function(){
  81.             // alert(1);
  82.             clearInterval(timer);
  83.         }
  84.  
  85.         oBox.onmouseleave= function(){
  86.             //去掉 var 避免变成局部, 直接 set value to the timer
  87.             timer = setInterval(slideRight, 2000);
  88.         }
  89.        // 设置左右箭头, 按钮
  90.  
  91.        // 给按钮安装点击事件
  92.        // 按完之后切换图片
  93.  
  94.        var oLeft = document.getElementById('leftBtn');
  95.        oLeft.onclick = slideLeft;
  96.  
  97.        var oRight = document.getElementById('rightBtn');
  98.        oRight.onclick = slideRight;
  99.     </script>
  100.  
  101. </body>
  102. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top