轮播图

最新推荐文章于 2024-08-15 11:09:11 发布

琉璃玥琉璃

最新推荐文章于 2024-08-15 11:09:11 发布

阅读量103

点赞数

分类专栏： html js 文章标签： html jquery 轮播

本文链接：https://blog.csdn.net/liuliyueliuli/article/details/101016282

版权

js 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<meta http-equiv="X-UA-Compatible" content="ie=edge">    
<title>Document</title>    
<style>        
*{padding: 0;margin: 0;}        
ul,li{list-style-type: none;}        
div.main{width: 590px;height: 470px;margin: 50px auto;position: relative;}        
div.main ul>li{display: none;}        
div.main ul>li.on{display: block;}        
div.main ul.cs img{width: 590px;height: 470px;}
div.main a.arrow{display: inline-block;width: 40px;height: 40px;            background: rgba(0, 0, 0, 0.3);text-align: center;line-height: 40px;font-size: 20px;            text-decoration: none;color: white;position: absolute;top: 50%;margin-top: -20px;}            
div.main a.ar{right: 0px;}        
div.main a.arrow:hover{background: rgba(0, 0, 0, 0.6);}        
div.main ol.slt {position: absolute;bottom: 15px;left: 50%;margin-left: -35px;}        
div.main ol.slt li{float: left;width: 10px;height: 10px;border-radius: 50%;            border: 1px solid gray;margin-right: 10px;}        
div.main ol.slt li.current{background: white;}    
</style>
</head>
<body>    
<!-- 轮播区 -->    
<div class="main">       
 <!-- 轮播图 -->        
 <ul class="cs">            
 <li class="on"><a href="javascript:void(0)">
 <img src="images/p01.webp" alt=""></a></li>            
 <li><a href="javascript:void(0)"><img src="images/p02.webp" alt=""></a></li>            
 <li><a href="javascript:void(0)"><img src="images/p03.webp" alt=""></a></li>            
 <li><a href="javascript:void(0)"><img src="images/p04.webp" alt=""></a></li>        
 </ul>        
 <!-- 指示器 -->        
 <ol class="slt">            
 <li class="current"></li>            
 <li></li>            
 <li></li>            
 <li></li>        
 </ol>        
 <!-- 箭头 -->        
 <a href="javascript:void(0)" class="arrow al">&lt;</a>        
 <a href="javascript:void(0)" class="arrow ar">&gt;</a>    
 </div>    
 <script src="js/jquery.js"></script>    
 <script>        
 var $index=0;//记录当前显示的轮播图的索引        
 var $len=$('ol>li').size();//总长度
        //1.自动轮播        
        var timer=setInterval(moveNext,2000);
        $('.main').hover(function(){            
        clearInterval(timer);        
        },function(){            
        timer=setInterval(moveNext,2000);        
        });       
         //2.箭头轮播        
         $('.al').click(function(){            
         movePre();        
         });        
         $('.ar').click(function(){            
         moveNext();        
         });        
         //3.指示器轮播        
         $('ol.slt li').click(function(){            
         $(this).addClass('current').siblings().removeClass('current');//指示器变化            
         // var myIndex=$(this).index(); //被点击的li的索引            
         $index=$(this).index(); //修改索引            
         //轮播图            
         $('ul.cs li').eq($index).addClass('on').siblings().removeClass('on');            
         //修改索引            
         // $index=myIndex;        
         });
        //下一张        
        function moveNext(){           
         $index++;//索引递增           
          if($index==$len){               
           $index=0;            
           }            
           //轮播图            
           $('ul.cs li').eq($index).addClass('on').siblings().removeClass('on');            
           //指示器            
           $('ol.slt li').eq($index).addClass('current').siblings().removeClass('current');        
           }       
            //上一张        
            function movePre(){            
            $index--;           
             if($index==-1){               
              $index=$len-1;            
              }           
               //轮播图            
               $('ul.cs li').eq($index).addClass('on').siblings().removeClass('on');            
               //指示器            
               $('ol.slt li').eq($index).addClass('current').siblings().removeClass('current');        
               }    
               </script>
               </body>
               </html>

琉璃玥琉璃

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
复制链接

扫一扫

专栏目录