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 相关文章推荐
DIV菜单层实现代码
Nov 19 Javascript
jquery怎样实现ajax联动框(二)
Mar 08 Javascript
在JavaScript中实现类的方式探讨
Aug 28 Javascript
全面了解JavaScript对象进阶
Jul 19 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 Javascript
什么是JavaScript注入攻击?
Sep 14 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
Jan 03 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
Mar 03 Javascript
JS非空验证及邮箱验证的实例
Aug 11 Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
Dec 03 Javascript
vue配置多代理服务接口地址操作
Sep 08 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 数组遍历顺序理解
2009/09/09 PHP
php switch语句多个值匹配同一代码块的实现
2014/03/03 PHP
PHP SESSION的增加、删除、修改、查看操作
2015/03/20 PHP
PHP中如何使用session实现保存用户登录信息
2015/10/20 PHP
PHP 网站修改默认访问文件的nginx配置
2017/05/27 PHP
利用XMLHTTP传递参数在另一页面执行并刷新本页
2006/10/26 Javascript
js网页侧边随页面滚动广告效果实现
2011/04/14 Javascript
javascript SpiderMonkey中的函数序列化如何进行
2012/12/05 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
2014/05/23 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
JS比较两个数值的大小实例
2016/11/25 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
axios 实现post请求时把对象obj数据转为formdata
2019/10/31 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
Python实现抓取城市的PM2.5浓度和排名
2015/03/19 Python
最大K个数问题的Python版解法总结
2016/06/16 Python
win7上python2.7连接mysql数据库的方法
2017/01/14 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
python实现log日志的示例代码
2018/04/28 Python
python实现自动发送报警监控邮件
2018/06/21 Python
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
Python3实现将一维数组按标准长度分隔为二维数组
2019/11/29 Python
新年福利来一波之Python轻松集齐五福(demo)
2020/01/20 Python
django配置app中的静态文件步骤
2020/03/27 Python
Java提供了哪些企业应用编程接口
2015/02/13 面试题
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
年终奖发放方案
2014/06/02 职场文书
2014超市双十一活动策划方案
2014/09/29 职场文书
公司备用金管理制度
2015/08/04 职场文书
opencv用VS2013调试时用Image Watch插件查看图片
2021/07/26 Python
JavaScript获取URL参数的方法分享
2022/04/07 Javascript
KVM基础命令详解
2022/04/30 Servers