用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 ...
随机推荐
- jmeter 执行python脚本的方法 。(亲测ok)
jmeter 执行python脚本 jmeter 可以通过Jython 执:行python代码 1.下载Jython jar包:http://www.jython.org/downloads.ht ...
- Performance Analysis of Logs (PAL) Tool
Performance Analysis of Logs (PAL) Tool 背景 在众多的独立项目中,我们如何快速了解数据库(SQL Server)服务器的性能,以及数据库的基线情况是怎样的,或者 ...
- Ubuntu开放指定端口
一般情况下,ubuntu安装好的时候,iptables会被安装上,如果没有的话那就安装上吧 安装 在终端输入 sudo apt-get install iptables 添加规则 在终端输入 ipta ...
- SafeVarargs的用法
转载自:http://softlab.sdut.edu.cn/blog/subaochen/2017/04/safevarargs%E7%9A%84%E7%94%A8%E6%B3%95/ @SafeV ...
- springboot-springmvc
0依赖 <!-- jsp --> <dependency> <groupId>org.apache.tomcat.embed</groupId> < ...
- RocketMQ之十:RocketMQ消息接收源码
1. 简介 1.1.接收消息 RebalanceService:均衡消息队列服务,负责通过MQClientInstance分配当前 Consumer 可消费的消息队列( MessageQueue ). ...
- Chrome浏览器界面截图
常常出现这么一个场景: 网页比较长,需要滚动屏幕才能看完整.这时候如需截屏,则比较麻烦. 如下为解决方法: 推荐Chrome浏览器: 按F12打开调试页面,同时按下ctrl + shift + p, ...
- C#中?的相关使用
C#中?的相关使用 今天看了几篇博客,学习了一下与?相关的使用,大致分为一下几种: 1. 可空类型 看标题就能够很好的理解这个概念:可以为空的类型.而在C#中可以为空也就是null的类型,都是引用类型 ...
- 前端面试经典题之apply与call的比较
在讲apply和call之前,我们需要先清楚在js中,this指向的是什么. 大家可以参考一下阮一峰老师写的关于JavaScript中this的原理讲解文章:http://www.ruanyifeng ...
- GAN(生成对抗网络)之keras实践
GAN由论文<Ian Goodfellow et al., “Generative Adversarial Networks,” arXiv (2014)>提出. GAN与VAEs的区别 ...