<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>
jquery轮播图3
最新推荐文章于 2020-06-02 17:08:40 发布