jquery图片轮播，单张图片轮播时间不同
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.active
{
color: Red;
}
</style>
<script src="JS/jquery-1.10.2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="divOne">
<ul id="banner">
<li>
<img src='http://future.iptid.com/Files/News/52714d00-5a01-4c5a-9a47-41d2ec9d4ca2.jpg' /></li>
<li style="display: none">
<img src='http://future.iptid.com/Files/News/a2f39039-d17f-4085-8d99-8c214a474f34.jpg' /></li>
<li style="display: none">
<img src='http://future.iptid.com/Files/News/1fd79e78-616f-4fbf-b35f-94703a1017ee.jpg' /></li>
<li style="display: none">
<img src='http://future.iptid.com/Files/News/9317e802-7cdb-4acb-823a-49bd9d8e5923.jpg' /></li>
</ul>
<div id="dot">
<ul>
<li class="active">1 </li>
<li>2 </li>
<li>3 </li>
<li>4 </li>
</ul>
</div>
</div>
<div id="txtTimer">
</div>
<script type="text/javascript">
var arr = new Array("6000", "8000", "9000", "9000");
var bannerlength = 0;
var i = 0;
var _timer = 0;
var _stepping = 1000;
var bannerTimer = null;
function turnChange() {
if (_timer < arr[i]) {
_timer += _stepping;
}
else {
_timer = 0;
++i;
if (i > bannerlength) {
i = 0;
}
$("#banner li").eq(i).show().siblings().hide();
$("#dot li").eq(i).addClass("active").siblings().removeClass("active");
}
$("#txtTimer").text(_timer);
}; $(function () {
bannerlength = $("#banner li").length;
bannerTimer=setInterval(turnChange, _stepping);
});
$(function () {
$("#dot li").click(function () {
clearInterval(bannerTimer);
i = $(this).index();
_timer = 0;
$("#banner li").eq(i).show().siblings().hide();
$("#dot li").eq(i).addClass("active").siblings().removeClass("active");
bannerTimer=setInterval(turnChange, _stepping);
});
}); // setTimeout("show()", arr[i]); // function show() {
// ++i;
// $("#banner li").eq(i).show().siblings().hide();
// $("#dot li").eq(i).addClass("active").siblings().removeClass("active");
// setTimeout("show()", arr[i]);
// }
// $(function () {
// $("#dot li").click(function () { // i = $(this).index() - 1;
// setTimeout("show()", arr[i]);
// });
// });
</script>
</body>
</html>
jquery图片轮播，单张图片轮播时间不同的更多相关文章
- 分享jquery实现百叶窗特效的图片轮播
首先非常感谢网友嘉翼的无私分享,这是他刚在网站扣下来的特效,第一时间与大家分享,jquery实现百叶窗特效的图片轮播 使用方法: 1.引用css文件,css文件里面已经做了注释,基本只需要修改宽高就好 ...
- 超级详细 一听就会：利用JavaScript jQuery实现图片无限循环轮播(不借助于轮播插件)
前言 作为一个前端工程师,无论公司是什么行业,无论你做什么端,基本都会遇到一个避不开的动画效果:循环轮播.做轮播并不难,市场上的轮播插件有很多,其中比较著名的是swiper,使用也非常简单.但轮播插件 ...
- 利用JavaScript jQuery实现图片无限循环轮播(不借助于轮播插件)-----转载
前言 作为一个前端工程师,无论公司是什么行业,无论你做什么端,基本都会遇到一个避不开的动画效果:循环轮播.做轮播并不难,市场上的轮播插件有很多,其中比较著名的是swiper,使用也非常简单.但轮播插件 ...
- jQuery仿京东首页广告图片切换图片轮播
1.效果图如下: 2.源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- iview Carousel 轮播图自适应宽高；iview 轮播图 图片重叠问题；iview tabs 高度互相影响问题；vue this问题；
最终效果图: 一.轮播图中图片自适应宽高: <Carousel loop v-bind:height="imgHeight+'px'" v-model="caro ...
- JS图片自动和可控的轮播切换特效
点击这里查看效果:http://hovertree.com/texiao/js/1.htm HTML文件代码如下: <!DOCTYPE html> <html xmlns=" ...
- WPF技术触屏上的应用系列（四）: 3D效果图片播放器（图片立体轮放、图片立体轮播、图片倒影立体滚动）效果实现
原文:WPF技术触屏上的应用系列(四): 3D效果图片播放器(图片立体轮放.图片立体轮播.图片倒影立体滚动)效果实现 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7 ...
- Js实现图片点击切换与轮播
Js实现图片点击切换与轮播 图片点击切换 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
- js/html/css做一个简单的图片自动（auto）轮播效果//带注释
FF(firefox)/chrom/ie稳定暂无bug...注意:请自己建立一个images文件,放入几张900*238的图片(注意图片格式和名字与程序中一致). 1. [图片] 1.JPG 2. [ ...
- 用jQuery基于原生js封装的轮播
我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...
随机推荐
- C++学习14 继承的概念及语法
继承是类与类之间的关系,是一个很简单很直观的概念,与现实世界中的继承(例如儿子继承父亲财产)类似. 继承(Inheritance)可以理解为一个类从另一个类获取成员变量和成员函数的过程.例如类B继承于 ...
- SQL日期格式
) :: ),'-',''),' ',''),':','') ) , ) ) , ) ) , ) ) , ) 其它不常用的日期格式转换方法: ) , ) ) , ) ) , ) ) , ) ) , ) ...
- 理论沉淀：隐马尔可夫模型（Hidden Markov Model, HMM）
理论沉淀:隐马尔可夫模型(Hidden Markov Model, HMM) 参考链接:http://www.zhihu.com/question/20962240 参考链接:http://blog. ...
- UTF-8 GB2321
已知:汉字“你”UTF8编码是 0xe4bda0,GBK编码是 0xc4e3,求证. 0xe4bda0 → 2进制11100100 10111101 10100000 → UTF8 3字节111001 ...
- 京东校招笔试（C++方向）编程题
这次笔试是今年校招我参加的第一次笔试..出了很多状况,基础知识不扎实,导致选择题耽误了太多时间,导致后面的题目没做完,编程题也没有在 时间内写出来,基本没有面试机会了.不过我继续研究第二个编程题,在1 ...
- (整理)RPC
今天研究了一下Webservice,然后就查到RPC,看到CSDN上有两篇很好的文章,就学习一下,并记录在此以便后续研究 http://blog.csdn.net/mindfloating/artic ...
- EntityFramework 4使用存储过程分页
CREATE PROC usp_OrgPage_SQL @pageIndex INT, @pageSize INT, @totalCount INT OUTPUT AS BEGIN SET @tota ...
- QT5.3.2在ARM上的移植
ubuntu10.04 准备移植phonon,4.5移植失败.播放声音就出错...没办法.转移到QtMutimedia 安装交叉编译工具这里就不提了... 1.下载QT5.3.2:http://dow ...
- Spark History Server配置使用
Spark history Server产生背景 以standalone运行模式为例,在运行Spark Application的时候,Spark会提供一个WEBUI列出应用程序的运行时信息:但该WEB ...
- docker学习笔记1 -- 安装和配置
技术资料 docker中文官网:http://www.docker.org.cn/ 中文入门课程:http://www.docker.org.cn/book/docker.html docker学习笔 ...