jquery实现左右无缝轮播图


Posted in Javascript onJuly 31, 2020

本文实例为大家分享了jquery无缝轮播图的实现代码,供大家参考,具体内容如下

<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>

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
Feb 01 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
Jun 28 Javascript
通过url查找a元素应用案例
Apr 29 Javascript
对js中回调函数的一些看法
Aug 29 Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
Apr 21 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
Sep 10 Javascript
vue项目首屏打开速度慢的解决方法
Mar 31 Javascript
JS 自执行函数原理及用法
Aug 05 Javascript
vue项目中定义全局变量、函数的几种方法
Nov 08 Javascript
JS创建或填充任意长度数组的小技巧汇总
Oct 24 Javascript
node.js从数据库获取数据
May 08 #Javascript
JavaScript希尔排序、快速排序、归并排序算法
May 08 #Javascript
基于jquery实现最简单的选项卡切换效果
May 08 #Javascript
基于javascript实现图片滑动效果
May 07 #Javascript
基于jquery实现图片放大功能
May 07 #Javascript
基于bootstrap插件实现autocomplete自动完成表单
May 07 #Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
May 07 #Javascript
You might like
PHP4在WinXP下IIS和Apache2服务器上的安装实例
2006/10/09 PHP
PHP之密码加密的几种方式
2015/07/29 PHP
windows8.1下Apache+Php+MySQL配置步骤
2015/10/30 PHP
详解PHP数组赋值方法
2015/11/07 PHP
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
关于PHP通用返回值设置方法
2017/03/31 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
Javascript 中的 &amp;&amp; 和 || 使用小结
2010/04/25 Javascript
IE6下通过a标签点击切换图片的问题
2010/11/14 Javascript
javascript中数组的定义及使用实例
2015/01/21 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
2016/05/17 Javascript
JQuery Mobile 弹出式登录框的实现方法
2016/05/28 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
2016/06/17 Javascript
浅谈JS中json数据的处理
2016/06/30 Javascript
浅谈vue中数据双向绑定的实现原理
2017/09/14 Javascript
深入理解Angularjs 脏值检测
2018/10/12 Javascript
如何使用 vue + d3 画一棵树
2018/12/03 Javascript
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
Python基于QRCode实现生成二维码的方法【下载,安装,调用等】
2017/07/11 Python
python中map()函数的使用方法示例
2017/09/29 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
Python实现的拉格朗日插值法示例
2019/01/08 Python
Python中的几种矩阵乘法(小结)
2019/07/10 Python
Python 函数绘图及函数图像微分与积分
2019/11/20 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
什么是python类属性
2020/06/10 Python
详解scrapy内置中间件的顺序
2020/09/28 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
2013/10/14 HTML / CSS
中秋寄语大全
2014/04/11 职场文书
学校募捐倡议书
2014/05/14 职场文书
看上去很美观后感
2015/06/10 职场文书
Golang 正则匹配效率详解
2021/04/25 Golang
解决golang 关于全局变量的坑
2021/05/06 Golang
ConditionalOnProperty配置swagger不生效问题及解决
2022/06/14 Java/Android