js实现固定宽高滑动轮播图效果
话不多说，请看具体示例代码：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
<scriptsrc="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<style>
*{
margin:0;
padding:0;
}
html,body{
position:relative;
height:100%;
}
body{
background:#eee;
font-size:14px;
color:#000;
margin:0;
padding:0;
}
li{
list-style:none;
}
a{
text-decoration:none;
}
#banner1{
width:500px;
}
.banner{
width:500px;
height:100px;
border:1pxsolidred;
position:relative;
margin:40pxauto0;
overflow:hidden;
}
.bannerul{
width:9999px;
position:absolute;
top:0;
left:0;
height:100%;
}
.bannerli{
width:500px;
float:left;
height:100%;
line-height:100px;
}
.bannerlia{
display:block;
background:green;
font-size:30px;
text-align:center;
}
.cur{
height:20px;
position:absolute;
right:0;
bottom:10px;
text-align:center;
}
.cura{
display:inline-block;
width:20px;
height:20px;
background:yellow;
margin-left:2px;
}
.cura.active{
background:red;
}
.prve{
position:absolute;
top:50%;
left:0;
width:30px;
height:30px;
background:red;
line-height:30px;
text-align:center;
color:#fff;
margin-top:-15px;
}
.next{
position:absolute;
top:50%;
right:0;
width:30px;
height:30px;
background:red;
line-height:30px;
text-align:center;
color:#fff;
margin-top:-15px;
}
</style>
</head>
<body>
<divclass="banner"id="banner1">
<ulclass="tab">
<li><ahref="###">1</a></li>
<li><ahref="###">2</a></li>
<li><ahref="###">3</a></li>
</ul>
<divclass="cur"></div>
<divclass="prve"><</div>
<divclass="next">></div>
</div>
<script>
$(function(){
cc("banner1",500);
});
functioncc(id,w){
vari=0;
varid=$("#"+id);
vartab=id.children(".tab");
vartabLi=tab.find("li");
varclone=tabLi.first().clone();
tab.append(clone);
varsize=tab.find("li").size();
varcur=id.children(".cur");
varcurA=cur.children("a");
varprve=id.children(".prve");
varnext=id.children(".next");
for(varj=0;j<size-1;j++){
cur.append("<ahref='###'></a>");
}
cur.find("a").first().addClass("active");
/*鼠标划入圆点*/
cur.find("a").hover(function(){
varindex=$(this).index();
i=index;
tab.stop().animate({left:-index*w},500)
$(this).addClass("active").siblings().removeClass("active")
});
/*自动轮播*/
vart=setInterval(function(){
i++;
move()
},2000)
/*对banner定时器的操作*/
id.hover(function(){
clearInterval(t);
},function(){
t=setInterval(function(){
i++;
move();
},2000)
});
/*向左的按钮*/
prve.click(function(){
i--;
move();
});
/*向右的按钮*/
next.click(function(){
i++;
move();
});
functionmove(){
if(i==size){
tab.css({left:0});
i=1;
};
if(i==-1){
tab.css({left:-(size-1)*w});
i=size-2;
};
tab.stop().animate({left:-i*w},500);
if(i==size-1){
cur.children("a").eq(0).addClass("active").siblings().removeClass("active")
}else{
cur.children("a").eq(i).addClass("active").siblings().removeClass("active")
};
};
}
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！