jquery 焦点轮播图控制每张图片停留不同时间
轮播代码是代签博客园一位前辈写的代码,这里作了点小修改,实现了每张图片停留不同时间
*{
padding:0px;
border:0px;
margin:0px;
}
ul {
list-style:none;
}
.slideBox {
margin:50px auto;
width:300px;
height:480px;
box-shadow:2px 2px 10px #C38DD4;
border-radius:20px;
position:relative;
overflow:hidden;
}
.slideBox ul {
position:relative;
width:2000px;}
.slideBox ul li {
float:left;
width:300px;
height:480px;
position:relative;
}
.spanBox {
position:absolute;
width:300px;
height:20px;
bottom:10px;
left:80px;
}
.spanBox span {
width:18px;
height:18px;
margin-left:5px;
background-color:rgba(201,178,207,1.00);
float:left;
line-height:16px;
text-align:center;
text-shadow:2px 2px 2px #C5EBF0;
font-family:cabin-sketch;
font-size:15px;
}
.slideBox .spanBox .active {
background-color:rgba(155,83,244,0.79);
border:solid 1px #BEEBEC;
border-radius:4px;
}
.prev {
position:absolute;
left:0px;
top:320px;
float:left;
border-left:solid 1px rgba(251,245,246,1.00);
opacity:0.5;
}
.next {
width:15px;
height:50px;
position:absolute;
right:40px;
top:320px;
float:right;
border-right:solid 1px rgba(245,237,237,1.00);
opacity:0.5
}
<div class="slideBox">
<ul>
<li><img src="data:images/chrome.png" alt="" width="300" height="480"/></li>
<li><img src="data:images/firefox.png" alt="" width="300" height="480"/></li>
<li><img src="data:images/chrome.png" alt="" width="300" height="480"/></li>
<li><img src="data:images/firefox.png" alt="" width="300" height="480"/></li>
<li><img src="data:images/chrome.png" alt="" width="300" height="480"/></li>
<li><img src="data:images/firefox.png" alt="" width="300" height="480"/></li>
</ul>
<div class="spanBox">
<span class="active">q</span>
<span>a</span>
<span>z</span>
<span>w</span>
<span>s</span>
<span>x</span>
</div>
<div class="prev"><img src="data:images/limit-top.png" width="50" height="50" alt=""/></div>
<div class="next"><img src="data:images/limit-top.png" width="50" height="50" alt=""/></div>
</div>
$(document).ready(function(){
var slideBox = $(".slideBox");
var ul = slideBox.find("ul");
var oneWidth = slideBox.find("ul li").eq(0).width();
var number = slideBox.find(".spanBox span"); //注意分号 和逗号的用法
var timer = null;
var sw = 0;
//每个span绑定click事件,完成切换颜色和动画,以及读取参数值
number.on("click",function (){
$(this).addClass("active").siblings("span").removeClass("active");
sw=$(this).index();
ul.animate({
"right":oneWidth*sw, //ul标签的动画为向左移动;
});
});
//左右按钮的控制效果
/*$(".next").stop(true,true).click(function (){
sw++;
if(sw==number.length){sw=0};
number.eq(sw).trigger("click");
});
$(".prev").stop(true,true).click(function (){
sw--;
if(sw==number.length){sw=0};
number.eq(sw).trigger("click");
});*/
var a = [2,4,5,1,7,1];
var currentMii = a[sw];
var count = 0;
//定时器的使用,自动开始
timer = setInterval(function (){
if(count >= currentMii){
sw++;
if(sw==number.length){sw=0};
number.eq(sw).trigger("click");
currentMii = a[sw];
count = 0;
}
count++;
console.log(count);
},1000);
//hover事件完成悬停和,左右图标的动画效果
/*slideBox.hover(function(){
$(".next,.prev").animate({
"opacity":1,
},200);
clearInterval(timer);
},function(){
$(".next,.prev").animate({
"opacity":0.5,
},500);
timer = setInterval(function (){
sw++;
if(sw==number.length){sw=0};
number.eq(sw).trigger("click");
},2000);
})*/
})
jquery 焦点轮播图控制每张图片停留不同时间的更多相关文章
- JavaScript焦点轮播图
在慕课学习了JavaScript焦点轮播图特效,在此做一个整理. 首先是html结构,我用的是本地同文件夹下的三张图片,多出来的第一张(pic3副本)和最后一张图片(pic1副本)是为了实现无缝切换效 ...
- 用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
- 原生js焦点轮播图
原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...
- js焦点轮播图
汇集网上焦点轮播图的实现方式,自己试了下,不过鼠标悬浮停止动画和鼠标离开动画播放好像没生效,不太明白,最后两行代码中,为什么可以直接写stop和play.不用加括号调用函数么?求懂的大神指点! 所用知 ...
- 用jQuery实现轮播图效果,js中的排他思想
---恢复内容开始--- jQuery实现轮播图不用单独加载. 思路: a. 通过$("#id名");选择需要的一类标签,获得一个伪数组 b.由于是伪数组的原因,而对数组的处理最多 ...
- JS---案例---左右焦点轮播图(tb)
案例---左右焦点轮播图(tb) <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- jquery手写焦点轮播图-------解决最后一张无缝跳转第一张的问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 自实现PC端jQuery版轮播图
最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了,可是发现官网项目里之前都没有引入过sw ...
- JQuery实现轮播图及其原理
源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" name="vi ...
随机推荐
- destoon 多表联合查询时出现解析错误,parse_str函数解析错误
数据库前缀 wb_ 标签 ,调用文章时获取评论数量 <!--{php $tags=tag("table=article_24 a left join wb_comment_stat ...
- hashable与unhashable
不可哈希(unhashable):就是指其可变,如列表.字典等,都能原地进行修改. 可哈希(hashable):不可变,如字符串.元组那样,不能原地修改. 利用set()和{}建立集合时,要求集合中的 ...
- STM32F407VET6之IAR之ewarm7.80.4工程建立(基于官方固件库1.6版本) 的工程文件目录
最后整理结构如下所示,├─cmsis│ startup_stm32f401xx.s│ startup_stm32f40xx.s│ startup_stm32f40_41xxx.s│ startup_s ...
- uncaught exception 'NSInternalInconsistencyException, reason:[UITableViewController loadView] loaded the "Controller" nib but didn't get a UITableView
http://blog.csdn.net/ryantang03/article/details/7941058#reply 上面那篇文章是我查找的ios实现下拉刷新功能,在我下载完代码运行的过程中发现 ...
- python基础-爬虫
爬虫引入 爬虫: 1 百度:搜索引擎 爬虫:spider 种子网站开始爬,下载网页,分析链接,作为待抓取的网页 分词 index:词--->某个结果 Page rank(1 网站很大(互链) ...
- Linux安装Scala
下载Scala地址http://downloads.typesafe.com/scala/2.10.6/scala-2.10.6.tgz然后解压Scala到指定目录 tar -zxvf scala-2 ...
- 如何在 Rails 中搭配 Turbolinks 使用 Vue
[Rails] Vue-outlet for Turbolinks 在踩了 Rails + Turbolinks + Vue 的許多坑後,整理 的作法並和大家分享. Initialize the A ...
- [整理]tar压缩下来为什么格式是.tar.gz
前段时间打包,直接用tar命令压缩,压缩好的文件取名rar.同事用winrar打开发现一直报错. 经过查询发现,tar -cvzf压缩下来的格式其实应该是.tar.gz 但是格式怎么会这么奇怪呢?是压 ...
- 为什么要用全文搜索引擎:全文搜索引擎 VS 数据库管理系统
正文一:Full Text Search Engines vs. DBMS 发表于2009年 正文二:Elasticsearch - A High-Performance Full-Text Sea ...
- 我们为什么要研究docker
一.docker整体概述 Docker会是改变世界的那只"箱子"吗? 是什么:世界领先的软件容器平台: 开发者使用docker可以解决"在我的机器上没问题" ...