您的位置：首页 > Web前端 > JavaScript

JS实现花瓣网轮播图效果(未测试)

2016-07-22 12:14 579 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
<style>
body{
background:#57beb9;
}
#main{
width:920px;
/*border: 1px solid red;*/
height:430px;
overflow:hidden;
position:relative;
margin:30px auto;
}
#main .box{
width:820px;
height:430px;
box-shadow:0px 0px 5px #ddd;
margin:0px auto;
overflow:hidden;
/*border: 2px solid blue;*/
position:relative;
}
#main .box img{
width:820px;
height:430px;
position:absolute;
left:0px;
top:0px;
opacity:0;
filter:alpha(opacity=0);
}
#main .btnLeft{
width:35px;
height:57px;
position:absolute;
left:0px;
top:185px;
/*border: 1px solid yellow;*/
background:url(./images/left_ar.png) no-repeat 0px 0px;
}
#main .btnRight{
width:35px;
height:57px;
position:absolute;
right:0px;
top:185px;
/*  border: 1px solid yellow;*/
background:url(./images/right_ar.png) no-repeat 0px 0px;
}
#main  .page{
width:132px;
height:22px;
position:absolute;
bottom:15px;
right:50px;
}
#main  .page a{
display:inline-block;
width:22px;
height:22px;
background:url(./images/num_grey.png) no-repeat 0px 0px;
margin:0px 11px;
float:left;
color:#FFF;
text-decoration:none;
text-align:center;
}
#main  .page a.active{
background:url(./images/num_red.png) no-repeat 0px 0px;
}
</style>
<script src="jquery.js"></script>
<script>
$(function(){
var apage=$('#main .page a');
var aimg=$('#main .box img');
var index=0;
var asize=aimg.size();
$('#btnLeft').click(function(){
index--;
if(index<0){
index=asize-1;
document.title=index;
}
change();
})
$('#btnRight').click(function(){

4000
index++;
if(index>asize-1){
index=0;
document.title=index;
}
change();
})
apage.click(function(){
index=$(this).index();
change();
});
function change(){
apage.removeClass('active');
apage.eq(index).addClass('active');
aimg.eq(index).siblings().stop().animate({
opacity: 0
},300)
aimg.eq(index).stop().animate({
opacity: 1
},300)
}
})
</script>
</head>
<body>
<div id="main">
<a class='btnLeft' id="btnLeft" href="javascript:void(0);"> </a>
<a class='btnRight' id="btnRight" href="javascript:void(0);"> </a>
<div class="box">
<img style="opacity:1;filter:alpha(opacity=100);" src="./images/intro1.jpg"/>
<img src="./images/intro2.jpg"/>
<img src="./images/intro3.jpg"/>
</div>
<div class='page'>
<a  class='active'  href="javascript:void(0);">1</a>
<a  href="javascript:void(0);">2</a>
<a href="javascript:void(0);">3</a>
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航