jQuery做的自定义选项卡

HTML代码：图片可以随便找几张加上去

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <link rel="stylesheet" type="text/css" href="test_4.css"/>
 7
 8     </head>
 9     <body>
10         <div class="container">
11             <img src="img/p1.jpg" class="active"/>
12             <img src="img/p2.jpg"/>
13             <img src="img/p3.jpg"/>
14             <img src="img/p4.jpg"/>
15             <img src="img/p5.jpg"/>
16             <img src="img/p6.jpg"/>
17             <img src="img/p7.jpg"/>
18             <input type="button" class="prev" value="" />
19             <input type="button" class="next" value="" />
20             <ul>
21                 <li><a class="ball checked"></a></li>
22                 <li><a class="ball"></a></li>
23                 <li><a class="ball"></a></li>
24                 <li><a class="ball"></a></li>
25                 <li><a class="ball"></a></li>
26                 <li><a class="ball"></a></li>
27                 <li><a class="ball"></a></li>
28             </ul>
29         </div>
30         <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
31         <script src="test_4.js" type="text/javascript" charset="utf-8"></script>
32     </body>
33 </html>

css样式表：

 1 .container{
 2     width: 1226px;
 3     height: 460px;
 4     position: relative;
 5 }
 6 .container img{
 7     position: absolute;
 8     left: 0;
 9     top: 0;
10     display: none;
11 }
12
13 .prev{
14     width: 41px;
15     height: 69px;
16     border: none;
17     background-image: url(img/icon-slides.png);
18     position: absolute;
19     background-position: -84px 50%;
20     left: 0;
21     top: 196px;
22     background-color: rgba(0,0,0,0);
23     outline: none;
24     cursor: pointer;
25 }
26 .prev:hover{
27     background-position: -0px 50%;
28     cursor: pointer;
29 }
30 .container .active{
31     display: block;
32 }
33 .next{
34     width: 41px;
35     height: 69px;
36     border: none;
37     background-image: url(img/icon-slides.png);
38     position: absolute;
39     top: 196px;
40     right: 0;
41     background-position: -125px 50%;
42     background-color: rgba(0,0,0,0);
43     outline: none;
44     cursor: pointer;
45 }
46 .next:hover{
47     background-position: -42px 50%;
48     cursor: pointer;
49 }
50 .ball{
51     display: block;
52     width: 6px;
53     height: 6px;
54     background-color: rgba(0,0,0,0.4);
55     border: 2px solid rgba(255,255,255,0.3);
56     border-radius: 100%;
57     margin: 0 4px;
58     cursor: pointer;
59 }
60 ul{
61     list-style: none;
62     padding: 0;
63     margin: 0;
64     position: absolute;
65     right: 50px;
66     bottom: 20px;
67 }
68 ul li{
69     float: left;
70 }
71 .checked{
72     background-color: rgba(255,255,255,0.4);
73     background-clip: padding-box;
74     border-color: rgba(0,0,0,0.3);
75 }

jQuery代码：

 1 $(function(){
 2     //向后切换
 3     $(".next").click(function(){
 4         //查找当前元素
 5         var current=$(".active");
 6         //只查找身后img标签改变样式
 7         var next =current.next("img");
 8         if(next.length==0){//判断找没找到不能用null,用length==0
 9             next=$(".container img:first-child");
10         }
11         //当前元素隐藏
12         current.fadeOut(function(){
13             current.removeClass("active");
14
15         });
16         //下一个 元素隐藏
17         next.fadeIn(function(){
18             next.addClass("active")
19         });
20         var i =$("img").index(next)
21         $("ul a").removeClass("checked");
22         $("ul li:eq("+i+") a").addClass("checked");
23
24     });
25     //向前切换
26     $(".prev").click(function(){
27         //查找当前元素
28         var current=$(".active");
29         //只查找身后img标签改变样式
30         var prev =current.prev("img");
31         if(prev.length==0){//判断找没找到不能用null,用length==0
32             prev=$(".container img:last-of-type");
33         }
34         //当前元素隐藏
35         current.fadeOut(function(){
36             current.removeClass("active");
37
38         });
39         //下一个 元素隐藏
40         prev.fadeIn(function(){
41             prev.addClass("active")
42         });
43     });
44
45     $(".ball").click(function(){
46         var i=$("ul li").index($(this).parent());
47         if($(this).hasClass("checked")){
48             return;
49         }
50         $(".active").fadeOut(function(){
51             $(this).removeClass("active");
52         })
53         $("img").eq(i).fadeIn(function(){
54             $(this).addClass("active");
55         });
56         $(".checked").removeClass("checked");
57         $(this).addClass("checked");
58     });
59
60 });
61 $(".next").oneTime("1s",function(){
62
63 });

转载于:https://www.cnblogs.com/liuxuanhang/p/7831205.html

jQuery做的自定义选项卡相关推荐

  1. html mui按钮居中,《mui学习笔记》：自定义选项卡

    准备工作 mui模板 IDE:HBuilder 分析 依据mui原有的实现,自定义选项卡风格,即满足了项目的需求,也达到熟悉mui的目的. 对mui css做式样调整 开始 先看自定义后的选项卡 效果 ...

  2. 自定义ajax脚本出粗哦,jQuery DataTables插件自定义Ajax分页实例解析

    一.问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分类效果. 后端的分页接口已经写好了,不涉及条件查询,需要传入页码(pageNo)和页面显示数 ...

  3. jquery设置video的宽度_jQ效果：jQuery和css自定义video播放控件

    下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...

  4. WPS表格 JSA 学习笔记 - 实现【设置编号】并添加到自定义选项卡

    WPS表格 JSA 学习笔记 - 设置编号 0. 纯手工实现: 0.1. 编号使用建议 1. 标题设置编号 2. 遍历所有标题设置编号 添加到自定义选项卡 参考资料 关于编号引用 经常遇到编号设置混乱 ...

  5. html自定义标签提示,用简单的jquery+CSS创建自定义的a标签title提示tooltip_HTML/Xhtml_网页制作...

    简介 用简单的jquery+CSS创建自定义的a标签title提示,用来代替浏览器默认行为.如图: Javascript代码 代码如下: $(function() { $("a[title] ...

  6. oracle form 滚动条,jQuery实现的自定义滚动条实例详解

    本文实例讲述了jQuery实现的自定义滚动条.分享给大家供大家参考,具体如下: 可以自由的给滚动条定义背景,上下按钮,当然不仅仅是颜色,连图片当背景也可以.支持鼠标滚轮,点击滚动条滚轴定位,上下按钮久 ...

  7. php jq跳转页面跳转,使用jQuery做页面跳转

    这次给大家带来使用jQuery做页面跳转,使用jQuery做页面跳转的注意事项有哪些,下面就是实战案例,一起来看一下. 所以了,今天我们就来说一说如何在jQuery中跳转到另外一个网页HTML. 其实 ...

  8. 用js和jQuery做轮播图

    Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...

  9. [jQuery] jQuery UI怎样自定义组件？

    [jQuery] jQuery UI怎样自定义组件? 又是第一次,现在的感受是jQueryUI Widget能让你代码组织得更好,风格更一致. 如何开始使用首先用$.widget()方法开始定义你的组 ...

  10. [jQuery] 你知道自定义事件吗？jQuery里的fire函数是什么意思，什么时候用？

    [jQuery] 你知道自定义事件吗?jQuery里的fire函数是什么意思,什么时候用? 1种是把那个bai函数放du到zhiready函数外面. 第dao2种是在ready函数zhuan里面加上w ...

最新文章

  1. 云计算机机房怎么样,如何知道云电脑配置多少？怎么选择云电脑机房？
  2. How to use nheqminer in RedHat based systems (CentOS/Fedora)
  3. Visual C++ Windows 用来定位 DLL 的搜索路径
  4. GIT将本地项目上传到Github（两种简单、方便的方法）
  5. 小程序引入百度地图与uni.getLocation的使用
  6. poj 3352Road Construction（无向双连通分量的分解）
  7. Python之Hello World
  8. sql数据透视_SQL Server中的数据科学：取消数据透视
  9. hdu1166 敌兵布阵 线段树
  10. 吴恩达神经网络和深度学习-学习笔记-37-inception网络
  11. mysql 密码sa_重置MySQL root密码
  12. Linux内核学习路线 ，应从入门到深入，学内核就来零声教育
  13. JS_js和jq获取屏幕高度、宽度的方法
  14. linux下 Wowza安装与ffmpeg测试
  15. PowerPoint 中缺少think-cell 加载项怎么解决？
  16. 计算机关闭账号用户控制好吗,Win10系统彻底关闭用户帐户控制的方法
  17. 【C# 单因素方差分析（One Way ANOVA）】
  18. vue中自定义组件的用法（企业微信通讯录选人）
  19. 海思Hi3559AV100移植Qt5.9.9（一）
  20. 小车高速怎么收费标准_2018高速收费最新标准 跑长途的要看看

热门文章

  1. 2021-09-10 Bagging[7](并 行)和Boosting[8](串行)是两种常见的集成学习方法
  2. 558. 四叉树交集
  3. docker部署flask服务方法
  4. 赢在微点答案专区英语_自考英语二太难？看了墨盒的单词本，保你信心满满去考试！...
  5. hdu acm1157
  6. SVM入门（一）至（三）
  7. 解锁lintcode-猫和狗的问题
  8. UTM(Undergraduate Texts in Mathematics)书单 |附下载链接
  9. Raki的读paper小记：A Unified MRC Framework for Named Entity Recognition
  10. PHP MD5 SHA1 比较 漏洞绕过