列表的显示与隐藏

 <!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. POJ 1328 Radar Installation（经典贪婪）

    Radar Installation Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 54143   Accepted: 12 ...

  2. 卷积神经网络（CNN）的理解与总结

    卷积神经网络模型的历史演化: 0. 核心思想 two main ideas: use only local features 在不同位置上使用同样的特征: 池化层的涵义在于,更高的层次能捕捉图像中更大 ...

  3. java堆 （转）

     Java栈和堆 ----这两个概念未知很长一段时间,终于找到了一个很好的文本.使用和共享 1. 堆(stack)堆(heap)他们是Java使用Ram本地存储的数据. 与C++不同,Java主动管理 ...

  4. 关于VS2015中的code snippet无法使用的问题

    什么是code snippet? Code snippets are small blocks of reusable code that can be inserted in a code file ...

  5. StackLayout

    堆栈式地放置内容可以在xaml中完成视图,也可以在cs代码中完成视图 Xamarin的所有视图和布局都是可以 1.在xaml中完成 2.在cs代码中完成视图 (类比WPF) 示例 在cs代码中完成视图 ...

  6. easyui Full Layout

    @{    Layout = null;}<!DOCTYPE html><html><head>    <meta name="viewport&q ...

  7. WPF绑定到linq表达式

    using ClassLibrary;using System;using System.Collections.Generic;using System.Collections.ObjectMode ...

  8. Expression Blend学习四控件

    原文:Expression Blend学习四控件 Expression Blend制作自定义按钮 1.从Blend工具箱中添加一个Button,按住shift,将尺寸调整为125*125; 2.右键点 ...

  9. Medical Image Report论文合辑

    Learning to Read Chest X-Rays:Recurrent Neural Cascade Model for Automated Image Annotation (CVPR 20 ...

  10. Qt 5.9对Mac的图形显示有许多改进

    We have some platform specific improvements as well as support for new platforms and compilers comin ...