js轮播图片小圆点变化_用jQuery实现圆点图片轮播效果
在页面的指定位置实现的图片自动的左右轮流切换展示效果,当点击图片左下的标签(或中间的小圆点)切换到对应的图片。接下来通过本文给大家分享用jQuery实现圆点图片轮播效果实例代码,需要的朋友参考下
图片轮播效果 :
在页面的指定位置实现的图片自动的左右轮流切换展示,效果为无缝连接;
点击图片左下的标签(或中间的小圆点)切换到对应的图片;
点击图片的左右切换标签;
整体思路 :
--------------------------------------------------------------------------------
自动轮播: 将一个用于放置图片素材的与显示框同高度的大div放入显示框,将图片素材放入大的div中,通过jquery的animate()方法改变大div相对于显示框绝对位置的left值及变化时间实现图片的滑动;使用setInterval()方法设置定时器,达到自动播放效果;无缝连续播放的重点在于,第一张图片与最后一张图片要相同,这样播放完最后一张图片后将大div框的left设定为初始值,再将与图片索引相同的变量设定为1(第二张),这样就能达到无缝连续滑动效果;
--------------------------------------------------------------------------------
点击标签切换到对应图片: 对点击切换图片的li标签添加鼠标点击事件,若存在定时器的先清除,使用$(this).Index()获取当前点击图片的序号(索引),将大div的left值设置为当前图片位置的值,同时别忘了将当前li标签设置深颜色的明显效果,其他li标签设置初始效果;在事件中设置倒计时,当鼠标点击后一段时间不进行其他操作,则恢复自动播放的定时器;
--------------------------------------------------------------------------------
点击向左向右标签切换到上/下一张图片: 该标签使用< a >标签达到效果更好(防止连续点击时产生选中页面变蓝的现象),先获取点击时图片的编号,此时不能使用$(this).Index(),因为此时this指代的对象为左右切换标签,而不是图片对象,还记得上面那个与图片索引相同的变量吗?我们需要一开始就设定它为全局变量(我将它起名为rcd),它的值相当于是和图片,li标签一起绑定的,在还没有点击向左向右标签时,图片是在轮播的,rcd变量中存着当前图片的序号,因此,尽管用不了this,我们可以用rcd+1/-1找到向右滑/向左划的图片编号,有了编号,就可以知道大div需要运动到的位置,和设置左下方的标签显示状态了.当rcd-1==-1时,将div的位置设置为最后一张图片显示的位置,然后将rcd设置为倒数第二张图片对应的编号;当rcd+1比最后一张还多一时,将div的位置设置为第一张图片显示的位置,将rcd设置为第二张图片对应的编号即可.
--------------------------------------------------------------------------------
代码实现如下 :
//引入jquery (css代码未贴)
$(function(){
var rcd=0; //代表图片和li标签编号的全局变量
// 滑动函数
function slide(){
rcd++;
if(rcd==4){ //右滑倒最后一张时,将图片设定为第一张的位置,即将滑动的图片设定为第二张(rcd=1)
$('#sld').css({'left':'0'});
rcd=1;
};
var dis = rcd*(-1210)+'px'; //这里的1210是每张图片的宽度,rcd和dis的关系就是编号和div left值的关系
$('#sld').stop().animate({'left':dis},1000) //设定left
if (rcd==3) { //当切换到最后一张时(一共4张图片),将左下方的标签样式也改成与第一张一样的
$('#fix ul li').eq(0).css({'opacity': '0.6'}).siblings('li').css({'opacity': '0.2'})
}else{
$('#fix ul li').eq(rcd).css({'opacity': '0.6'}).siblings('li').css({'opacity': '0.2'}) //不是最后一张那么就正常执行
}
}
// 设定定时器,开始轮播
var timer = setInterval(slide,2000);
var st; //声明倒计时函数变量名
// 绑定li鼠标点击事件
$('#fix ul li').click(function(){
clearInterval(timer); //清除定时器(同下一行)
clearTimeout(st);
var rcd = $(this).index(); //获得点击的li的编号
var dis =rcd*(-1210)+'px'; //获得该编号对应的div的left值
$('#sld').stop().animate({'left':dis},500) //开始运动
$('#fix ul li').eq(rcd).css({'opacity': '0.6'}).siblings('li').css({'opacity': '0.2'}) //设置当前li样式,其他li变为初始值
st = setTimeout(function(){ //设置定时器,若3秒内没有鼠标点击操作,就重新设置轮播定时器
timer = setInterval(slide,2000);
},3000)
});
// 左图标点击事件
$('#fix .lt').click(function(){
clearInterval(timer);
clearTimeout(st);
rcd--; //点击前的编号-1
if(rcd==-1){ //如果rcd减后值为-1,那么将div的left设置为最后一张图显示的值,并将rcd设置为倒数第二张的编号
$('#sld').css({'left':'-3630px'});
rcd=2;
};
var dis = rcd*(-1210)+'px';
$('#sld').stop().animate({'left':dis},1000) //运动
if (rcd==3) { //与前面相同
$('#fix ul li').eq(0).css({'opacity': '0.6'}).siblings('li').css({'opacity': '0.2'})
}else{
$('#fix ul li').eq(rcd).css({'opacity': '0.6'}).siblings('li').css({'opacity': '0.2'})
}
st = setTimeout(function(){
timer = setInterval(slide,2000);
},3000)
})
// 右图标点击事件
$('#fix .rt').click(function(){
clearInterval(timer);
clearTimeout(st);
slide(); //右图标点击一次与滑动函数一致
st = setTimeout(function(){
timer = setInterval(slide,2000);
},3000)
})
// 给#fix div加鼠标移入事件
$('#fix').mouseenter(function(){
$('#fix a').css({'display':'block'}); //鼠标移入时,向左向右图标显示
})
// 给#fix div加鼠标移出事件
$('#fix').mouseleave(function(){
$('#fix a').css({'display':'none'}); //鼠标移出时,向左向右图标隐藏
})
})
- iPhone6
- Mate9
- vivo X9
//阻止浏览器的默认跳转
以上所述是小编给大家介绍的用jQuery实现圆点图片轮播效果,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
js轮播图片小圆点变化_用jQuery实现圆点图片轮播效果相关推荐
- 投影变化做图片的桶形变化_工作中的变化总是个人的:如何从自己做起
投影变化做图片的桶形变化 几代人之后,传统组织就可以像水手走进大海一样应对变化 :尽管水手无法控制要素,但他们可以在合理的范围内预测要素并掌握引导要素的技能. 因此,几乎所有变更仍然可以得到管理和控制 ...
- php图片批量上传插件下载,jQuery的多图片批量上传插件
jQuery的多图片批量上传插件 js代码 $(function(){ //上传图片 var $tgaUpload = $('#goodsUpload').diyUpload({ url:'uploa ...
- js轮播图片小圆点变化_原生js实现轮播图(两种方法)
第一种: 这个是之前写的,比较草率,没有注释,如果这个看不懂就去看第二个,比较仔细,主要是了解他,后面都会有一些插件来使用,很方便,只要几行代码就可写出各种各样的代码,所以,不懂的话,不要太在意, 第 ...
- js轮播图片小圆点变化_纯js实现轮播图,详解(简单,无缝,小圆点,左右手动切换,自动轮动)...
无论用什么语言开发可视化界面,都有一个叫轮播图的东西.我们现在有个需求,如图: slideshow1.PNG 左右切换按钮默认为隐藏,当鼠标进入图片时,左右切换按钮时显示的,当鼠标离开图片时左右切换按 ...
- layui轮播图切换会有跳动_使用jQuery做了一个轮播图,但是在图片的切换中会出现闪烁情况,该如何解决?...
使用jQuery的fadeIn和fadeOut 两个方法做轮播效果,每当切换的时候都会闪一下白色(容器的背景色),后来我将容器的背景色变为黑色后,在firefox和chrome中不太容易看出来,但是在 ...
- python图片转成素描_巧用python实现图片转换成素描和漫画格式
[相关学习推荐:python教程] 本文实例为大家分享了python实现图片转换成素描和漫画格式的具体代码,供大家参考,具体内容如下 原图 图片转换后的成果 源码# -*- coding: utf-8 ...
- 图片 映射 经纬度坐标_天气36小时 / 发送图片识别 / 坐标经纬度
开发功能 目录: 日常聊天(+些许的祖安) 搜题 (后台直接发送题目,回复题解) 疫情(后台发送疫情) 微信图片链接(后台发送一张图片,回复图片在微信服务器的链接地址) 语音聊天 (后台发送一段语音 ...
- mfc让图片与按钮一起_微信朋友圈发图片还能添加语音,简单两步就能搞定!今天学到了...
大家好,我是分享科技小达人~ 今天跟大家探讨的问题是:[微信朋友圈发图片添加语音的方法]. 日常生活中,我们都喜欢发朋友圈,今天就来教你如何在微信朋友圈,发送带语音的图片,方法非常简单,一起来学习一下 ...
- 网页怎么在图片上添加文字_教你同时将图片水印和文字水印添加到视频画面
随着剪辑软件的层出不穷,现在会制作创意视频的人越来越多.今天小编给大家分享一款剪辑软件--视频剪辑高手,以同时给视频添加图片水印和文字水印的效果为例,教大家如何操作. 编辑文字水印命令 勾选视频剪辑高 ...
最新文章
- env export set 作用
- 海通证券签约神策数据 数据赋能构建数字化运营闭环
- Kafka 源码分析之网络层(一)
- AWS新品直指微软,它会是改变数据库的“Game Changer”吗?
- 高中信息技术——VB数据类型和基础语句结构
- 69期-Java SE-004_循环、数组-001-002
- 安卓背景音乐开关_奢华大屏背景音乐系统-圣巴赫S820,行业典范!
- chrome 模拟点击_详解爬虫模拟登陆的三种方法
- MATLAB添加工具包
- 手机电脑自适应导航源码php,自适应各终端懒人网址导航源码 v1.6
- 用matlab求光谱的一阶导数二阶导数
- 雪崩效应 (密码学术语)
- 服务器网卡光模块位置,收藏:详解服务器、磁盘和网卡知识
- PBX用户电话交换机
- el元素与jstl标签
- 程序员版「成语新解」,万万没想到你们竟是这样的……
- 周末imac机重装win7,装得我抓狂
- MySQL内连接、左外连接、右外连接
- webrtc学习笔记二:webrtc介绍
- 【转载】JVM能够开启多少线程
热门文章
- Latex 图片/表格位置不正确
- 【建立个人品牌】自媒体人必须知道的28个新媒体平台
- 解锁三星bl锁有几种方法_如何判断三星 Galaxy S7 (G9308)手机bootloader是否解锁_免费解锁BL的3个方法...
- CSS——CSS定位※ ( position )
- UnityShader 图片像素化风格渲染
- html 游戏引擎 白鹭,HTML5游戏性能大幅提升 白鹭Egret Engine 1.5震撼发布
- 佐客牛排机器人餐厅_2018年中国最火的三家餐厅!秘密竟是机器人服务员?
- 计算方法-数值积分与微分
- 解决linux vi/vim或命令行出现方向键、删除出现乱码
- 部分opencv中的GPU加速函数(中文翻译)