<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>
jquery轮播图4
最新推荐文章于 2024-08-27 19:30:26 发布