jquery轮播图3

最新推荐文章于 2020-06-02 17:08:40 发布

凌行疾风影

最新推荐文章于 2020-06-02 17:08:40 发布

阅读量112

点赞数

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

版权

<html>
<head>
<meta charset="utf-8">
<title>jquery轮播图3</title>
<style type="text/css">
*{padding:0px;margin:0px;}
#content{position:relative;width:300px;height:200px;overflow:hidden;margin:50px;}
#imgcontent{position:absolute;width:1200px;height:200px; }
li{float:left; list-style:none;}
img{height:200px;width:300px;}
#content .content-left{position:absolute; left:10px; top:40%;width:30px; height:30px;background:#FFF;opacity:0.7;font-size:30px; text-align:center;
}
#content .content-left:hover{background:red;}
#content .content-right{position:absolute; right:10px; top:40%;width:30px; height:30px;background:#FFF;opacity:0.7;font-size:30px; text-align:center; 
}
#content .content-right:hover{background:red;}
</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>
</ul>
<div class="content-left"><b><</b></div>
<div class="content-right"><b>></b></div>
</div>
<script type="text/javascript">
  $(function() {
	  var offset=0;
	$('.content-left').click(function(e) {
		if(offset<=-900) {
			offset=0;
		} else{offset-=300;}
		$('ul').css("marginLeft",offset);
		
	});
	$('.content-right').click(function(e) {
		if(offset>=900) {
			offset=0;
		} else if(offset==0) {
			offset=-900;
		}
		else{offset+=300;}
		$('ul').css("marginLeft",offset);
		
	});
  });
</script>
</body>
</html>

</head>

<body>
</body>
</html>

凌行疾风影

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery轮播图3

<html><head><meta charset="utf-8"><title>jquery轮播图3</title><style type="text/css">*{padding:0px;margin:0px;}#content{position:relative;width:300px;height:200p...
复制链接

扫一扫