相关代码如下，只要把代码粘贴进编辑器，修改图片路径，即可看到效果。

1、html部分

<body>
  <ul class="banner">
  <li><img src="images/01.jpg"/></li>
  <li><img src="images/02.jpg"/></li>
  <li><img src="images/03.jpg"/></li>
  <li><img src="images/04.jpg"/></li>
  <li><img src="images/05.jpg"/></li>
  </ul>
  <ul class="product">
  <li class="on">
  <span>网站建设</span>
  <ul>
  <li>网站建设</li>
  <li>网站建设</li>
  <li>网站建设</li>
  </ul>
  </li>
  <li class="on">
  <span>网络营销</span>
  <ul>
  <li>网络营销</li>
  <li>网络营销</li>
  <li>网络营销</li>
  </ul>
  </li>
  <li class="on">
  <span>UI设计</span>
  <ul>
  <li>UI设计</li>
  <li>UI设计</li>
  <li>UI设计</li>
  </ul>
  </li>
  </ul>
  </body>

2、css部分

<style type="text/css">
  *{margin:0px;padding:0px}
  .banner{width:180px;height:180px;overflow:hidden;margin:100px auto}
  .banner li{list-style:none;width:180px;height:180px;}
  .product{width:100px;background:blue;margin:100px auto}
  .product li{list-style:none;text-align:center}
  span{background:url(images/open.gif) no-repeat 5px;display:block}
  .on ul{display:none}
  .on span{background:url(images/close.gif) no-repeat 5px;display:block}
  </style>

3、js部分

<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
  <script type="text/javascript">
  $(function(){
  setInterval(function(){
  if($(".banner li:last").is(":hidden")){
  $(".banner li:visible").addClass("on");
  $(".banner li[class=on]").next().fadeIn("slow");
  $(".banner li[class=on]").removeClass("on").hide();
  }else{
  $(".banner li:last").hide();
  $(".banner li:first").fadeIn("slow");
  }
  },2000)
  })
   
   
  $(".product li:has('ul')").click(function(){
  if($(this).hasClass('on')){
  $(this).removeClass('on').siblings().addClass('on');
  }else{
  $(this).addClass('on');
  }
  })
  }) 

有问题可以找我一起交流哦！QQ：1047832475

用jquery写出图片自动轮播效果的更多相关文章

  1. 用最简单的代码写出banner图轮播效果

    以下视频是由[赵一鸣随笔]博客提供的“用最简单的代码写出banner图轮播效果”. 查看全屏高清视频,请点击链接:http://www.zymseo.com/58.html

  2. 2017年10月21日 CSS常用样式&鼠标样式 以及 jQuery鼠标事件& jQuery图片轮播& jQuery图片自动轮播代码

    css代码 背景与前景 background-color:#0000; //背景色,样式表优先级高 background-image:url(路径); //设置背景图片 background-atta ...

  3. 前端面试题常考&必考之--用jquery写出当前元素的同辈元素的第二个结点的value值

    问题:用jquery写出当前元素的同辈元素的第二个结点的value值??? 分析:该题目有一个坑,那就是,如果当前元素没有第二个兄弟结点呢(坑坑坑) 解析: 一般我们可能会这样写: $(this).s ...

  4. AJ学IOS（11）UI之图片自动轮播

    AJ分享,必须精品 先看效果 代码 #import "NYViewController.h" #define kImageCount 5 @interface NYViewCont ...

  5. 使用 jQuery 中的淡入淡出动画，实现图片的轮播效果，每隔 2 秒钟切换一张图片，共 6 张图片

    查看本章节 查看作业目录 需求说明: 使用 jQuery 中的淡入淡出动画,实现图片的轮播效果,每隔 2 秒钟切换一张图片,共 6 张图片,切换到第 6 张后从头开始切换,在图片的下方显示 6 个小圆 ...

  6. 天猫京东app中常见的上下滚动轮播效果如何实现？

    前段时间,公司安排我制作一个上下滚动轮播效果,类似于我们在天猫京东app中常见的这样: 哇kao!这个我完全不会呀??? 幸好,前几天一个朋友在朋友圈分享了一篇推文.瞬间引领我走出了迷茫,这个教程特别 ...

  7. jQuery点击图片放大拖动查看效果

    效果如图: 放大前: 放大后(可拖动图片浏览): 源码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head& ...

  8. 仿网易新闻 ViewPager 实现图片自动轮播

    新闻 App 首页最上方一般会循环播放热点图片,如下图所示. 本文主要介绍了利用 ViewPager 实现轮播图片,图片下方加上小圆点指示器标记当前位置,并利用 Timer+Handler 实现了自动 ...

  9. ios - 图片自动轮播定时器(NSTimer)以及消息循环模式简介

    本文只是演示如何设置图片轮播的定时器. 创建全局变量NSTimer 程序启动后就开始轮播图片,所以在- (void)viewDidLoad中就启动定时器. 将定时器放入消息循环池中.- (void)v ...

随机推荐

  1. Swift开源parser

    https://www.prowidesoftware.com/products/core https://github.com/prowide/prowide-core-examples/blob/ ...

  2. Java中非静态成员变量、静态成员变量的初始化时机

    转: Java中非静态成员变量.静态成员变量的初始化时机. 2018年05月22日 11:48:11 SilenceCarrot 阅读数 421   版权声明:技术就要分享才有意思,欢迎大家分享(注明 ...

  3. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_2-6.Mysql逆向工程效率神器之使用IDE自动生成Java实体类

    笔记 6.Mysql逆向工程效率神器之使用IDE自动生成Java实体类     简介:实战使用IDE根据Mysql自动生成java pojo实体类                  1.IDEA连接数 ...

  4. nova创建虚拟机的详细过程

    Nova 创建虚拟机详细过程    

  5. IDEA 底部工具栏没有 Version Control 解决办法

    百度了半天 都说VCS配置不对 但是默认IDEA是配置好的 根本不需要修改 忽然看到 工具栏的快捷键 于是 Alt + 9 就出现了 完美

  6. Cetos 7 命令行登陆与图形界面登陆相互切换

    环境:vmware 虚拟机: 系统:Cetos 7 64位: 引言:有一台虚拟机,安装的时候选择的是最小化安装,是没有图形界面的,后来有需求,需要有个图形界面,所以就准备把这个升级下,下面是操作步骤: ...

  7. .Netcore 2.0 Ocelot Api网关教程（3）- 路由聚合

    在实际的应用当中,经常会遇到同一个操作要请求多个api来执行.这里先假设一个应用场景:通过姓名获取一个人的个人信息(性别.年龄),而获取每种个人信息都要调用不同的api,难道要依次调用吗?在Ocelo ...

  8. 自动化运维：（2）Shell 编程的流程控制

    一. if语句 1.单分支if语句——单一条件,只有一个输出 #!/bin/bash # 单if语句的使用场景 if [ "$1" == "nan" ] the ...

  9. Mybatis batch 批量处理

    @Testpublic void batch() throws IOException { InputStream inputStream= Resources.getResourceAsStream ...

  10. 5分钟了解OWL本体建模语言

    一.概念: 定义:一种定义和实例化web本体的语言   本体:与xml schema不同,是知识表示,而不是一种消息格式   优点:可以推理   开放世界的假设:本体信息只增加,可以存在矛盾冲突的事实 ...