html 轮播图

来源：互联网发布：数控铣削编程与加工编辑：程序博客网时间：2024/06/07 08:26

本来觉得不用上传，大家应该都会得，想想还是上传了。轮播图，原理都懂，但是实现由很多种方法，我就直接上代码，各位看看就好

<!DOCTYPE html>
<html>

<head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           * {
               margin: 0;
               padding: 0;
               border: 0;
           }

           .big {
               width: 1226px;
               height: 460px;
               position: absolute;
               overflow: hidden;
               margin: 0 auto;
           }

           ul {
               position: absolute;
               width: 5000px;
               height: 460px;
           }

           li {
               float: left;
               list-style: none;
               cursor: pointer;
           }

           .xiaoyuandian {
               position: absolute;
               left: 40%;
               bottom: 0px;
               width: 80px;
               height: 20px;
               z-index: 10;
               cursor: pointer;
           }

           img {
               z-index: 9;
           }

           #yuandian1 {
               width: 20px;
               height: 20px;
               float: left;
               border-radius: 50%;
               background: #EEEEEE;
               margin-left: 5px;
               background: #000000;
           }

           #yuandian2 {
               width: 20px;
               height: 20px;
               float: left;
               border-radius: 50%;
               background: #EEEEEE;
               margin-left: 5px;
           }

           #yuandian3 {
               width: 20px;
               height: 20px;
               float: left;
               border-radius: 50%;
               background: #EEEEEE;
               margin-left: 5px;
           }

           span {
               position: absolute;
               left: 0;
               top: 0;
               z-index: 999;
               color: yellow;
           }

           .spanspan1 {
               left: 0px;
           }

           .spanspan2 {
               left: 1226px;
           }

           .spanspan3 {
               left: 2452px;
           }

           .spanspan4 {
               left: 3678px;
           }
       </style>
       <script>
           var mytimer;
           var offset1 = 0;
           window.onload = function() {
               myset();
               document.getElementById("myul1").addEventListener("mouseover", function() {
                   clearTimeout(mytimer);
               });
               document.getElementById("myul1").addEventListener("mouseout", function() {
                   myset();
               });
               document.getElementById("yuandian1").addEventListener("mouseover", function() {
                   clearTimeout(mytimer);
                   lunbotupian(0);
                   document.getElementById("yuandian1").style.background = "#000000";
                   document.getElementById("yuandian2").style.background = "#EEEEEE";
                   document.getElementById("yuandian3").style.background = "#EEEEEE";
               });
               document.getElementById("yuandian2").addEventListener("mouseover", function() {
                   clearTimeout(mytimer);
                   lunbotupian(100);
                   document.getElementById("yuandian2").style.background = "#000000";
                   document.getElementById("yuandian1").style.background = "#EEEEEE";
                   document.getElementById("yuandian3").style.background = "#EEEEEE";
               });
               document.getElementById("yuandian3").addEventListener("mouseover", function() {
                   clearTimeout(mytimer);
                   lunbotupian(200);
                   document.getElementById("yuandian3").style.background = "#000000";
                   document.getElementById("yuandian2").style.background = "#EEEEEE";
                   document.getElementById("yuandian1").style.background = "#EEEEEE";
               });
               document.getElementById("yuandian3").addEventListener("mouseout", function() {
                   offset1 = 200;
                   myset();
               });
               document.getElementById("yuandian2").addEventListener("mouseout", function() {
                   offset1 = 100;
                   myset();
               });
               document.getElementById("yuandian1").addEventListener("mouseout", function() {

                   offset1 = 0;
                   myset();
               });
           }

           function myset() {
               offset1 += 1;
               if(offset1 >= 301) {
                   offset1 = 0;
               }
               lunbotupian(offset1);
               yuandian(offset1);
               if(offset1 % 100 == 0)

                   mytimer = setTimeout(myset, 3000);
               else
                   mytimer = setTimeout(myset, 30);
           }

           //这是一只动的混蛋
           function lunbotupian(offset2) {
               //原点的判断
               var z = "-" + offset2;
               z = z * 12.26;
               document.getElementById("myul1").style.left = z + "px";

           }
           //设置鼠标事件

           //圆点移动
           function yuandian(offset3) {
               var yuandianid = "yuandian";
               var currentyuandian;
               console.log(offset3);
               if(offset3 == 0 | offset3 == 300) {
                   for(var i = 1; i < 4; i++) {
                       currentyuandian = yuandianid + i;
                       if(i == 1)
                           document.getElementById(currentyuandian).style.background = "#000000";
                       else
                           document.getElementById(currentyuandian).style.background = "#EEEEEE";
                   }
               }
               if(offset3 == 100) {
                   for(var i = 1; i < 4; i++) {
                       currentyuandian = yuandianid + i;
                       if(i == 2)
                           document.getElementById(currentyuandian).style.background = "#000000";
                       else
                           document.getElementById(currentyuandian).style.background = "#EEEEEE";
                   }
               }
               if(offset3 == 200) {
                   for(var i = 1; i < 4; i++) {
                       currentyuandian = yuandianid + i;
                       if(i == 3)
                           document.getElementById(currentyuandian).style.background = "#000000";
                       else
                           document.getElementById(currentyuandian).style.background = "#EEEEEE";
                   }
               }
           }
       </script>
   </head>

   <body>
       <div class="big">
           <div class="xiaoyuandian">
               <div id="yuandian1">

               </div>
               <div id="yuandian2">

               </div>
               <div id="yuandian3">

               </div>
           </div>
           <ul id="myul1">
               <li>
                   <span class="spanspan1">这是第一张图片</span>
                   <img style="width: 1226px; " src="http://i3.mifile.cn/a4/xmad_14915894814419_zNYsr.jpg">
               </li>
               <li>
                   <span class="spanspan2">这是第2张图片</span>
                   <img style="width: 1226px; " src="http://i3.mifile.cn/a4/xmad_14908694278281_joFcg.jpg">
               </li>
               <li>
                   <span class="spanspan3">这是第3张图片</span>
                   <img style="width: 1226px; " src="http://i3.mifile.cn/a4/xmad_14913784962239_FlUpM.jpg ">
               </li>
               <li>
                   <span class="spanspan4">这是第1张图片</span>
                   <img style="width: 1226px; " src="http://i3.mifile.cn/a4/xmad_14915894814419_zNYsr.jpg ">
               </li>
           </ul>

       </div>
   </body>

</html>

我的实现方法很简单

1 0