js实现固定宽高滑动轮播图效果
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了js实现固定宽高滑动轮播图效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2812字，纯文字阅读大概需要5分钟。
内容图文
话不多说，请看具体示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="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:1px solid red;
position: relative;
margin:40px auto 0;
overflow: hidden;
}
.banner ul{
width:9999px;
position: absolute;
top:0;
left: 0;
height: 100%;
}
.banner li{
width:500px;
float: left;
height: 100%;
line-height: 100px;
}
.banner li a{
display: block;
background:green;
font-size:30px;
text-align: center;
}
.cur{
height: 20px;
position: absolute;
right: 0;
bottom:10px;
text-align: center;
}
.cur a{
display: inline-block;
width: 20px;
height: 20px;
background:yellow;
margin-left:2px;
}
.cur a.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>
<div class="banner" id="banner1">
<ul class="tab">
<li><a href="###">1</a></li>
<li><a href="###">2</a></li>
<li><a href="###">3</a></li>
</ul>
<div class="cur"></div>
<div class="prve"><</div>
<div class="next">></div>
</div>
<script>
$(function(){
cc("banner1",500);
});
function cc(id,w){
var i=0;
var id=$("#"+id);
var tab=id.children(".tab");
var tabLi=tab.find("li");
var clone=tabLi.first().clone();
tab.append(clone);
var size=tab.find("li").size();
var cur=id.children(".cur");
var curA=cur.children("a");
var prve=id.children(".prve");
var next=id.children(".next");
for(var j=0;j<size-1;j++){
cur.append("<a href='###'></a>");
}
cur.find("a").first().addClass("active");
/*鼠标划入圆点*/
cur.find("a").hover(function(){
var index=$(this).index();
i=index;
tab.stop().animate({left:-index*w},500)
$(this).addClass("active").siblings().removeClass("active")
});
/*自动轮播*/
var t=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();
});
function move(){
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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
内容总结
以上是互联网集市为您收集整理的js实现固定宽高滑动轮播图效果全部内容，希望文章能够帮你解决js实现固定宽高滑动轮播图效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】