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

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. python 通过 实例方法 名字的字符串调用方法

    方式1 - 反射 hasattr 方法 判断当前实例中是否有着字符串能映射到的属性或者方法, 一般会在  getattr 之前作为判断防止报错 getattr 方法 获取到当前实例中传入字符串映射到的 ...

  2. query和exec区别

    1.PDO::query PDO::query执行一条SQL语句,如果通过,则返回一个PDOStatement对象.PDO::query函数有个“非常好处”,就是可以直接遍历这个返回的记录集. 示例如 ...

  3. c++ STL之map

    map内部自建一颗红黑树(一 种非严格意义上的平衡二叉树),这颗树具有对数据自动排序的功能,所以在map内部所有的数据都是有序的,map中的元素是自动按Key升序排序,所以不能对map用sort函数: ...

  4. 分布式存储ceph--osd故障硬盘更换（6）

    正常状态:

  5. MATLAB学习（二）读写xls文件

    >> N=xlsread('DRINK.xls','DRINK','A1:D8') N = 207.2000 3.3000 15.5000 2.8000 36.8000 5.9000 12 ...

  6. Elasticsearch常见错误与配置简介

    一.常见错误 1.1 root用户启动elasticsearch报错 Elasticsearch为了安全考虑,不让使用root启动,解决方法新建一个用户,用此用户进行相关的操作.如果你用root启动, ...

  7. java数据结构之WeakHashMap

    一.JAVA中的四种引用类型 1.强引用(StrongReference):强引用是最为普遍的一种引用,如果对象被强引用,那么垃圾回收器无论如何都不会回收它,当内存不足时会抛出OutOfMemoryE ...

  8. 算法题--Z字形变换

    题目描述 将一个给定字符串根据给定的行数,以从上往下.从左到右进行 Z 字形排列. 比如输入字符串为 "LEETCODEISHIRING" 行数为 3 时,排列如下: L C I ...

  9. 关于kail的远程连接

    昨天开始学关于网络攻防的一下知识,虚拟机的镜像用的是kail,对自己造成了很多不适应的地方,有点自闭了. 最近会和大家分享一些关于kail的问题或者说网络攻防方面.这次就说一下kail的远程服务. k ...

  10. Java学习笔记-反射机制

    Java反射机制实在运行状态时,对于任意一个类,都能够知道这个类的属性和方法,对于任意一个对象,都能够调用他的任意一个属性和方法 获取Class对象的三种方式 Object类中的getClass()方 ...