web前端用js实现轮播图效果

AI学IT

于 2024-01-18 19:21:14 发布

阅读量888

点赞数 17

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/2302_76161836/article/details/135682234

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           * {
               margin: 0;
               padding: 0;
           }

           ul img {
               width: 550px;
               height: 350px;
               display: none;

}

           ul {
               list-style: none;
           }

           ol {
               width: 150px;
               height: 20px;
               background-color: rgba(0, 0, 0, .6);
               border-radius: 10px;
               position: absolute;
               left: 200px;
               bottom: 10px;
               list-style: none;
           }

           ol>li {
               width: 13px;
               height: 13px;
               border-radius: 50%;
               background-color: rgba(255, 255, 255, 0.5);
               float: left;
               margin-top: 3px;
               margin-left: 14px;
           }

           #container {
               width: 550px;
               height: 350px;
               position: relative;
           }

           #arr_left,#arr_right {
               width: 50px;
               height: 50px;
               font-size: 50px;
               font-weight: bold;
               position: absolute;
               top: 45%;
               background-color: rgba(255, 255, 255, 0.6);
               color: black;
               text-align: center;
               line-height: 50px;
               border-radius: 50%;
               display: none;
           }

           #arr_right{
               right: 0px;
           }

       </style>
   </head>
   <body>
       <div id="container">
           <ul>
               <li><img style="display: block;" src="https://tse1-mm.cn.bing.net/th/id/OIP-C.My4zZWM57V4-6ocv3xnmGAHaEK?w=301&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt=""></li>
               <li><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.UvMnxGQs885rpCslxF6VTAHaEK?w=287&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt=""></li>
               <li><img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.tFhdMxajYZ13cIZJ_MZ8RAHaEK?w=299&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt=""></li>
               <li><img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.eWcZN25l4l5IE-COLLmH1QHaDq?w=350&h=173&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt=""></li>
               <li><img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.Go47HuDLJYKU7RlnXKU4EgHaEo?w=273&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt=""></li>
           </ul>
           <ol>
               <li></li>
               <li></li>
               <li></li>
               <li></li>
               <li></li>
           </ol>
           <div id="arr_left"><</div>
           <div id="arr_right">></div>

       </div>

           for (let i = 0; i < cirle_arr.length; i++) {

               cirle_arr[i].index = i
               cirle_arr[i].onclick = function(event) {

                   this.style.backgroundColor = "#fff"

                   cirle_arr[current_index].style.backgroundColor = grey_color

                   img_arr[this.index].style.display = "block"

                   img_arr[current_index].style.display = "none"

                   current_index = this.index
               }
           }

           function lunbo() {
               current_index++
               if (current_index >= img_arr.length) {
                   current_index = 0
               }
               for (let i = 0; i < img_arr.length; i++) {
                   if (current_index == i) {
                       img_arr[i].style.display = "block"
                       cirle_arr[i].style.backgroundColor = "#fff"
                   } else {
                       img_arr[i].style.display = "none"
                       cirle_arr[i].style.backgroundColor = grey_color
                   }
               }
           }

           div.onmousemove = function() {
               clearInterval(time_id)
               arrow_left.style.display = "block"
               arrow_right.style.display = "block"
           }
           div.onmouseout = function() {
               time_id = setInterval(lunbo, 1000)
               arrow_left.style.display = "none"
               arrow_right.style.display = "none"
           }
           arrow_left.onclick = function(){
               cirle_arr[current_index].style.backgroundColor = grey_color
               img_arr[current_index].style.display = "none"
               if(current_index >= 1){
                   current_index--
               }
               else{
                   current_index = 4
               }
               cirle_arr[current_index].style.backgroundColor = "white"
               img_arr[current_index].style.display = "block"
           }
           arrow_right.onclick = function(){
               cirle_arr[current_index].style.backgroundColor = grey_color
               img_arr[current_index].style.display = "none"
               if(current_index < 4){
                   current_index++
               }
               else{
                   current_index = 0
               }
               cirle_arr[current_index].style.backgroundColor = "white"
               img_arr[current_index].style.display = "block"
           }
       </script>
   </body>
</html>