jquery手写轮播图_jquery 轮播图怎么写
jquery轮播图的实现方法:首先创建一个放置的盒子“p.focus”;然后将overflow设置为hidden;接着通过javascript实现点击左右翻页切换图片的功能即可。
本教程操作环境:windows7系统、jquery1.10.0版本,该方法适用于所有品牌电脑。
jQuery实现轮播图效果
许多电商网站或者门户网站上都会有一个焦点图自动轮播的广告,下面将亲自用jQuery实现一个这个效果。
主要有三个功能需要实现:
1. 点击左右翻页,会切换图片
2. 点击下方导航按钮,会显示该位置上的图片
3. 鼠标移出所在区域,左右翻页按钮消失,图片自动轮播
HTML编写
首先需要一个放置的盒子p.focus,这个盒子的宽度和高度应该和每一张图片大小保持一致,同时要将overflow设置为hidden。放图片的宽度为所有图片的总宽度,通过改变盒子的left属性来实现图片的切换。由于在点击到最后一张图片时再点下一张需要跳转到第一张图片实现无限滚动的效果,所以在一头一尾分别再添加一张图片。
可以看到如果将p.focus的overflow属性注释掉以后,图片时平铺在整个页面上的。
CSS编写
由于需要改变图片的left属性,所以要将其position设置为absolute。左右翻页按钮再鼠标移动到上面时,改变它的透明度。
JavaScript编写
首先要实现点击左右翻页切换图片的功能
一张图片宽度为480px,所以在点击右侧箭头的时候应该将图片向左移动480px,就是left要减480px,而点击左侧箭头的时候left加480px;同时在图片由最后一张切换到第一张的时候要将left的值重置为-480px,由第一张切换到最后一张的时候将left的值重置为-2880px,这样就造成了可以无限循环的错觉。/**
* 这个函数用于移动图片,接收一个移动参数
* @param dis为需要移动的距离
*/
function move(dis){
moving = true; let $picture = $(".picture"); let left = parseInt($picture.css("left"));
left += dis;
$picture.animate({left:left},400,"linear",function(){
if(left > -480){
left = -2880;
} if(left < -2880){
left = -480;
}
$picture.css("left",left + "px");
moving = false;
});
}
接下来是下方的导航按钮,点击时会自动切换到对应的图片上,同时被点击的按钮还会高亮。/**
* 这个函数是用于点亮下方的几个小按钮的
*/
function activeBtn(){
if(index < 1){
index = 6;
} if(index > 6){
index = 1;
} let $cur_active = $(".button-group").find(".active"); if($cur_active.attr("index") !== index){
$cur_active.removeClass("active");
$(".button-group").find('[index=' + index+']').addClass("active");
}
}
最后是自动轮播函数的编写,这个函数需要定时执行上面的两个函数/**
* 实现焦点图自动轮播
*/
function autoMove(){
index += 1;
activeBtn();
move(-480);
timeoutId = setTimeout(autoMove,5000);
}
下面是关于其他事件绑定的代码let index = 1;//当前为第几张图片
let timeoutId; let moving = false;
timeoutId = setTimeout(autoMove,5000); //为左右翻页添加点击事件
$("#left").click(function(event){
event.preventDefault(); if(!moving){
index -= 1;
activeBtn();
move(480);
}
});
$("#right").click(function(event){
event.preventDefault(); if(!moving){
index += 1;
activeBtn();
move(-480);
}
}); //为下方按钮添加点击事件
$(".button-group").click(function(event){
let $target = $(event.target); if($target.is("span")){ if(!moving){ let cur_index = parseInt($(this).find(".active").attr("index"));
index = parseInt($target.attr("index"));
activeBtn();
move(-480 * (index - cur_index));
}
}
});
$(".focus").mouseenter(function(event){
$(".arrow").css("visibility","visible");
clearTimeout(timeoutId);//取消自动轮播
})
.mouseleave(function(event){
$(".arrow").css("visibility","hidden");
timeoutId = setTimeout(autoMove,5000);//重新设置自动轮播
});
总结
在其中有一些需要特别注意的地方:
1. 移动图片过后要判断left值是否超出了预期值,超出过后要重置
2. 通过.attr(“index”)取得的index值是一个字符串,需要将它转换成整数,否则在点击下方导航按钮的时候会出错
3. 图片在移动时要将moving设置为true让其他按钮不能再点击,移动完成后重置为false
jquery手写轮播图_jquery 轮播图怎么写相关推荐
- jquery手写轮播图_用jQuery如何手写一个简单的轮播图?(附代码)
用jQuery如何手写一个简单的轮播图?下面本篇文章通过代码示例来给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用 jQuery 手写轮播图 先上个效果截图: 主要 ...
- html5圆形图片轮播,jQuery超酷响应式圆形图片轮播图特效
mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件.该轮播图特效可以将图片以圆形图片显示,然后使图片无限循环形成轮播图或旋转木马特效.该轮播图插件的特点有: 使用简单 在同一个 ...
- jquery的fadeTo方法的淡入淡出轮播图插件
由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...
- html5页面3d滚动轮播,jQuery实现的3D版图片轮播示例【滑动轮播】
本文实例讲述了jQuery实现的3D版图片轮播.分享给大家供大家参考,具体如下: 这个是用了3张图,来回滑动,类似一个圆圈(不晓得这个 怎么上动图啊!!!!) 图就是这么个图,但是他是可以滑动的(不好 ...
- 一键生成轮播图,轮播图插件
一键生成轮播图,轮播图插件 简介 写练习的时候发现每次写轮播图都觉得很麻烦,突发奇想,何不写个轮播图插件,需要轮播图的时候,直接调用插件一键生成就行了!!! 于是乎,便写了以下代码(因为博主还是在校学 ...
- 利用jQuery实现图片无限循环轮播(不借助于轮播插件)
原来我主要是用Bootstrap框架或者swiper插件实现轮播图的功能,而这次是用jQuery来实现图片无限循环轮播! 用到的技术有:html.css.JavaScript(少).jQuery(主要 ...
- 轮播图最后一张图结束如何平缓回到第一张_产品经理早期如何学习?
关于这个问题,多数同学学习的目的是就业,大学里面也没有产品经理专业,所以不会去考学分,也不需要考证,更不需要考研.产品经理是一个职位,我们学习的目的是如何能够用所学到的能力去就业,去工作.如果达到工作 ...
- uni-app:多功能轮播图,堆叠试轮播,文本轮播,图文轮播
插件地址[前往] mosowe-swiper:适用于uni-app的轮播图插件 轮播组件,本插件兼容H5.APP.微信小程序.支付宝小程序 组件功能 普通轮播(文本.图片,图文轮播,支持上下.左右轮播 ...
- iOS UI篇——轮播图Banner图片动图混合无限轮播
KJBannerView 介绍一下自己之前写的无限轮播图库,无限自动循环滚动,大家有什么需求可以给我留言,持续更新中- Demo地址:KJBannerViewDemo 功能介绍 KJBannerVie ...
最新文章
- Nexus3 使用root无法启动解决
- MySQL使用正则表达式
- ugui unity 取消选择_Unity暑期萌新入门:环境篇
- python -- 字符串的方法及注释
- 打印发现function toUpperCase() { [native code] }
- GStreamer基础教程07 - 播放速率控制
- android人脸情绪识别器,基于Android平台的人脸表情识别系统的设计与实现
- data layui table 排序_使用pandas的pivot_table方法统计2019年各省份GDP最大最小值及其对应的所在城市...
- Linux系统调用之open(), close() (转载)
- c花体复制_可复制花体字大全?
- 免费好用的文字转语音工具
- 基于 HTML5 WebGL 的 3D 网络拓扑图
- MySQL的Workbench中pk nn uq等的含义
- 第二十二篇玩转【斗鱼直播APP】系列之弹出房间界面
- Python股票分析系列——数据整理和绘制.p2
- UGUI Text行首标点处理
- 【MFC】Ribbon界面开发(一)
- Java-SpringBoot-使用Sigar采集设备信息
- 动态函数监控技术在缓冲区溢出检测中的应用
- WPF TreeView 启动时如何默认选择首个节点