jquery轮播图1

最新推荐文章于 2021-12-24 20:37:07 发布

凌行疾风影

最新推荐文章于 2021-12-24 20:37:07 发布

阅读量103

点赞数

本文链接：https://blog.csdn.net/qq_43656995/article/details/103550365

版权

jquery轮播图1

<html>
<head>
<meta charset="utf-8">
<title>jquery轮播图1</title>
<style type="text/css">
*{padding:0px;margin:0px;}
#content{position:relative;width:600px;height:200px;overflow:hidden;margin:50px;}
#imgcontent{position:absolute;width:1800px;height:200px;}
li{float:left;}
img{height:200px;width:300px;}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
</head>

<body>
<div id="content">
<ul id="imgcontent">
<li id="img1"><img src="image/w1.jpg" alt="w1"></li>
<li id="img2"><img src="image/w2.jpg" alt="w2"></li>
<li id="img3"><img src="image/w3.jpg" alt="w3"></li>
<li id="img4"><img src="image/w4.jpg" alt="w4"></li>
<li id="img1"><img src="image/w1.jpg" alt="w1"></li>
<li id="img2"><img src="image/w2.jpg" alt="w2"></li>
</ul>
</div>
<script type="text/javascript">
  $(function() {
	  var offset=0;
	  var timer;
	  function timerInterval() {
		  timer=setInterval(function() {
			  if(offset<=-1200) {
				  offset=0;
			  }else{
			 offset-=10;
			 $("ul").css("marginLeft",offset); 
			  }
		  },100);
	  }
	  timerInterval();
  });
</script>
</body>
</html>