js实现固定宽高滑动轮播图效果
编程学习 2021-07-04 19:20www.dzhlxh.cn编程入门
本文主要分享了js实现PC固定宽高滑动轮播图效果的示例代码。具有一定的参考价值，狼蚁网站SEO优化跟着长沙网络推广一起来看下吧
话不多说，请看具体示例代码：
<!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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持狼蚁SEO！
上一篇：详解jQuery事件
下一篇：JavaScript利用闭包实现模块化