jquery简单的轮播图这样实现浏览器不兼容

huanyinhai 2016-03-11 09:48:44

JavaScript初学者，本来想做个JS的轮播图，结果发现实在不会，然后拿jQuery凑了一个出来，不知道我这样实现有没有什么问题？
HTML代码如下：



<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title></title>

<style type="text/css">

*{

	margin:0;

	padding:0;

	}

#div1 {

	width:900px;

	height:300px;

	overflow:hidden;

	margin:auto;

}

#div1 li{

	list-style:none;

	float:left;

}

</style>

<script type="text/javascript" src="js/jquery-2.2.1.js"></script>

</head>



<body>

<script src="js/banner.js"></script>

<div id="div1">



<ul>

<li><a href="#"><img src="img/1.jpg"/></a></li>

<li><a href="#"><img src="img/2.jpg"/></a></li>

<li><a href="#"><img src="img/3.jpg"/></a></li>

<li><a href="#"><img src="img/4.jpg"/></a></li>

<li><a href="#"><img src="img/5.jpg"/></a></li>

</ul>

</div>

</body>

</html>

JavaScript程序如下：



$(document).ready(function(){

	var index=0;//显示元素的序号index，一般从0开始

	var len=$("#div1 ul").children().length;//获取元素个数len

	$("#div1 ul li").hide();

        $("#div1 ul li").eq(index).show();

        console.log("index="+index);

         console.log("len="+len);

         function showup(){//每执行一次，隐藏其他元素，显示下一个元素

            $("#div1 ul li").hide();//隐藏全部

           index++;

            index=index%len;//对序号取余数，避免超过长度，当指针指向最后一个时，index等于0，

                

            $("#div1 ul li").eq(index).show();//显示第index号元素

            console.log("index="+index);

            

        }

          function fadeup(){//每执行一次，隐藏其他元素，显示下一个元素

            $("#div1 ul li").hide();//隐藏全部

           index++;

            index=index%len;//对序号取余数，避免超过长度，当指针指向最后一个时，index等于0，

                

            $("#div1 ul li").eq(index).fadeIn();

            $("#div1 ul li").eq(index).fadeIn("slow");

            $("#div1 ul li").eq(index).fadeIn(3000);

            console.log("index="+index);

            

        }

        $("#div1").click(showup);

      

	});