列表的显示与隐藏

 <!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++

    状态模式(State Pattern)是设计模式的一种,属于行为模式. 定义(源于Design Pattern):当一个对象的内在状态改变时同意改变其行为,这个对象看起来像是改变了其类. 状态模式主要 ...

  2. Opencv中K均值算法（K-Means）及其在图像分割中的应用

    K均值(K-Means)算法是一种无监督的聚类学习算法,他尝试找到样本数据的自然类别,分类是K由用户自己定义,K均值在不需要任何其他先验知识的情况下,依据算法的迭代规则,把样本划分为K类.K均值是最常 ...

  3. Ubuntu logomaker sh: 1: pngtopnm: not found 解决方案

    暂时未找到logomaker的方法,来解决 命令替换,在文件夹: pngtopnm open_show.png > temp.ppm ppmquant 224 temp.ppm >temp ...

  4. matlab 稀疏矩阵（sparse matrix）

    参数的设置:spparms() spparms('spumoni', 3);:Set sparse monitor flag to obtain diagnostic output 1. 创建稀疏矩阵 ...

  5. Ubuntu 官方推荐源列表

    如何使用Ubuntu Night Ubuntu Night(  http://ubuntu9.com ) 的Top mirror功能根据当前的网络情况和源健康状况不断地进行更新当前可用的源的信息,包括 ...

  6. DataSet 互相转换 List

    /// <summary> /// List <-> DataSet /// </summary> public class IListDataSet { /// ...

  7. 【C#】VS2012+InstallShield2013制作软件更新包

    原文:[C#]VS2012+InstallShield2013制作软件更新包 上篇文章介绍了如何使用installshield制作软件的安装包,见地址:http://blog.csdn.net/cat ...

  8. cordova-plugin-local-notifications发送Android本地消息

    原文:cordova-plugin-local-notifications发送Android本地消息 1.GitHub源代码地址: https://github.com/katzer/cordova- ...

  9. SynchronizationContext笔记

    SynchronizationContext 类是一个基类,可提供不带同步的自由线程上下文. 此类实现的同步模型的目的是使公共语言运行库内部的异步/同步操作能够针对不同的异步模型采取正确的行为.此模型 ...

  10. Windows Phone Launcher class

    Starts the default app associated with the specified file or URI. Launch a file contained in the app ...