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

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. application节点

    <application>节点是AndroidManifest.xml文件中必须持有的一个节点,它包含在<manifest>节点下.通过<application>节 ...

  2. Android之SharedPreference存储数据

    *路径: /data/data/包名/shared_prefs/ * 以Xml文件存储数据 * 编写步骤 // 1. 获取sp SharedPreferences sp = this.getShare ...

  3. java代码实现简体繁体转换

    汉字分为简体和繁体字,这是众所周知的,虽然繁体字中国大陆这边用的并不会太多,但时不时的还是会使用到.那么,如何做到简体字和繁体字的转换呢?其实很简单,这里附上一个java版本的简繁体转换,用网上找的接 ...

  4. matlab中如何给一个矩阵中的某几个特定位置赋值

    用sub2ind >> a=zeros(5); i = [2;3;4]; j = [1;4;2]; >> a(sub2ind(size(a), i, j))=1 a = 0 0 ...

  5. 【数学建模】线性规划各种问题的Python调包方法

    关键词:Python.调包.线性规划.指派问题.运输问题.pulp.混合整数线性规划(MILP) 注:此文章是线性规划的调包实现,具体步骤原理请搜索具体解法.   本文章的各个问题可能会采用多种调用方 ...

  6. jenkins配置jdk、git、maven

    进入首页->系统管理->全局工具配置 配置jdk 查找jdk安装路径 如果是容器版jenkins,就登进容器里面查看jdk路径 [root@test2 ~]# echo $JAVA_HOM ...

  7. flask(3.0)

    目录 一.Flask - CBV 二.Flask - Session 1.安装flask-session 2.回顾flask自带的session的使用方法 3.flask-session的使用(以保存 ...

  8. 【笔记】Docker部署Odoo

    一,制作一个自己的odoo镜像odoo:yto 1,下载一个odoo10的镜像 docker pull odoo:10.0 2,按照自己的意愿修改里面的内容 docker run -it -u roo ...

  9. Jmeter接口测试 2=> Jmeter工具的介绍

    第一节 接口测试流程 参数化:EXCEl文件参数化.数据库参数化.直接代码中配置.配置文件 预处理请求(前置处理):对请求的参数进行预处理.准备,如加密数据.组织测试数据 发起请求:httpclien ...

  10. 【图像算法OpenCV】几何不变矩--Hu矩

    原文地址  http://blog.csdn.NET/daijucug/article/details/7535370 [图像算法OpenCV]几何不变矩--Hu矩 一 原理 几何矩是由Hu(Visu ...