用jquery写出图片自动轮播效果
相关代码如下，只要把代码粘贴进编辑器，修改图片路径，即可看到效果。
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写出图片自动轮播效果的更多相关文章
- 用最简单的代码写出banner图轮播效果
以下视频是由[赵一鸣随笔]博客提供的“用最简单的代码写出banner图轮播效果”. 查看全屏高清视频,请点击链接:http://www.zymseo.com/58.html
- 2017年10月21日 CSS常用样式&鼠标样式 以及 jQuery鼠标事件& jQuery图片轮播& jQuery图片自动轮播代码
css代码 背景与前景 background-color:#0000; //背景色,样式表优先级高 background-image:url(路径); //设置背景图片 background-atta ...
- 前端面试题常考&必考之--用jquery写出当前元素的同辈元素的第二个结点的value值
问题:用jquery写出当前元素的同辈元素的第二个结点的value值??? 分析:该题目有一个坑,那就是,如果当前元素没有第二个兄弟结点呢(坑坑坑) 解析: 一般我们可能会这样写: $(this).s ...
- AJ学IOS（11）UI之图片自动轮播
AJ分享,必须精品 先看效果 代码 #import "NYViewController.h" #define kImageCount 5 @interface NYViewCont ...
- 使用 jQuery 中的淡入淡出动画，实现图片的轮播效果，每隔 2 秒钟切换一张图片，共 6 张图片
查看本章节 查看作业目录 需求说明: 使用 jQuery 中的淡入淡出动画,实现图片的轮播效果,每隔 2 秒钟切换一张图片,共 6 张图片,切换到第 6 张后从头开始切换,在图片的下方显示 6 个小圆 ...
- 天猫京东app中常见的上下滚动轮播效果如何实现？
前段时间,公司安排我制作一个上下滚动轮播效果,类似于我们在天猫京东app中常见的这样: 哇kao!这个我完全不会呀??? 幸好,前几天一个朋友在朋友圈分享了一篇推文.瞬间引领我走出了迷茫,这个教程特别 ...
- jQuery点击图片放大拖动查看效果
效果如图: 放大前: 放大后(可拖动图片浏览): 源码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head& ...
- 仿网易新闻 ViewPager 实现图片自动轮播
新闻 App 首页最上方一般会循环播放热点图片,如下图所示. 本文主要介绍了利用 ViewPager 实现轮播图片,图片下方加上小圆点指示器标记当前位置,并利用 Timer+Handler 实现了自动 ...
- ios - 图片自动轮播定时器(NSTimer)以及消息循环模式简介
本文只是演示如何设置图片轮播的定时器. 创建全局变量NSTimer 程序启动后就开始轮播图片,所以在- (void)viewDidLoad中就启动定时器. 将定时器放入消息循环池中.- (void)v ...
随机推荐
- JAVA 基础编程练习题11 【程序 11 求不重复数字】
11 [程序 11 求不重复数字] 题目:有 1.2.3.4 个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? 程序分析:可填在百位.十位.个位的数字都是 1.2.3.4.组成所有的排列后 ...
- 论文阅读 | A Survey on Multi-Task Learning
摘要 多任务学习(Multi-Task Learning, MTL)是机器学习中的一种学习范式,其目的是利用包含在多个相关任务中的有用信息来帮助提高所有任务的泛化性能. 首先,我们将不同的MTL算法分 ...
- SolidWorks学习笔记8 包覆，圆顶
包覆 在该平面上创建草图,点击A,创建文字 在左侧取消勾选“使用文档字体”,点击字体,重新设置高度,字体. 在草图上点击来放置. 点击特征->包覆, 在模型树中选择有文字的草图 这里面 选择圆柱 ...
- ZOJ Problem Set - 1003
1.翻译参考 http://www.cnblogs.com/woodfish1988/archive/2006/11/10/556926.html 2.代码参考 http://www.cnblogs. ...
- FTL方面综述
FTL 1.百度百科 http://baike.baidu.com/link?url=HJ94Rz2Td83V8OW-6dD_h_P8CZb9VFR6HznPDopY_SFdfXDaMriYcBm1X ...
- pramfs安装
1. 拷贝 linux-3.11 pramfs-1.5.0-3.11 pramfs-Tools 到电脑中(我是新建目录linux中) 2.解压 3.cd pramfs-1.5.0-3.11/ 4.将p ...
- Confluence与Jira安装及后期迁移问题记录
Confluence与Jira 由于线上jira和confluence之前互相关联,confluence的登录用户全部关联自jira的用户,confluence安装时会提示是否关联jira,由于这个问 ...
- docker容器创建MariaDB镜像
基于commit命令方式创建 docker的安装 [root@test01 ~]# yum install docker [root@test01 ~]# systemctl enable docke ...
- ES简介及特点
1.ES是什么? ES是一个高度可伸缩的开源的全文检索和分析引擎,它允许你以近实时的方式快速存储.搜索.分析大量数据,ES是基于Lucence开发,隐藏其复杂性,提供了简单易用的restful api ...
- PAT B1036 跟奥巴马一起编程 (15)
AC代码 #include <cstdio> using namespace std; int main(){ int n = 0, m = 0; char a; scanf(" ...