运用jQuery写一个超简单的点击轮播图

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_43316300/article/details/84110739

运用jQuery写一个超简单的点击轮播图

一、css样式

这里应该用五张图片放在对应的位置
img文件下分别是a.jpg、b.jpg、c.jpg、d.jpg、e.jpg图片
可以对应的调节div的大小

<style>
div{position:relative;width:800px;}
div div{width:800px;height:300px;position:absolute;}
div div:nth-of-type(1){background-image:url("img/a.jpg");background-size:100% 100%;}
div div:nth-of-type(2){background-image:url("img/b.jpg");background-size:100% 100%;}
div div:nth-of-type(3){background-image:url("img/c.jpg");background-size:100% 100%;}
div div:nth-of-type(4){background-image:url("img/d.jpg");background-size:100% 100%;}
div div:nth-of-type(5){background-image:url("img/e.jpg");background-size:100% 100%;}
button{width:100px;height:50px;position:absolute;border:none;right:25px;cursor:pointer;}
button:focus{outline:3px solid #f0f;}
button:nth-of-type(1){background-image:url("img/a.jpg");background-size:100% 100%;}
button:nth-of-type(2){background-image:url("img/b.jpg");background-size:100% 100%;}
button:nth-of-type(3){background-image:url("img/c.jpg");background-size:100% 100%;}
button:nth-of-type(4){background-image:url("img/d.jpg");background-size:100% 100%;}
button:nth-of-type(5){background-image:url("img/e.jpg");background-size:100% 100%;}
<style>

二、html标签

五个div分别放五张图
按钮是五张对应的小图

<div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
</div>

三、jQuery代码

<script>
$("div div:not(:first)").fadeOut(1);
$("button").click(function(e){
   var arr=Array.from($("button"));
   var index=arr.indexOf(this);
   $("div div:visible").fadeOut(500);
   $("div div").eq(index).fadeIn(500);
}).css("top",function(index){
   return 5+($(this).height()+5)*index+"px";
})
<script>

除了第一个div,其余的的都隐藏;
点击按钮时
1.arr数组中装五个按钮
2.index是对应的按钮
3.div下显示的div隐藏
4.div下对应的div显示
按钮的top值是(按钮的高度加上10乘以index)px;