列表的显示与隐藏

 <!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. 【oracle11g，13】表空间管理2：undo表空间管理(调优) ，闪回原理

    一.undo空间原理: dml操作会产生undo数据. update时,sever process 会在databuffer 中找到该记录的buffer块,没有就从datafile中找并读入data ...

  2. Linux性能测试 top命令

    原文地址:http://www.cnblogs.com/txw1958/archive/2012/07/25/linux-top-command.html top命令是Linux下常用的性能分析工具, ...

  3. 零元学Expression Design 4 - Chapter 3 看小光被包围了!!如何活用「Text On Path」设计效果

    原文:零元学Expression Design 4 - Chapter 3 看小光被包围了!!如何活用「Text On Path」设计效果 本章将教大家如何活用「Text On Path」,做出文绕图 ...

  4. nyoj116士兵杀死（两）段树单点更新

    士兵杀敌(二) 时间限制:1000 ms  |  内存限制:65535 KB 难度:5 描写叙述 南将军手下有N个士兵,分别编号1到N,这些士兵的杀敌数都是已知的. 小工是南将军手下的军师,南将军常常 ...

  5. OnNavigatedTo 和 Loaded 的比较

    直接上结果: OnNavigateTo :是在导航完成,在控件或者页面加载前(之间)调用. Loaded :是在页面准备好并且在控件加载完成后调用. 参考资料: 1.https://stackover ...

  6. linux下一个rsync工具和配置

    本文介绍了整个基本:http://www.2cto.com/os/201308/238733.html 一些简单的备忘录: 1. ubuntu下通过apt-get就可以安装: 2. 配置文件/etc/ ...

  7. .net core响应缓存

    按照官网资料操作无效,这里使用https://github.com/speige/AspNetCore.ResponseCaching.Extensions的扩展包 安装AspNetCore.Resp ...

  8. WPF特效-鱼游动动画3

    原文:WPF特效-鱼游动动画3 WPF不支持骨骼,故使用3DMax导出了序列模型文件(.mtl;.obj). 方法1: 使用Blend 2013打开所有obj文件,拖动排列一下即可在usercontr ...

  9. Window上安装kafka

    kafka在windows上的安装.运行 - 进阶者ryan-su - CSDN博客 https://blog.csdn.net/u010283894/article/details/77106159 ...

  10. delphi读取ini文件

    ini文件在系统配置及应用程序参数保存与设置方面,具有很重要的作用,所以可视化的编程一族,如vb.vc.vfp.delphi等都提供了读写ini文件的方法,其中delphi中操作ini文件,最为简洁, ...