JS实现花瓣网轮播图效果
2018-07-20 来源：open-open
<!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(){
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>
标签： isp
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。
上一篇:spring MVC 入门程序
下一篇:使用css3给页面添加阴影效果
最新资讯
热门推荐