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

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. C# 程序的关闭 讲究解释

    程序的关闭是很讲究的,处理的不好的话,将软件连续开启和关闭,当数次后在启动软件后程序会崩溃.或者程序退出很慢.细节决定成败,一款好的软件应该从各方面都要做严格地反复地推敲,力争做到无可挑剔.    有 ...

  2. Android云端APP

    使用HbuilderX打包APP 首先创建一个 5+APP+使用MUI项目 <!DOCTYPE html> <html> <head> <meta chars ...

  3. 一百一十三：CMS系统之前台注册界面

    html {% from 'common/_macros.html' import static %}<!DOCTYPE html><html lang="en" ...

  4. 用Python解方程

    一元一次方程 例题1: 这是北师大版小学六年级上册课本95页的一道解方程练习题: 大家可以先口算一下,这道题里面的x的值为200 接下来我们用python来实现,代码如下,每一句代码后面都写有解释语: ...

  5. spring boot系列（六）spring boot 配置mybatis(xml简化版)

    orm框架的本质是简化编程中操作数据库的编码,发展到现在基本上就剩两家了,一个是宣称可以不用写一句SQL的hibernate,一个是可以灵活调试动态sql的mybatis,两者各有特点,在企业级系统开 ...

  6. Xib设置label自动换行和Label的顶部对齐

    真的是不想说自己了,一个Xib纠结了一天,简直了,整整被虐了一上午啊...... 不知道这是Xcode8的问题呢....还是我的Xib约束什么的问题..... 只想说的是,以前也是这么设置的,明明可以 ...

  7. 安装glance

    在控制节点上执行 controllerHost='controller' MYSQL_PASSWD='m4r!adbOP' GLANCE_PASSWD='glance1234!' 1.创建数据库 my ...

  8. B. Grow The Tree Codeforces Round #594 (Div. 2)

    Gardener Alexey teaches competitive programming to high school students. To congratulate Alexey on t ...

  9. C++中用ODBC和ADO方式连接SQL数据库

    https://wenku.baidu.com/view/f01e4e762f3f5727a5e9856a561252d380eb2033.html

  10. tr、od命令

    一.tr:替换或删除字符 语法:       tr [OPTION] ... SET1 [SET2] 描述       翻译,压缩和/或删除标准输入中的字符,可写吗?       到标准输出. -c, ...