列表的显示与隐藏

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>过滤选择器</title>

 <style type="text/css">

 </style>

 <script type="text/javascript" src="../js/jQuery-3.2.1.js"></script>

 <script type="text/javascript">

     $(function() {

         $(".myclass:visible").hide();

         $("a[href='#']").click(function() {

             if ($(this).text() == "更多") {

                 $(".myclass:hidden").show();

                 $(this).html("简化");

             } else {

                 $(".myclass:visible").hide();

                 $(this).html("更多");

             }

         });

     });

 </script>

 </head>

 <body>

     <ul>

         <li>联系我们</li>

         <li>友情链接</li>

         <li>团队风采</li>

         <li>个人首页</li>

         <li class="myclass" style="display: none">更多1</li>

         <li class="myclass" style="display: none">更多2</li>

         <li class="myclass" style="display: none">更多3</li>

         <li>结尾</li>

         <li><a href="#">更多</a></li>

     </ul>

 </body>

 </html>

轮播图：

html:

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

 <link rel="stylesheet" href="css/style.css" type="text/css">

 <script type="text/javascript" src="js/jquery-3.2.1.js"></script>

 <script type="text/javascript" src="js/carousel.js"></script>

 </head>

 <body>

     <div class="bigbox">

         <ul>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

         </ul>

         <div class="left">&lt;</div>

         <div class="right">&gt;</div>

     </div>

 </body>

 </html>

css:

 ul, li {

     padding: ;

     margin: ;

     list-style: none;

 }

 .bigbox {

     margin:  auto;

     width: 700px;

     overflow: hidden;

     height: 454px;

     position: relative;

     background: url("../images/adver01.jpg");

 }

 ul {

     position: absolute;

     bottom: 10px;

     z-index: ;

     width: %;

     text-align: center;

 }

 ul li {

     display: inline-block;

     font-size: 10px;

     line-height: 20px;

     font-family: "ST";

     margin:  1px;

     width: 20px;

     height: 20px;

     border-radius: %;

     background: #;

     text-align: center;

     color: #ffffff;

 }

 .left,.right {

     position: absolute;

     width: 30px;

     background: rgba(, , , 0.2);

     height: 50px;

     line-height: 50px;

     text-align: center;

     top: 200px;

     z-index: ;

     font-family: "ST";

     font-size: 28px;

     font-weight: bold;

     cursor: pointer;

     display: none;

 }

 .left {

     left: 10px;

 }

 .right {

     right: 10px;

 }

 li:nth-of-type() {

     background: orange;

 }

jQuery:

 $(document).ready(function(){

     var index=;

     var img = Array('images/adver01.jpg','images/adver02.jpg','images/adver03.jpg','images/adver04.jpg','images/adver05.jpg','images/adver06.jpg');

     var timer;

     play();

     $('.bigbox').mouseover(function(){

         $(".left,.right").show();

         stop();

     });

     $('.bigbox').mouseout(function(){

         $(".left,.right").hide();

         play();

     });

     $('.right').click(function(){

         index++;

         if(index == img.length){

             index = ;

         }

         display(index);

     });

     $('.left').click(function(){

         index--;

         if(index == -){

             index = img.length-;

         }

         display(index);

     });

     function display(index){

         $('.bigbox').css('background','url("'+img[index]+'")')

         $('ul li:eq('+index+')').css('background','orange');

         $('ul li:eq('+index+')').siblings().css('background','#333');

     }

     for (var i = ; i < img.length; i++) {

         (function(i) {

             $('ul li:eq('+i+')').click(function(){

                 index = i;

                 display(index);

             });

         })(i)

     }

     function stop(){clearInterval(timer)}

     function play() {timer = setInterval(function(){

         index++;

         if(index == img.length){

             index = ;

         }

         display(index);

     },)}

 });

jQuery入门——实现列表的显示隐藏与实现轮播图的更多相关文章

  1. 潭州课堂25班：Ph201805201 django 项目 第二十二课 文章主页 新闻列表页面滚动加载，轮播图后台实现 (课堂笔记）

    新建static/js/news/index.js文件 ,主要用于向后台发送请求, // 新建static/js/news/index.js文件 $(function () { // 新闻列表功能 l ...

  2. jQuery淡入淡出效果轮播图

    用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...

  3. jQuery实现简易轮播图的效果

    (图片素材取自于小米官网) 刚开始接触jQuery的学习,个人觉得如果为了实现多数的动态效果,jQuery的确很简易方便. 下面简易的轮播图效果,还请前辈多多指教~ (努力学习react vue an ...

  4. jquery的fadeTo方法的淡入淡出轮播图插件

    由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...

  5. 用纯css、JavaScript、jQuery简单的轮播图

    完成一个可以自动切换或点击数字的轮播图 HTML代码只需要一个div 包含着一个图片和一个列表,我们主要的思路就是通过点击相应的数字,改变图片的 路径. 有4张图片都在img文件夹里,名称为  img ...

  6. 【前端】javascript+jQuery实现旋转木马效果轮播图slider

    实现效果: 实现原理: 技术栈: javascript+jQuery+html+css 实现步骤: // 0. 获取元素 // 1. 鼠标放置到轮播图上,显示两侧的控制按钮,移开后隐藏 // 2. 为 ...

  7. jQuery轮播图（二）利用构造函数和原型创建对象以实现继承

    本文是在我开始学习JavaScript继承时,对原型继承的一些理解和运用.文中所述的继承方式均是使用js特有的原型链方式,实际上有了ES6的类之后,实现继承的就变得十分简单了,所以这种写法现在也不在推 ...

  8. jQuery轮播图（一）轮播实现并封装

    利用面向对象自己动手写了一个封装好的jquery轮播组件,可满足一般需求,不仅使用简单且复用性高. demo:点此预览 代码地址:https://github.com/zsqosos/componen ...

  9. 用js和jQuery做轮播图

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

随机推荐

  1. c#调用ffmpeg嵌入srt/ass字幕提示Cannot load default config file...

    c#调用ffmpeg嵌入srt/ass字幕提示 Fontconfig error: Cannot load default config file[Parsed_subtitles_0 @ 00000 ...

  2. visual studio code 调试 .NET core 1.1.

    一  windows端  使用VsCode编写和调试.NET Core项目 1 .新建sln 解决方案 dotnet new sln -o slnname 2. 新建DLL 3.将DLL添加到sln: ...

  3. halcon基础数据类型

    halcon基础数据类型 使用变量不需定义 等号       := 不等号    # 字符串赋值  str:='sdff' 等于比较符         if(q=0) 与       if(a< ...

  4. PHP 一致性Hash

    一致性HASH 好久没有写文章了,最近忙着公司的事情,也一拖再拖.这篇一致性hash是很久之前就有的一篇算法,记录一下,这周写个基于该算法的Redis中间件. HASH算法的精髓就在于打散原本杂乱无序 ...

  5. 基于vue开发的多功能的时间选择器组件，开箱即用

    好一段时间没有写过博客了,在国庆期间心血来潮优化了一个组件,在日常开发中时常会有需求用到时间选择器,不同的项目需求可能会不一样.近期开发的几个项目中就有需求用到这样的选择器,由于以前有用到相关的组件, ...

  6. VS2010调试X86汇编程序

    今天突然无聊了一下,想起之前想的用VS来调试汇编程序.之前只是想了一下,没有去做,好吧,今天搜索一下,找到了一个教程,相当的详细具体,我喜欢 按照http://blog.csdn.net/jinson ...

  7. Android零基础入门第9节：Android应用实战，不懂代码也可以开发

    原文:Android零基础入门第9节:Android应用实战,不懂代码也可以开发 通过上一期的学习,我们成功开发了Android学习的第一个应用程序,不仅可以在Android模拟器上运行,同时还能在我 ...

  8. create table as 复制not null

    创建一张表包含非空约束,唯一约束和check约束 SQL> create table dept( 2 ename varchar2(20) constraint mep_ename_nn not ...

  9. Visual studio 创建通用项目失败vstemplate

    Visual studio 创建项目失败 提示 the vstemplate file references the wizard class 'Microsoft.VisualStudio.WinR ...

  10. Lua中的协同程序 coroutine（转）

    Lua中的协程和多线程很相似,每一个协程有自己的堆栈,自己的局部变量,可以通过yield-resume实现在协程间的切换.不同之处是:Lua协程是非抢占式的多线程,必须手动在不同的协程间切换,且同一时 ...