列表的显示与隐藏

 <!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. 用acharengine作Android图表

    首先要下载acharengine的包,里面重要的有lib和一些简易的工具,等下我附在文件夹里,而这些包都必须调用的. 然后以下附上主要的作图代码: package org.achartengine.c ...

  2. 用WPF实现打印及打印预览

    原文:用WPF实现打印及打印预览 应该说,WPF极大地简化了我们的打印输出工作,想过去使用VC++做开发的时候,打印及预览可是一件极麻烦的事情,而现在我不会再使用C++来做Windows的桌面应用了- ...

  3. ASP.NET Core 配置 EF 框架服务 - ASP.NET Core 基础教程 - 简单教程，简单编程

    原文:ASP.NET Core 配置 EF 框架服务 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 配置 EF 框架服务 上一章节中我们了解了 Entity ...

  4. NS2网络模拟(1)-延迟

    1: #NS2_有线部分\EndDelay.awk 2: 3: BEGIN { 4: #Initialize the variable 5: MaxID = 0; 6: i = 0; 7: } 8: ...

  5. svm资料收集

    向量点乘(内积)和叉乘(外积.向量积)概念及几何意义解读: https://blog.csdn.net/dcrmg/article/details/52416832 三角形余弦定理:https://z ...

  6. 一个Windows C++的线程类实现（封装API，形成一个类，但不完善。其实可以学习一下Delphi的TThread的写法）

    Thread.h #ifndef __THREAD_H__ #define __THREAD_H__ #include <string> #include   <windows.h& ...

  7. 从Windows系统服务获取活动用户的注册表信息（当前活动用户的sessionId. 当前活动用户的 hUserToken）

    首先,对“活动用户”的定义是,当前拥有桌面的用户.对于Windows XP及其以后的系统,即使是可以多个用户同时登录了,拥有桌面的也仅仅只有一个. 如果系统级服务调用Windows API来获取注册表 ...

  8. jquery 点谁谁哭-隐式迭代

    <!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  9. js 评分

    <!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  10. 加载dll、lib库（例子的代码很全）

    是关于如何加载dll或lib库的.可以看这篇bog   Qt调用dll中的功能函数点击打开链接 **************************************************** ...