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

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. easyUI之LinkButton（按钮）

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  2. PackageUtils

    import android.content.Context; import android.content.Intent; import android.content.pm.Application ...

  3. 9Patch图

    NinePatch是一种很有用的PNG图片格式,它可以在特定区域随文字大小进行缩放. - 上边线控制水平拉伸- 左边线控制竖直拉伸- 右边线和下边线控制内容区域 如下: 背景图片的中间区域会随着文字的 ...

  4. <application>节点属性

    1.android:allowBackup 它表示是否允许应用程序参与备份.如果将该属性设置为false,则即使备份整个系统,也不会执行这个应用程序的备份操作,而整个系统备份能导致所有应用程序数据通过 ...

  5. centos6里面装zabbix（五）

    今天说使用ICMP ping监控server与agent端的网络状态 今天要使用的是fping,这个软件包需要去官网下载,官网地址:http://www.fping.org/.现在的最新版是4.0 第 ...

  6. 实现超简单的http服务器

    想在Linux下实现一个简单的web Server并不难.一个最简单的HTTP Server不过是一个高级的文件服务器,不断地接收客户端(浏览器)发送的HTTP请求,解析请求,处理请求,然后像客户端回 ...

  7. Redis高级特性及应用场景

    Redis高级特性及应用场景 redis中键的生存时间(expire) redis中可以使用expire命令设置一个键的生存时间,到时间后redis会自动删除它. 过期时间可以设置为秒或者毫秒精度. ...

  8. Redis在Linux上面安装

    1 下载Redis:https://redis.io/download 下载完成之后:redis-4.0.11.tar.gz 2 将下载的压缩包传到linux对应文件夹下面(笔者上传到/opt/下面) ...

  9. 购物车实现 <Block实现回调>

    效果图如下: 具体代码实现如下: Model: #import <Foundation/Foundation.h> @interface ShopCarModel : NSObject @ ...

  10. vs把asp.net旧的项目名称全部修改

    1 先打开项目,把名称全部替换掉,然后把解决方案,程序集名称全部替换掉. 2 重新生成,清理,关闭项目. 3 把.sln文件用文本编辑器打开,替换里面的名称,然后把文件夹名称都修改好.d 4.打开项目 ...