最简单轮播图

您现在的位置是：首页 > 随笔小记 > 小项目

简介读《细说ajax与jquery》解释最简单轮播图

展示链接：直隐直现的轮播图

源码展示：

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>基础动画</title>
	<script src="js/jquery-3.1.1.min.js"></script>
	<link href="css/01.css" rel="stylesheet" type="text/css">
	</head>
	<body>
	<h1>直隐直现的轮播图</h1>
	<img src="images/1.jpg">
	<img src="images/2.jpg" style="display:none">
	<img src="images/3.jpg" style="display:none">
	<img src="images/4.jpg" style="display:none">
	</body>
	</html>
	<script>
	var i = 0; //定义帧数的变量
	var len = $("img").length - 1; //判断执行方向
	setInterval(function(){
	if(i++%(2*len) < len){
	$("img:visible").hide().next().show();
	}else{
	$("img:visible").hide().prev().show();
	}
	},1000);
	</script>

解释：1、使用jquery首先调用js包：2、使用4张图片，叠加一起展示其中一张图片其他隐藏：3、设计循环展示条件要求，从头到尾在从未到头。

本例子只用最简单html 和css jquery 实现轮播图循环效果，简单方便，适合出学制学习使用。

著作权归作者所有。
商业转载请联系作者获得授权，非商业转载请注明出处。
作者：付博瀚
来源：付博瀚个人博客
链接: https://www.fubohan.com/