jQuery实现轮播图（fadeIn，siblings，fadeOut方法实现）

最新推荐文章于 2021-07-16 17:49:21 发布

是啦啦啦呀

最新推荐文章于 2021-07-16 17:49:21 发布

阅读量1k

点赞数 1

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

本文链接：https://blog.csdn.net/Alfred_tfk/article/details/108370627

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

jQuery实现轮播图（fadeIn，siblings，fadeOut方法实现）

利用fadeIn()，siblings()，fadeOut()方法实现，一张图片显示，其他图片消失，最后一张图片时重新开始
html

<body>
		<input type="button" value="下一张" />
		<img src="img/1.jpg" />
		<img src="img/2.jpg" />
		<img src="img/3.jpg" />
		<img src="img/4.jpg" />
		<img src="img/5.jpg" />
		<img src="img/6.jpg" />
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li class="on"></li>
		</ul>
	</body>

css

<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			
			img {
				width: 500px;
				height: 350px;
				position: absolute;
				top: 25px;
				left: 0;
			}
			li{
				width: 15px;
				height: 15px;
				background:  darkgrey;
				border: 1px solid;
				border-radius: 100%;
				float: left;
				list-style: none;
				margin-right: 5px;
			}
			ul{
				position: absolute;
				top: 330px;
				left: 300px;
			}
			.on{
				background: white;
			}
		</style>

script

<script>
  var i = 0;
  $(function () {
    $("input:button").click(function () {
      play2();//点击是执行切换函数
    })
    function play2() {
      if (i > 5) {//到第五张图片时，重新开始图片
        i = 0;
        play();
      } else {
        play();
      }
    }
    function play() {//图片出现，其他图片消失
      $("img").eq(i).fadeIn().siblings("img").fadeOut();
      $("li").eq(i).addClass("on").siblings("li").removeClass("on");
      i++;
    }
    setInterval(play2, 1000);
  })
</script>

是啦啦啦呀

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现轮播图（fadeIn，siblings，fadeOut方法实现）

jQuery实现轮播图（fadeIn，siblings，fadeOut方法实现）利用fadeIn()，siblings()，fadeOut()方法实现，一张图片显示，其他图片消失，最后一张图片时重新开始html <body> <input type="button" value="下一张" /> <img src="img/1.jpg" /> <img src="img/2.jpg" /> <img src="img/3.jpg"
复制链接

扫一扫

专栏目录