js轮播图

来源：互联网发布：js单例模式用处编辑：程序博客网时间：2024/05/17 01:07

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           .box{
               width: 408px;
               height: 304px;
               background: gray;
               margin: auto;
               padding-top: 4px;
           }
           .pic {
               width: 400px;
               height: 300px;
               background: pink;
               margin: auto;
               position: relative;
           }
           .pic img{
               width: 100%;
               height: 100%;
           }
           #left,#right{
               width: 40px;
               height: 30px;
               background: honeydew;
               display: inline-block;
               font-size:30px;
               text-align: center;
               top: 140px;
               position: absolute;
           }
           #left{
               left: 4px;
           }
           #right{
               right: 4px;
           }
           #top{
               width: 100%;
               height: 34px;
               background: rgba(0,0,0,0.7);
               text-align: center;
               color: #fff;
               position: absolute;
               line-height: 34px;
               top: 0;
           }
           ul{
               list-style: none;
               overflow: hidden;
               bottom: 0;
               position: absolute;
               width: 180px;
               height: 130px;
               left: 110px;
           }
           ul li{
               width: 10px;
               height: 10px;
               background: gray;
               border-radius: 50%;
               float: left;
               margin-left: 3px;
               position: relative;
                 margin-top: 100px;
           }
           ul li p{
               position: absolute;
               top: -100px;
               width: 86px;
               height: 80px;
               background-size: 100% 100%;
               display: none;
               border-radius: 6px;
           }

       </style>
   </head>
   <body>
       <div class="box">
           <div class="pic">
               <img src="img/pic3.jpg" />
               <span id="left"><</span>
               <span id="right">></span>
               <div id="top"></div>
               <ul>
                   <li>
                       <p ></p>
                   </li>
                   <li>
                       <p ></p>
                   </li>
                   <li>
                       <p ></p>
                   </li>
                   <li>
                       <p ></p>
                   </li>
                   <li>
                       <p ></p>
                   </li>
               </ul>
           </div>
       </div>
   </body>
   <script>
   var oLeft = document.getElementById('left');
   var oRight = document.getElementById('right');
   var oImg = document.getElementsByTagName('img')[0];
   var oTop = document.getElementById('top');
   var oBottom = document.getElementById('bottom');
   var oLi = document.getElementsByTagName('li');

   var arr = ['img/pic3.jpg','img/pic9.jpg','img/pic13.jpg','img/pic14.jpg','img/pic15.jpg'];
   var num = 0;
   oTop.innerHTML = 1 + "/ 5";
   oLi[0].style.backgroundColor = 'red';
   oLeft.onclick = function(){
           num--;
       for (var i=0;i<oLi.length;i++) {
           oLi[i].style.backgroundColor = 'gray';
       }
//        a = 5;
       if(num<0){
           num = arr.length-1;
       }
       ni();
//       oImg.src = arr[num];
//       oTop.innerHTML = (num+1) + "/ 5";
//       oLi[num].style.backgroundColor = 'red';
//       console.log(a);
   }

   oRight.onclick = function(){
       for (var i=0;i<oLi.length;i++) {
           oLi[i].style.backgroundColor = 'gray';
       }
       num++;
       if(num>arr.length-1){
           num = 0;
       }
       ni();
   }
       for (var i=0;i<oLi.length;i++) {
           oLi[i].index = i;

           oLi[i].onclick = function(){
                    num = this.index;
                   for (var i=0;i<oLi.length;i++) {
                  oLi[i].style.backgroundColor = 'gray';
                  }
                   ni();
        }
           oLi[i].onmouseover = function(){
               var oP = this.getElementsByTagName('p')[0];
               oP.style.display = 'block';
               oP.style.backgroundImage = 'url("'+ arr[this.index]+'")';
               this.style.background = 'pink';
           }
           oLi[i].onmouseout = function(){
               var oP = this.getElementsByTagName('p')[0];
               oP.style.display = 'none';
               this.style.background = '';
           }
}

     function ni(){
   oImg.src = arr[num];
              oTop.innerHTML = (num+1) + "/ 5";
              oLi[num].style.backgroundColor = 'red';
}
   </script>
</html>

0 0