jquery特效（5）—轮播图③（鼠标悬浮停止轮播）
今天很无聊，就接着写轮播图了，需要说明一下，这次的轮播图是在上次随笔中jquery特效（3）—轮播图①（手动点击轮播）和jquery特效（4）—轮播图②（定时自动轮播）的基础上写出来的，也就是本次随笔展示的是手动点击轮播效果、定时自动轮播效果以及鼠标悬浮在图片上面停止轮播的程序，建议想连贯学习的小伙伴把我昨天写的笔记看完后再看这篇文章.
先来看最终的动态效果图：
上面的主要展示效果就是鼠标悬浮时图片停止滚动，截图软件是绿色版，所以展示的效果速度有点快，但大体的效果已经出现了.
一、主体程序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>轮播图①（手动点击轮播）</title>
<link type="text/css" rel="stylesheet" href="css/layout.css" />
</head>
<body>
<div class="slideShow">
<!--图片布局开始-->
<ul>
<li><a href="#"><img src="img/picture01.jpg" /></a></li>
<li><a href="#"><img src="img/picture02.jpg" /></a></li>
<li><a href="#"><img src="img/picture03.jpg" /></a></li>
<li><a href="#"><img src="img/picture04.jpg" /></a></li>
</ul>
<!--图片布局结束--> <!--按钮布局开始-->
<div class="showNav">
<span class="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<!--按钮布局结束-->
</div>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/layout.js"></script>
</body>
</html>
额，上面的主体程序和前两次笔记没有区别，未做任何修改,感兴趣的可以看jquery特效（3）—轮播图①（手动点击轮播）笔记说明，我本次随笔重点会在Jquery程序里面
二、CSS样式
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.slideShow{
width: 346px;
height: 210px; /*其实就是图片的高度*/
border: 1px #eeeeee solid;
margin: 100px auto;
position: relative;
overflow: hidden; /*此处需要将溢出框架的图片部分隐藏*/
}
.slideShow ul{
width: 2000px;
position: relative; /*此处需注意relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动*/
}
.slideShow ul li{
float: left; /*让四张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/
width: 346px;
}
.slideShow .showNav{ /*用绝对定位给数字按钮进行布局*/
position: absolute;
right: 10px;
bottom: 5px;
text-align:center;
font-size: 12px;
line-height: 20px;
}
.slideShow .showNav span{
cursor: pointer;
display: block;
float: left;
width: 20px;
height: 20px;
background: #ff5a28;
margin-left: 2px;
color: #fff;
}
.slideShow .showNav .active{
background: #b63e1a;
}
嘿嘿，上面的样式程序也是和前面两次的笔记没有区别，未做任何修改,感兴趣的可以看jquery特效（3）—轮播图①（手动点击轮播）笔记说明，我本次随笔重点会在Jquery程序里面
三、jQuery程序
先说一下鼠标悬浮图片轮播停止的原理：
1、当鼠标悬浮在框架上方时，清除定时器即用clearInterval(timer)关闭定时器，使自动轮播停止
2、当鼠标离开框架上方时，重新启动定时器
3、鼠标的悬浮和离开借助于hover函数
hover(over,out)一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
参数:
over (Function) : 鼠标移到元素上要触发的函数。
out (Function): 鼠标移出元素要触发的函数。
下面来看jQuery程序：
$(document).ready(function(){
var slideShow=$(".slideShow"), //获取最外层框架的名称
ul=slideShow.find("ul"),
showNumber=slideShow.find(".showNav span"),//获取按钮
oneWidth=slideShow.find("ul li").eq(0).width(); //获取每个图片的宽度
var timer=null; //定时器返回值，主要用于关闭定时器
var iNow=0; //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
/*手动点击按钮进行图片轮播代码开始*/
showNumber.on("click",function(){ //为每个按钮绑定一个点击事件
$(this).addClass("active").siblings().removeClass("active"); //按钮点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉
var index=$(this).index(); //获取哪个按钮被点击，也就是找到被点击按钮的索引值
iNow=index;
ul.animate({
"left":-oneWidth*iNow, //注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值iNow确定
})
});
/*手动点击按钮进行图片轮播代码结束*/
/*定时自动轮播图片代码开始*/
timer=setInterval(function(){ //打开定时器
iNow++; //让图片的索引值次序加1，这样就可以实现顺序轮播图片
if(iNow>showNumber.length-1){ //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
iNow=0;
}
showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click
},2000); //2000为轮播的时间
/*定时自动轮播图片代码结束*/
/*鼠标悬浮图片停止轮播代码开始*/
slideShow.hover(
function(){
clearInterval(timer);
},function(){
timer=setInterval(function(){ //打开定时器
iNow++; //让图片的索引值次序加1，这样就可以实现顺序轮播图片
if(iNow>showNumber.length-1){ //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
iNow=0;
}
showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click
},2000); //2000为轮播的时间
}
);
/*鼠标悬浮图片停止轮播代码结束*/
})
从上图可以看出开启定时器的代码是重复的，所以这里可以定义一个自动播放的函数autoPlay()来精简代码,经过精简后的代码如下：
/*定时自动轮播图片代码开始*/
function autoPlay(){
timer=setInterval(function(){ //打开定时器
iNow++; //让图片的索引值次序加1，这样就可以实现顺序轮播图片
if(iNow>showNumber.length-1){ //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
iNow=0;
}
showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click
},2000); //2000为轮播的时间
}
autoPlay();
/*定时自动轮播图片代码结束*/
定义完成后不要忘记调用这个函数，即autoPlay();
那么最终版的jQuery程序如下：
$(document).ready(function(){
var slideShow=$(".slideShow"), //获取最外层框架的名称
ul=slideShow.find("ul"),
showNumber=slideShow.find(".showNav span"),//获取按钮
oneWidth=slideShow.find("ul li").eq(0).width(); //获取每个图片的宽度
var timer=null; //定时器返回值，主要用于关闭定时器
var iNow=0; //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
/*手动点击按钮进行图片轮播代码开始*/
showNumber.on("click",function(){ //为每个按钮绑定一个点击事件
$(this).addClass("active").siblings().removeClass("active"); //按钮点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉
var index=$(this).index(); //获取哪个按钮被点击，也就是找到被点击按钮的索引值
iNow=index;
ul.animate({
"left":-oneWidth*iNow, //注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值iNow确定
})
});
/*手动点击按钮进行图片轮播代码结束*/
/*定时自动轮播图片代码开始*/
function autoPlay(){
timer=setInterval(function(){ //打开定时器
iNow++; //让图片的索引值次序加1，这样就可以实现顺序轮播图片
if(iNow>showNumber.length-1){ //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
iNow=0;
}
showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click
},2000); //2000为轮播的时间
}
autoPlay();
/*定时自动轮播图片代码结束*/
/*鼠标悬浮图片停止轮播代码开始*/
slideShow.hover(
function(){
clearInterval(timer);
},autoPlay
);
/*鼠标悬浮图片停止轮播代码结束*/
})
已经把轮播图写的差不多了，基本上满足了我明天项目上的应用,有时间再把轮播图的其他功能完善一下吧,还是周末好，可以自由自在的写代.
jquery特效（5）—轮播图③（鼠标悬浮停止轮播）的更多相关文章
- jquery特效（4）—轮播图②（定时自动轮播）
周末出去逛完街,就回公司好好地研究代码了,也算是把定时自动轮播程序写出来了,特意说明一下,这次的轮播图是在昨天随笔中jquery特效(3)—轮播图①(手动点击轮播)的基础上写出来的,也就是本次随笔展示 ...
- jQuery轮播图（一）轮播实现并封装
利用面向对象自己动手写了一个封装好的jquery轮播组件,可满足一般需求,不仅使用简单且复用性高. demo:点此预览 代码地址:https://github.com/zsqosos/componen ...
- 01.轮播图之一 ：scrollView 轮播
接触的每个项目,都会用到轮播图的部分,轮播图都写了好多次,用过各种各样的方式写: 这篇总结的博客,我将分为几个篇幅写,希望写完这几篇博客之后,我能总结出自己写这个轮播的优缺和不同之处 scrollvi ...
- 带轮播图、导航栏、商品的简单html，以及轮播图下边数字随轮播图的改变而改变
---恢复内容开始--- 在做这个的时候,最不会的是中间轮播图下边的数字是如何实现转变的,后来加入了jQuery就能实现了. css部分: <style type="text/css& ...
- JS轮播图（网易云轮播图）
JS 轮播图 写在前面 最聪明的人是最不愿浪费时间的人.--但丁 实现功能 图片自动切换 鼠标移入停止自动播放,显示按钮 点击按钮,实现前后翻 鼠标移入小圆圈,可以跳转到对应图片 点击左右两侧图片部分 ...
- 01.轮播图之三 ： collectionView 轮播
个人觉得 collection view 做轮播是最方便的,设置下flowlayout 其他不会有很大的变动,没有什么逻辑的代码 let's begin…… 创建自定义的view .h 声明文件 @i ...
- 自实现PC端jQuery版轮播图
最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了,可是发现官网项目里之前都没有引入过sw ...
- C3属性的轮播图（持续更新）
天气好冷,都不想写代码.就先写个没有焦点的轮播图,过两天在补全. 用的是CSS3的属性 过渡transition 和 转换 transfrom:translateX() 只做了轮播和 鼠标进入停止轮播 ...
- JQuery实现轮播图及其原理
源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" name="vi ...
随机推荐
- Spring MVC中@RequestParam/@RequestBody/@RequestHeader的用法收集（转）
简介: handler method参数绑定常用的注解,我们根据他们处理的Request的不同内容部分分为四类:(主要讲解常用类型) A.处理requet uri部分(这里指uri template中 ...
- Android图片缓存之初识Glide（三）
前言: 前面总结学习了图片的使用以及Lru算法,今天来学习一下比较优秀的图片缓存开源框架.技术本身就要不断的更迭,从最初的自己使用SoftReference实现自己的图片缓存,到后来做电商项目自己的实 ...
- android studio C/C++ jni 编写以及调试方法
原文路径: http://blog.sina.com.cn/s/blog_ad64b8200102vnxl.html 目录 开发环境 2 编写hello_jni程序 2 运行结果 10 调试程序 10 ...
- Go -- LFU类(缓存淘汰算法)(转)
1. LFU类 1.1. LFU 1.1.1. 原理 LFU(Least Frequently Used)算法根据数据的历史访问频率来淘汰数据,其核心思想是“如果数据过去被访问多次,那么将来被访问的频 ...
- android的窗口机制分析------UI管理系统
Activity可以看做是整个Android系统的人机接口,它提供了一个窗口来绘制UI,每个Activity在启动时,我们都需要给它设置一个Content view,作为Activity所呈现的UI内 ...
- 转:如何mac下使用wireshark
Mac OS Mountain Lion默认是没有安装X11的,而wireshark运行需要x11,因此如果直接安装wireshark而没有安装x11,wireshark不会正常运行. 去苹果主页下载 ...
- python pyqtgraph 保存图片到本地
pyqtgraph官方给的示例居然会报错2333 官方文档传送门:#####pyqtgraph export pyqtgraph支持在可视化窗口中右键保存(Exporting from the GUI ...
- Git安装及SSH Key管理之Mac篇
1.下载git客户端,下载地址为:https://git-scm.com/download/mac 2.打开安装包,可以看到此时的界面为: 我们需要把.pkg的安装包安装到系统当中.我双击了安装包 ...
- Sublime Text 2搭建Go开发环境
Sublime Text 2搭建Go开发环境,代码提示+补全+调试 cceevv · 2014-10-11 00:00:06 · 10496 次点击 · 预计阅读时间 3 分钟 · 5分钟之前 开始浏 ...
- 文本聚类——Kmeans
上两篇文章分别用朴素贝叶斯算法和KNN算法对newgroup文本进行了分类測试.本文使用Kmeans算法对文本进行聚类. 1.文本预处理 文本预处理在前面两本文章中已经介绍,此处(略). 2.文本向量 ...