jquery轮播图4

最新推荐文章于 2024-08-27 19:30:26 发布

凌行疾风影

最新推荐文章于 2024-08-27 19:30:26 发布

阅读量125

点赞数

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

版权

<html>
<head>
<meta charset="utf-8">
<title>jquery轮播图4</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;}
.menu{position:absolute;bottom:20px;left:30%;width:120px;heigth:10px; z-index:50;}
.menu-li{float:left;width:20px;margin-right:10px;heigth:10px;background:#fff;text-align:center;list-style:none;}
.red{background:red; }
.content .content-left{position:absolute; left:10px; top:40%;width:30px; height:30px;background:#FFF;opacity:0.7;font-size:30px; text-align:center;z-index:20;
}
.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; display:block;z-index:20;
}
.content .content-right:hover {background:red; }
</style>
<script type="text/javascript" src="jquery.min.js"></script>
</head>

<body>
<div class="content">
<ul class="imgcontent">
<li><img src="image/w1.jpg" alt="w1"></li>
<li><img src="image/w2.jpg" alt="w2"></li>
<li><img src="image/w3.jpg" alt="w3"></li>
<li><img src="image/w4.jpg" alt="w4"></li>
</ul>
<ul class="menu">
<li class="menu-li red">1</li>
<li class="menu-li">2</li>
<li class="menu-li">3</li>
<li class="menu-li">4</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;
	  var i;
	  $('.menu li').click(function(e) {
		  $i=$(this).index();
		  //console.log($i);
		  $(this).addClass("red");
		  $(this).siblings().removeClass("red");
		  offset=0-300*$i;
		  $('.imgcontent').css("marginLeft",offset);
	  });
	$('.content-left').click(function(e) {
		if(offset<=-900) {
			offset=0;
		} else{offset-=300;}
		$('.imgcontent').css("marginLeft",offset);
		i=offset/300;
		$('.menu li').eq(-i).addClass("red");
		$('.menu li').eq(-i).siblings().removeClass("red");
	});
	$('.content-right').click(function(e) {
		
		if(offset>=900) {
			offset=0;
			i=0;
		} else if(offset==0) {
			offset=-900;
			i=(-offset)/300;
		}
		else{offset+=300; 
		i=(-offset)/300;
		}
		$('.imgcontent').css("marginLeft",offset);
		
		$('.menu li').eq(i).addClass("red");
		$('.menu li').eq(i).siblings().removeClass("red");
	});
  });
</script>
</body>
</html>

</head>

<body>
</body>
</html>