本文实例讲述了jquery实现鼠标悬浮停止轮播特效代码。分享给大家供大家参考,具体如下:
运行效果截图如下:
具体代码如下:
一、主体程序
<!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="/UploadFiles/2021-04-02/picture01.jpg">二、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程序
先说一下鼠标悬浮图片轮播停止的原理:
- 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手动点击实现图片轮播特效
文章二:jquery实现定时自动轮播特效
精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播
希望本文所述对大家学习jQuery程序设计有所帮助。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月25日
2024年09月25日
- 纯音入心系列纯音乐《天籁古筝》1CD[MP3][331MB]
- 男女对唱典藏天碟《发烧对唱·那个季节里的歌DSD》10CD[WAV]
- 群星2010-歌林精选辑[歌林][WAV+CUE]
- TrioZimbalist-PianoTriosofWeinberg,Auerbach,Dvorak(2024)[24-44,1]wav
- 群星.1992-滚石第一流台湾歌·12王牌大车拼【滚石】【WAV+CUE】
- 林子祥.1984-创作歌集【华纳】【WAV+CUE】
- 周汤豪.2010-周汤豪【华纳】【FLAC分轨】
- Mozart-TheStringQuintets-AmadeusQuartet,CecilAronowitz(2017)[24-44,1][WAV+CUE]
- JamesWilliamsDennisIrwin-Focus(2024,Red)[24-48]FLAC
- 藤泽麻衣《空みあげて》[WAV]
- 纯音入心系列纯音乐《中国古筝经典名曲》1CD[MP3][1.3GB]
- 纯音入心系列纯音乐《古筝新奏:岁月静好与筝语,细水流年与筝同》1CD[MP3][846.9MB]
- 670《脆弱敏感小女生》[320K/MP3][27.53MB]
- 曾琳.2011-好好爱我【南方】【WAV+CUE】
- 范晓萱.1995-RAIN【福茂】【WAV+CUE】