JQuery 定时函数制作轮播图

最新推荐文章于 2023-09-14 18:36:20 发布

Ymx946

最新推荐文章于 2023-09-14 18:36:20 发布

阅读量648

点赞数

文章标签：前端 java jquery javascript

本文链接：https://blog.csdn.net/Ymx946/article/details/122210667

版权

<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <link href="css/lun.css" rel="stylesheet" />
   </head>
   <body>
   <div class="outer">
   <ul class="img">
   <li><img src="img/adver01.jpg"></li>
   <li><img src="img/adver02.jpg"></li>
   <li><img src="img/adver03.jpg"></li>
   <li><img src="img/adver04.jpg"></li>
   </ul>
   <ul class="num">
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   </ul>
   <div class="btn_left button"> < </div>
   <div class="btn_right button"> > </div>

   </div>
   </body>
   <script src="js/jquery-1.12.4.js"></script>
   <script type="text/javascript">
       //全局变量表示索引位置
       $(function(){
   let i= 0;
       //初始化选中第一个小的圆形按钮，让他背景色设置成橙色，其他灰色
           $(".num li").first().css("background","orange").siblings().css("background","grey");
       //初始化第一张图作为大的背景，其他的不显示
           $(".img li").first().fadeIn().siblings().fadeOut();
           //fadein 淡入淡出的隐藏和显示
           //函数用来移动背景
           function move(){
           i++;
           if(i>3){
               i=0;
           }
           //小圆形按钮发生变化
       $(".num li").eq(i).css("background","orange").siblings().css("background","grey");
           $(".img li").eq(i).fadeIn().siblings().fadeOut();
           }
           //通过定时函数轮播自动切换
           var time = setInterval(move,2000);
           //优化,光标放在背景上停止滚动,移出继续滚动
           $(".outer").mouseover(function(){
               //停止定时函数
               clearInterval(time);
           }).mouseout(function(){
               time = setInterval(move,2000);
           });

               //点击右边的箭头改变图片
           $(".btn_right").click(function(){
               move();
           });
               //点击左边的箭头改变图片
           $(".btn_left").click(function(){
           //确保索引的正确
           //点击到第一个按钮 i = -1
               if(i<=-1){
                   i=3;
               }
               i-=2;
               move();
           });
           //鼠标移入小圆纽发生改变
       $(".num li").mouseover(function(){
           //记录鼠标移入小圆按钮的索引，以便你的鼠标移出的时候，自动轮播直到最后一个位置切换
               i=$(this).index();
       $(".num li").eq(i).css("background","orange").siblings().css("background","grey");
       $(".img li").eq(i).fadeIn().siblings().fadeOut();
           });
           });
   </script>
</html>