js实现固定宽高滑动轮播图效果
更新时间：2017年01月13日 16:31:39 作者：带阿狸去旅行
本文主要分享了js实现PC固定宽高滑动轮播图效果的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧
话不多说，请看具体示例代码：
<!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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
使用 Node.js 做 Function Test实现方法
这篇文章介绍了Node.js 做 Function Test实现方法，有需要的朋友可以参考一下2013-10-10
对JavaScript 放大镜来说, 计算倍率必不可少.一个完整的放大镜结构里, 与倍率扯上关系的一共有 4 个对象, 原图, 缩略图, 镜片和视窗.2011-05-05
这篇文章主要介绍了小程序绑定用户方案优化小结，该类小程序在使用之前就需要绑定用户信息。常见于线下门店类功能性小程序。具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
下面小编就为大家带来一篇JavaScript操作选择对象的简单实例。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧2016-05-05
这篇文章主要为大家详细介绍了js通过Date对象实现倒计时动画效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
这篇文章主要介绍了JS实现的汉字与Unicode码相互转化功能,结合实例形式分析了javascript实现汉字与Unicode码转换相关操作技巧与注意事项,需要的朋友可以参考下2018-05-05
这篇文章主要介绍了ES6中Generator与异步操作,结合实例形式分析Generator的概念、功能及相关操作技巧,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了JS实现仿苹果底部任务栏菜单效果代码,可实现鼠标滑过显示大图标功能,涉及javascript鼠标事件及页面元素遍历并修改属性的技巧,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了JavaScript截取字符串的2个函数介绍,它们分别是substring和substr函数,本文用实例讲解了它们的用法,需要的朋友可以参考下2014-08-08
这篇文章主要为大家介绍了Aptos SDK交互实现过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
最新评论