html+jqery+css___轮播

最新推荐文章于 2024-10-10 20:02:02 发布

置顶 denglinqings

最新推荐文章于 2024-10-10 20:02:02 发布

阅读量334

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： css html jquery

本文链接：https://blog.csdn.net/denglinqingqinyuzhao/article/details/54375491

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript实现的轮播图效果，包括自动切换功能及鼠标悬停暂停切换的效果。通过定义全局变量和定时器来控制图片的显示与隐藏，并利用jQuery简化DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>Title</title>
   </head>
   <style>
       * {margin: 0;padding: 0;border: none;list-style: none}
       .carousel {width: 1024px;margin: 0 auto;position: relative;}
       .carousel a {position: absolute;}
       .carousel a img {width: 100%;}
       .carousel ul li.selected {background: #f97157;}
       .carousel ul {position: absolute;z-index: 999;top: 120px;left: 20px;}
       .carousel ul li {width: 20px;height: 20px;border-radius: 50%;background: #909090;cursor: pointer;text-align: center;}
   </style>
   <body>
       <div class="carousel">
           <a href=""><img src="http://v.alllu.com/offic/static/mobilestatus/maximage/difunilan.jpg"    alt=""></a>
           <a href=""><img src="http://v.alllu.com/offic/static/mobilestatus/maximage/yingcaohuang.jpg"    alt=""></a>
           <a href=""><img src="http://v.alllu.com/offic/static/mobilestatus/maximage/taikonglan.jpg"   alt=""></a>
           <a href=""><img src="http://v.alllu.com/offic/static/mobilestatus/maximage/yingcaohuang.jpg" alt=""></a>
           <ul><li>1</li><li>2</li><li>3</li><li>4</li></ul>
       </div>
   </body>
</html>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
   //定义全局变量和定时器
   var t = null;
   var n = 0; //动态变化
   var count;
   $(function() {
       $(".carousel ul li:first").addClass("selected");
       count = $(".carousel a").length; //获取a 的长度给动态变化的n备用
       $(".carousel a:not(:first-child)").hide();//让不是轮播中的第一个隐藏
       //点击当前li当前li对应的图片显示出来
       $(".carousel ul li").click(function() {
           var index = $(this).text() - 1;//点击的下标
           n = index;
           //console.log(n);//打印当前下标
           //让当前显示的图片0.5S内渐隐，并匹配下一个渐显示
           $(".carousel a").filter(":visible").slideToggle(500).parent().children().eq(index).slideDown(1000);
           $(this).addClass("selected");//聚焦，给当前li追加类，改变背景色
           $(this).siblings().removeClass("selected");//同时移除当前li的所有兄弟的类名为selected，还原背景色
           });
             t=setInterval("autoMove()",3000);
             $(".carousel").hover(function(){//当鼠标移动到轮播的时候
                  clearInterval(t);
            },function(){
               t=setInterval("autoMove()",3000);
            });
          });
       //定义自动轮播函数
       function autoMove() {
       if(n >= (count - 1)) {
           n = 0;
       } else {
           ++n;
       }
       $(".carousel ul li").eq(n).trigger("click");   //给li执行匹配的事件
   }
</script>