首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >JQUERY幻灯片代码压缩

JQUERY幻灯片代码压缩
EN

Stack Overflow用户
提问于 2015-05-17 20:48:17
回答 4查看 44关注 0票数 0

我刚刚开始使用JQuery库,到目前为止我非常喜欢它。我在这里问是否有一种方法来压缩下面的代码。乍一看,它看起来像是大量的复制/粘贴,但这是我能够真正考虑这样做的唯一方法。有关我试图完成的内容的信息:没有控制的3张图像幻灯片。代码运行得很好,但我相信有更好的方法来实现它。

http://recordit.co/lTHpE25ukQ

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
setInterval(function(e){
    image += 1

    if(image == 4) {
        image = 1
    }

    if( image == 1) {
        $('.image1').addClass('active');
        $('.image2').removeClass('active');
        $('.image3').removeClass('active');
        $('.image4').removeClass('active');
    }

    if( image == 2) {
        $('.image1').removeClass('active');
        $('.image2').addClass('active');
        $('.image3').removeClass('active');
        $('.image4').removeClass('active');
    }

    if( image == 3) {
        $('.image1').removeClass('active');
        $('.image2').removeClass('active');
        $('.image3').addClass('active');
        $('.image4').removeClass('active');
    }
}, 10000);

这是我关于堆栈溢出的第一篇文章,所以请给我反馈。

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2015-05-17 21:14:46

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
setInterval(function(e)
{
    image += 1;
    if(image == 5){
        image = 1
    }
    $('.active').removeClass('active');
    $('.image'+image).addClass('active');

}, 10000);
票数 1
EN

Stack Overflow用户

发布于 2015-05-17 20:57:12

您可以向所有元素添加一个公共类(例如“图像”)。在if语句之前,您可以调用

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$('.image').removeClass('active');

在每个if语句中你可以调用,

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$('.imageN').addClass('N');    // N being the number

我也无法打开链接..。:(

编辑

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$("img[class*='image']").removeClass('active');   // selects elements with class name starting with 'image'
var imgClass = '.image' + image;
$(imgClass).addClass('active');

在这里,我们将“.image”与图像编号连接起来,以获得类名。您必须遵循这个类的命名格式才能让它正常工作。

票数 1
EN

Stack Overflow用户

发布于 2015-05-17 20:56:32

您可以使用开关语句,然后在开始时从所有html img标记中删除活动类(假设页面中只有用于此目的的图像标记,如果没有,则为所有图像提供一个更常见的类,并将$(img).removeClass行替换为类名),并根据情况为只需要的图像分配活动类。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
setInterval(function(e){
    image += 1
    if(image == 4) {
        image = 1
    }
    $(img).removeClass('active'); //Remove active class from all the images
    switch(image)
    {   
        case 1:$('.image1').addClass('active');
               break;
        case 2:$('.image2').addClass('active');
               break;
        case 3:$('.image3').addClass('active');
               break;
        default:image=1; 
                break;
    }
}, 10000);
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/30295285

复制
相关文章
jquery slide 幻灯片
因为图片1-5是使用行内块的方式布局,只要控制图片1的div的margin-left改变,就可以跟推箱子一样,实现5个图片的左右滑动。
Devops海洋的渔夫
2019/05/30
3.5K0
jQuery幻灯片插件slick
支持响应式 浏览器支持 CSS3 时,则使用 CSS3 过度/动画 支持移动设备滑动 支持桌面浏览器鼠标拖动 支持循环 支持左右控制 支持动态添加、删除、过滤 支持自动播放、圆点、箭头、回调等等 兼容
李维亮
2021/07/09
3.2K0
jquery图片幻灯片(小图列表,大图展示)
先来个效果图(没有服务器,没办法提供演示版) 效果不如FLASH版的好,接下来我就发出FLASH版的来 全部代码如下所示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <META HTTP-EQUIV="Co
liulun
2022/05/09
2.3K0
jquery图片幻灯片(小图列表,大图展示)
jquery+html 压缩图片
https://github.com/kingwsi/compress-pic/blob/master/index.html
有勇气的牛排
2023/06/25
2100
jQuery扩展以及gzip压缩测试
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=gb3212"> <title>javascript测试</title> <script type="text/javascript" src="http://files.cnblogs.com/yjmyzz/jquery-1.4.2.min.js"></script> <script type="text/ja
菩提树下的杨过
2018/01/22
8430
jQuery类似于幻灯片效果的水平时间轴特效源码解析/代码下载
这是一款设计非常精美的jQuery和CSS3水平时间轴特效插件。该水平时间轴在设计上将时间轴和事件内容分离,时间轴在工作上类似幻灯片效果,而某个时间点对应的事件占据整个时间轴的宽度,并且一次只显示一个事件内容。
用户5997198
2019/08/09
1.8K0
jQuery类似于幻灯片效果的水平时间轴特效源码解析/代码下载
幻灯片jQuery插件Orbit 介绍(附添加到WordPress教程)
这年头,几乎常规的网站都有幻灯片;没有反而显得不高档了。今天介绍一个图片滑动幻灯片jQuery 插件,名字叫 Orbit,自定义功能很强大却是轻量级(仅仅4kb 左右)。接下来介绍一下并提供个添加到W
Jeff
2018/01/19
2.4K0
幻灯片jQuery插件Orbit 介绍(附添加到WordPress教程)
JS 幻灯片代码(含自动播放)
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/158550.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/14
8K0
网页幻灯片轮播代码_怎么快速实现对幻灯片的统一修改
NetCMS有两种幻灯片显示方式:Flash幻灯片和轮换幻灯片。Flash幻灯片是通过将图片新闻中的图片合成Flash后再在页面上显示。轮换幻灯片则是使用脚本进行控制(准确地说,是使用VBScript)。
全栈程序员站长
2022/11/19
1.6K0
网页幻灯片轮播代码_怎么快速实现对幻灯片的统一修改
第145天:jQuery.touchSlider触屏满屏左右滚动幻灯片
1、HTML 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-
半指温柔乐
2018/09/11
2.6K0
JavaScript代码压缩细节
对于Javascript来说,提高网络下载的性能最直接的方法就是把JS文件体积减小。
慕白
2018/08/03
1.2K0
响应式js幻灯片代码一枚
  网站搭建经常会用到js幻灯片轮播,放上几张上档次的美图,为你的爱站增添大气元素。经常看到一些js幻灯片代码,但是感觉不是很美观,有的也不支持自适应缩放,也即是响应式,现在智能手机的普及以及移动浏览器技术的成熟,手机已经成为上网首选(据CNNIC消息:截至2013年12月,我国手机网民规模达5亿,较2012年底增加8009万人,网民中使用手机上网的人群占比由2012年底的74.5%提升至81.0%,手机网民规模继续保持稳定增长。2013年中国新增网民中使用手机上网的比例高达73.3%),我们在网站设计的时
ytkah
2018/03/05
5.9K0
响应式js幻灯片代码一枚
html制作图片幻灯片效果代码,【JS+CSS3】实现带预览图幻灯片效果的示例代码
切换幻灯片 .main_i_active 切换控制按钮 .ctrl_i_active
全栈程序员站长
2022/09/14
5.3K0
html制作图片幻灯片效果代码,【JS+CSS3】实现带预览图幻灯片效果的示例代码
jQuery 实现图片下载代码jQuery 实现图片下载代码
jQuery 实现图片下载代码 function downloadImage(src) { var $a = $("<a></a>").attr("href", src).attr("download", "meitu.png"); $a[0].click(); } 关键调用downloadImage函数代码 onclick=downloadImage(url) 完整 js 代码 $(function () { $.extend($.fn.bootstrapTable.defaul
一个会写诗的程序员
2018/08/17
6.1K0
Nginx 静态压缩和代码压缩,提高访问速度!
但我们上班的心情,还是不能被这炎热的夏天所影响的,所以今天咋们来讲讲如何给前端访问加加速吧!!!
PHP开发工程师
2022/05/26
1.8K0
Nginx 静态压缩和代码压缩,提高访问速度!
javascript 幻灯片代码(含自动播放)「建议收藏」
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/154437.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/06
1.7K0
Webpack中压缩代码文件
在开发完成后,代码正式上线都需要对代码进行压缩,这样代码资源会变的更小,访问速度也会变的更快。
越陌度阡
2023/01/05
1.7K0
Webpack中压缩代码文件
编写更好的jQuery代码
现在已经有很多文章讨论jQuery和JavaScript的性能问题,然而,在这篇文章中我计划总结一些提升速度的技巧和一些我自己的建议来改善你的jQuery和JavaScript代码。更好的代码意味着更快的应用程序,快速渲染和反应性意味着一个更好的用户体验。
跟着阿笨一起玩NET
2018/09/19
1.6K0
jQuery实现不同效果代码
必需的 params 参数定义形成动画的 CSS 属性。 可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。 可选的 callback 参数是动画完成后所执行的函数名称。 如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!
用户7718188
2021/10/07
2.4K0
JQuery 入门 - 附案例代码
HTML入门与进阶以及HTML5 CSS JS-上 JS-下 jQuery Node.js + Gulp 知识点汇总 MongoDB + Express 入门及案例代码 Vue项目开发-仿蘑菇街电商APP
Twcat_tree
2023/02/20
13.9K0
JQuery 入门 - 附案例代码

相似问题

如何压缩jquery代码?

34

压缩jQuery委托代码

36

压缩Javascript/jQuery代码

40

使用jquery 'this‘压缩代码

21

jQuery幻灯片重复代码

32
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文