js实现固定宽高滑动轮播图效果
话不多说，请看具体示例代码：
<!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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！
相关推荐
-
javascript经典特效分享 手风琴、轮播图、图片滑动
最近都没有更,就来几个效果充实一下. 都没有进行美化这步. 纯css的手风琴: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手风琴css</title> <style> .showBox{ width: 660px; overflow: hidden; } ul{ list-style:
-
利用AngularJs实现京东首页轮播图效果
先来看看效果图 其实写一个轮播图还是蛮简单的,我想了两种种方法,来实现轮播图(实际上细分是5种,但是其中两种是操作dom原生,三种是利用AngularJs的动画,所有归为两大类),等我写出来,大家好好理解一下就好. 那我先写一种,第一种是不使用angularjs的动画模块,只使用指令来完成动画的切换.在这里面就是在指令里操作dom元素,超级easy. 示例代码 <!DOCTYPE html> <html lang="en" ng-app="lunbo&quo
-
js 基础篇必看(点击事件轮播图的简单实现)
轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首先,我们可以在body中添加一个div并且将宽度设置成百分比(自适应页面),比例具体是相对谁的百分比的话按需求来做,在这里不多说.将图片放入到div 中. 其次,样式部分将img标签全部设置成absolute:以方便定位 最后,js部分说说逻辑,定义两个空数组,第一个数组用来保存初始的显示在页面的图
-
JS实现左右无缝轮播图代码
废话不多说了,直接给大家贴代码了. 无缝轮播图: <title>无缝轮播图</title> <style> *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;} .img{position: absolu
-
简单的JS轮播图代码
在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用面向过程函数式编程去实现,相对于面向对象设计模式,代码难免会显得臃肿冗余.但没有面向对象的抽象却很适合新手理解与学习.已经在BAT的同学看到希望少喷点.另外可以多提意见. 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利用定时器实现自动播放,或通过
-
原生js实现移动开发轮播图、相册滑动特效
使用方法: 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" href="css/photoSlider.min.css" /> <script src="js/photoSlider.min.js" type="text/javascript" charset="utf-8"></script
-
js实现支持手机滑动切换的轮播图片效果实例
本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu
-
原生js实现无缝轮播图效果
话不多说,请看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝轮播图-原生js封装</title> <link rel="shortcut icon" href="../public/image/favicon.ico" type="ima
-
完美实现八种js焦点轮播图（下篇）
继续上一篇的学习完美实现八种js焦点轮播图(上篇),供大家参考,具体内容如下 5.定时上下无缝滚动 思路: 1.思路1: 将ul复制一份,但滚动一半距离重新归位:(大型网站性能略低): 2.思路2: 通过相对定位,将第一个li移动到最后,再将ul和Li归位. window.onload=function(){ var oBox=document.getElementById('box'); var oUl=document.getElementById('ul'); var aLi_u=oUl.
-
js实现点击左右按钮轮播图片效果实例
本文实例讲述了js实现点击左右按钮轮播图片效果的方法.分享给大家供大家参考.具体实现方法如下: $(function () { var index = 1; var pPage = 1; var $v_citemss = $(".citemss"); var $v_show = $v_citemss.find("ul"); v_width = $v_citemss.width();//图片展示区外围div的大小 //注:若为整数,前边不能再加var,否则会被提示un