JQuery 运用数组制作轮播图

最新推荐文章于 2022-04-28 21:15:05 发布

Ymx946

最新推荐文章于 2022-04-28 21:15:05 发布

阅读量331

点赞数

文章标签： jquery javascript 前端

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

版权

<html>
<head lang="en">
<meta charset="UTF-8">
<title> 广告图片轮播切换</title>
<link rel="stylesheet" href="css/style.css">
   <style type="text/css">
   </style>
</head>
<body>
<div class="adver">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<div class="arrowLeft"><</div><div class="arrowRight">></div>
</div>
</body>
<script src="js/jquery-3.5.1.js"></script>
   <script type="text/javascript">
   $(document).ready(function() {
       //创建图片数组
       var imgs = ["adver01.jpg","adver02.jpg","adver03.jpg","adver04.jpg","adver05.jpg","adver06.jpg"];
       //鼠标移入显示向左向右
       $(".adver").mouseover(function(){
           $(".arrowLeft").show();
       });
       $(".adver").mouseout(function(){
           $(".arrowLeft").hide();
       });
       $(".adver").mouseover(function(){
           $(".arrowRight").show();
       });
       $(".adver").mouseout(function(){
           $(".arrowRight").hide();
       });
       //利用下标找到对应的图片
       var index = 0;
       function move(){
       index++;
       if(index>5){
          index=0;
       }
       $(".adver li").eq(index).css("background","orange").siblings().css("background","black");
       $(".adver").css("background","url(img/"+imgs[index]+")");
       }
       var time = setInterval(move,2000);
       $(".adver").mouseover(function(){
          clearInterval(time);
       }).mouseout(function(){
       time = setInterval(move,2000)
       });
       $(".adver li").mouseover(function(){
           index=$(this).index();
       $(".adver li").eq(index).css("background","orange").siblings().css("background","black");
       $(".adver").css("background","url(img/"+imgs[index]+")");
       });


       $(".arrowRight").click(function(){
       if(index == (imgs.length-1)){
           alert("已经是最后一张图片了！")
       }else{
       index++;
       var imgName = imgs[index];
       $(".adver").css("background","url(img/"+imgName+")");
       //利用提示方法修改数字背景颜色
       $("ul li:nth-of-type("+(index+1)+")").css("background-color","orange").siblings().css("background-color","black");
       };
       });


       $(".arrowLeft").click(function(){
       if(index == 0){
           alert("已经是第一张图片了！")
       }else{
       index--;
       var imgName = imgs[index];
       $(".adver").css("background","url(img/"+imgName+")");
   $("ul li:nth-of-type("+(index+1)+")").css("background-color","orange").siblings().css("background-color","black");
       };
       });




       });


       </script>
</html>