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中对Attr(dom中属性)的操作示例讲解
Dec 02 Javascript
javascript中的return和闭包函数浅析
Jun 06 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
Aug 16 Javascript
JavaScript 表单处理实现代码
Apr 13 Javascript
JQuery中Text方法用法实例分析
May 18 Javascript
谈一谈js中的执行环境及作用域
Mar 30 Javascript
javaScript中的原型解析【推荐】
May 05 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
Jun 08 Javascript
JavaScript DOM节点操作方法总结
Aug 23 Javascript
Javascript 编码约定(编码规范)
Mar 11 Javascript
通过vue-cli3构建一个SSR应用程序的方法
Sep 13 Javascript
手写Spirit防抖函数underscore和节流函数lodash
Mar 22 Javascript
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
如何使用PHP中的字符串函数
2006/10/09 PHP
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
phpfans留言版用到的install.php
2007/01/04 PHP
php图形jpgraph操作实例分析
2017/02/22 PHP
学习并汇集javascript匿名函数
2010/11/25 Javascript
js动态给table添加/删除tr的方法
2013/08/02 Javascript
javascript常用函数(1)
2015/11/04 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
jQuery利用sort对DOM元素进行排序操作
2016/11/07 Javascript
Angular中ng-bind和ng-model的区别实例详解
2017/04/10 Javascript
Bootstrap4如何定制自己的颜色和风格
2018/02/26 Javascript
react用Redux中央仓库实现一个todolist
2019/09/29 Javascript
JS实现排行榜文字向上滚动轮播效果
2019/11/26 Javascript
vue.js实现简单的计算器功能
2020/02/22 Javascript
js 函数性能比较方法
2020/08/24 Javascript
nuxt静态部署打包相对路径操作
2020/11/06 Javascript
python实现端口转发器的方法
2015/03/13 Python
详解python数据结构和算法
2019/04/18 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
如何将 awk 脚本移植到 Python
2019/12/09 Python
python IDLE添加行号显示教程
2020/04/25 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
HTML5响应式(自适应)网页设计的实现
2017/11/17 HTML / CSS
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
匡威德国官网:Converse德国
2019/01/26 全球购物
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
毕业生实习鉴定
2013/12/11 职场文书
电气自动化个人求职信范文
2014/02/03 职场文书
蓝颜请假条
2014/04/11 职场文书
十佳少年事迹材料
2014/12/25 职场文书
幼师自荐信范文
2015/03/06 职场文书
2015年教研室工作总结范文
2015/05/23 职场文书
刑事上诉状(量刑过重)
2015/05/23 职场文书
SQLServer 日期函数大全(小结)
2021/04/08 SQL Server
详解redis在微服务领域的贡献
2021/10/16 Redis