JS实现左右无缝轮播图代码


Posted in Javascript onMay 01, 2016

废话不多说了,直接给大家贴代码了。

无缝轮播图:

<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: absolute;top: 0;left: 0}
.img li{float: left;}
.num{position: absolute;bottom: 10px;width: 100%;text-align: center;font-size: 0;}
.num li{width: 10px;height: 10px;background:rgba(0,0,0,0.5);display: block;border-radius: 100%;display: inline-block;margin: 0 5px;cursor: pointer;}
.btn{display: none;}
.btn span{display: block;width: 50px;height: 100px;background: rgba(0,0,0,0.6);color: #fff;font-size: 40px;line-height: 100px;text-align: center;cursor:pointer;}
.btn .prev{position: absolute;left: 0;top: 50%;margin-top: -50px;}
.btn .next{position: absolute;right: 0;top: 50%;margin-top: -50px;}
.num .active{background-color: #fff;}
</style>
<script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div class="banner">
<ul class="img">
<li><a href="#"><img src="img/1.jpg" alt="第1张图片"></a></li>
<li><a href="#"><img src="img/2.jpg" alt="第2张图片"></a></li>
<li><a href="#"><img src="img/3.jpg" alt="第3张图片"></a></li>
<li><a href="#"><img src="img/4.jpg" alt="第4张图片"></a></li>
<li><a href="#"><img src="img/5.jpg" alt="第5张图片"></a></li>
</ul>
<ul class="num"></ul> //
<div class="btn">
<span class="prev"><</span>
<span class="next">></span>
</div>
</div>
<script>
$(function(){
var i=0;
var timer=null;
for (var j = 0; j < $('.img li').length; j++) { //创建圆点
$('.num').append('<li></li>')
}
$('.num li').first().addClass('active'); //给第一个圆点添加样式
var firstimg=$('.img li').first().clone(); //复制第一张图片
$('.img').append(firstimg).width($('.img li').length*($('.img img').width())); //将第一张图片放到最后一张图片后,设置ul的宽度为图片张数*图片宽度
// 下一个按钮
$('.next').click(function(){
i++;
if (i==$('.img li').length) {
i=1; //这里不是i=0
$('.img').css({left:0}); //保证无缝轮播,设置left值
};
$('.img').stop().animate({left:-i*600},300);
if (i==$('.img li').length-1) { //设置小圆点指示
$('.num li').eq(0).addClass('active').siblings().removeClass('active');
}else{
$('.num li').eq(i).addClass('active').siblings().removeClass('active');
}
})
// 上一个按钮
$('.prev').click(function(){
i--;
if (i==-1) {
i=$('.img li').length-2;
$('.img').css({left:-($('.img li').length-1)*600});
}
$('.img').stop().animate({left:-i*600},300);
$('.num li').eq(i).addClass('active').siblings().removeClass('active');
})
//设置按钮的显示和隐藏
$('.banner').hover(function(){
$('.btn').show();
},function(){
$('.btn').hide();
})
//鼠标划入圆点
$('.num li').mouseover(function(){
var _index=$(this).index();
$('.img').stop().animate({left:-_index*600},150);
$('.num li').eq(_index).addClass('active').siblings().removeClass('active');
})
//定时器自动播放
timer=setInterval(function(){
i++;
if (i==$('.img li').length) {
i=1;
$('.img').css({left:0});
};
$('.img').stop().animate({left:-i*600},300);
if (i==$('.img li').length-1) { 
$('.num li').eq(0).addClass('active').siblings().removeClass('active');
}else{
$('.num li').eq(i).addClass('active').siblings().removeClass('active');
}
},1000)
//鼠标移入,暂停自动播放,移出,开始自动播放
$('.banner').hover(function(){ 
clearInterval(timer);
},function(){
timer=setInterval(function(){
i++;
if (i==$('.img li').length) {
i=1;
$('.img').css({left:0});
};
$('.img').stop().animate({left:-i*600},300);
if (i==$('.img li').length-1) { 
$('.num li').eq(0).addClass('active').siblings().removeClass('active');
}else{
$('.num li').eq(i).addClass('active').siblings().removeClass('active');
}
},1000)
})
})
</script>

以上代码是使用js实现的无缝轮播效果,代码比较简单,所以没有给大家注释,如果有疑问欢迎给我留言。

Javascript 相关文章推荐
javascript new 需不需要继续使用
Jul 02 Javascript
JavaScript实现拼音排序的方法
Nov 20 Javascript
JavaScript实现点击按钮切换网页背景色的方法
Oct 17 Javascript
AngularJS中的过滤器filter用法完全解析
Apr 22 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
May 09 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
Mar 04 Javascript
ES6新数据结构Map功能与用法示例
Mar 31 Javascript
关于express与koa的使用对比详解
Jan 25 Javascript
Vue SSR 组件加载问题
May 02 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
微信小程序实现通讯录列表展开收起
Nov 18 Javascript
vue递归实现树形组件
Jul 15 Vue.js
JavaScript中的继承之类继承
May 01 #Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
Apr 30 #Javascript
js判断手机浏览器操作系统和微信浏览器的方法
Apr 30 #Javascript
js实现的万能flv网页播放器代码
Apr 30 #Javascript
js实现的下拉框二级联动效果
Apr 30 #Javascript
js实现精确到秒的日期选择器完整实例
Apr 30 #Javascript
js简单倒计时实现代码
Apr 30 #Javascript
You might like
mysq GBKl乱码
2006/11/28 PHP
PHP5 面向对象程序设计
2008/02/13 PHP
php minixml详解
2008/07/19 PHP
PHP用户注册邮件激活账户的实现代码
2017/05/31 PHP
JS面向对象、prototype、call()、apply()
2009/05/14 Javascript
js getElementsByTagName的简写方式
2010/06/27 Javascript
javascript Array对象基础知识小结
2010/11/16 Javascript
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
jquery中实现标签切换效果的代码
2011/03/01 Javascript
JavaScript中的私有/静态属性介绍
2012/07/26 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
2013/01/23 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
JavaScript原生对象之Number对象的属性和方法详解
2015/03/13 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
2016/08/02 Javascript
JavaScript轻松创建级联函数的方法示例
2017/02/10 Javascript
手把手教你把nodejs部署到linux上跑出hello world
2017/06/19 NodeJs
JavaScript实现的简单Tab点击切换功能示例
2018/07/06 Javascript
使用异步组件优化Vue应用程序的性能
2019/04/28 Javascript
使用js在layui中实现上传图片压缩
2019/06/18 Javascript
layui之table checkbox初始化时选中对应选项的方法
2019/09/02 Javascript
JavaScript实现Tab选项卡切换
2020/02/13 Javascript
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
pygame实现烟雨蒙蒙下彩虹雨
2019/11/11 Python
linux 下selenium chrome使用详解
2020/04/02 Python
Jupyter安装拓展nbextensions及解决官网下载慢的问题
2021/03/03 Python
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
全球虚拟主机商:HostGator
2017/02/06 全球购物
资深财务管理人员自我评价
2013/09/22 职场文书
自我评价怎么写好呢?
2013/12/05 职场文书
检讨书范文1000字
2015/01/28 职场文书
2015年安全月活动总结
2015/03/26 职场文书
vue完美实现el-table列宽自适应
2021/05/08 Vue.js
Python字符串常规操作小结
2022/04/03 Python
Mysql中的触发器定义及语法介绍
2022/06/25 MySQL
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android