jquery实现轮播图特效


Posted in jQuery onApril 12, 2020

本文实例为大家分享了jquery实现轮播图的具体代码,供大家参考,具体内容如下

一、实现功能:

1、通过定时实现图片自我轮播
2、当图片轮播到最后一张时,会从第一张开始继续轮播
3、点击小圈圈图标能自动切换到对应图片
4、鼠标悬浮图片上停止图片轮播,当鼠标移开图片,会继续轮播
5、鼠标悬浮图片上会显示左右键图标,鼠标离开,会隐藏左右键图标
6、点击左键图标会切换到上一张图片,当切换到第一张图片时,再次点击左键图标会切换到最后一张图片;点击右键图标会显示到下一张图片,当切换到最后一张图片时,再次点击右键图标会切换达到第一张图片。

二、实现代码:

1、css代码:

<style>
 /*设置body*/
 body{
 margin:0;
 padding:0;
 font:16px "微软雅黑",sans-serif;
 }
 /*设置轮播图的边框相对定位*/
 .play-box{
 position:relative;
 width:500px;
 height:313px;
 margin:100px auto;
 border:1px solid #ccc;
 }
 /*设置边框下的图片*/
 .play-box img{
 width:500px;
 height:313px;
 border:0;
 }
 /*设置超链接下的所有图片不显示*/
 .play-box a{
 display:block; /*现在是文本状态,要修改为块状*/
 overflow:hidden; /*隐藏超过边框高度的图片*/
 opacity:0; /*默认图片为全透明*/
 height:0; /*默认高度为0*/
 transition:opacity .5s; /*默认透明度过渡时间为0.5s*/
 }
 /*设置当前图片显示*/
 #imgList a.current{
 opacity:1; /*默认图片显示*/
 height:auto; /*默认高度为自动*/
 }
 /*设置列表ul*/
 ul{
 margin:0;
 padding:0;
 list-style:none;
 }
 /*设置列表ul下的li*/ 
 ul li{
 width:10px;
 height:10px;
 margin:0 4px;
 font-size:0;
 border-radius:50%;
 background-color:#fff;
 cursor:pointer;
 float:left;
 }
 /*当图片变化时,图标也跟着变化*/
 ul li.current{
 background-color:red;
 }
 /*设置图标绝对定位*/
 .iconList{
 position:absolute;
 bottom:10px;
 left:50%;
 margin-left:-45px;
 }
 /*设置向左向右图标*/
 .sliderbar{
 position:absolute;
 top:50%;
 margin-top:-25px;
 width:30px;
 height:50px;
 font-family:simsun;
 color:#fff;
 text-align:center;
 line-height:50px;
 background-color:#000;
 opacity:.6;
 display:none;
 cursor:pointer;
 }
 /*设置向左图标*/
 .slidebar-left{
 left:0;
 }
 /*设置向右图标*/
 .slidebar-right{
 right:0;
 }
</style>

2、body代码

<!--轮播图边框-->
 <div id="playBox" class="play-box">
 <!--图片列表-->
 <div id="imgList">
  <a href="#" target="_blank" class="current">
  <img src="image/5.jpg"/>
  </a>
  <a href="#" target="_blank">
  <img src="image/6.jpg"/>
  </a>
  <a href="#" target="_blank">
  <img src="image/7.jpg"/>
  </a>
  <a href="#" target="_blank">
  <img src="image/8.jpg"/>
  </a>
  <a href="#" target="_blank">
  <img src="image/9.jpg"/>
  </a>
 </div>
 <!--图标列表-->
 <div class="iconList">
  <ul>
  <li class="current">1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  </ul>
 </div>
 <!--左箭头-->
 <div class="sliderbar slidebar-left"><</div>
 <!--右箭头-->
 <div class="sliderbar slidebar-right">></div>
</div>

3、jquery代码:

<script src="js/jquery-3.4.1.min.js"></script>
<script>
 $(document).ready(function(){
 //设置变量速度为3秒
 var speed = 3000;
 //循环变量为1,是避免定时器再等第一章图片
 var m = 1;
 //设置定时器的函数和时间
 var playTimer = setInterval(runPlay,speed);
 //定时函数
 function runPlay(){
 //判读如果m大于4,就设置m=0
 if(m>4){
 m=0;
 }
 //调用controlPlay函数来控制图片变化
 controlPlay(m);
 m++;
 }
 //通过参数控制图片的变化,图标变化
 function controlPlay(n){
 $("#imgList a").removeClass("current").eq(n).addClass("current");
 $("ul li").removeClass("current").eq(n).addClass("current");
 }
 //给整个轮播图绑定鼠标事件,当鼠标放到轮播图上停止轮播图,当鼠标离开轮播图继续滚动
 $("#playBox").mouseenter(function(){
 //停止定时
 clearInterval(playTimer);
 //左右控制按钮显示
 $(".sliderbar").fadeIn(300);
 }).mouseleave(function(){
 //重新开始定时
 playTimer =setInterval(runPlay,speed);
 //左右控制按钮隐藏
 $(".sliderbar").fadeOut(300);
 });
 //给li绑定控制图标绑定单击事件
 $("ul li").click(function(){
 controlPlay($(this).index());
 //鼠标点击过后修改m的值
 m =$(this).index()+1;
 }).hover(function(){
 //给li取消鼠标悬停的冒泡
 return false;
 })
 //给左右的控制图标取消 鼠标悬停的冒泡
 $(".sliderbar").hover(function(){
 return false;
 })
 //下一张图片
 $(".slidebar-right").click(function(){
 //判断m的值
 if(m>4){
 m=0;
 }
 //显示下一站图片
 controlPlay(m);
 m ++;
 })
 //上一张图片
 $(".slidebar-left").click(function(){
 //m默认显示下一张,所以为了显示上一张,m必须减2
 m -= 2;
 if(m<0){
 m=4;
 }
 //显示上一张图片
 controlPlay(m);
 //保证m要显示下一张
 m ++;
 }) 
 });
</script>

三、实现效果图

1、默认显示效果

jquery实现轮播图特效

2、鼠标悬浮效果

jquery实现轮播图特效

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
js和jquery中获取非行间样式
May 05 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
用jQuery实现抽奖程序
Apr 12 #jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 #jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 #jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 #jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 #jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 #jQuery
jQuery实现html可联动的百分比进度条
Mar 26 #jQuery
You might like
杏林同学录(五)
2006/10/09 PHP
第十二节--类的自动加载
2006/11/16 PHP
php中有关字符串的4个函数substr、strrchr、strstr、ereg介绍和使用例子
2014/04/24 PHP
php中array_unshift()修改数组key注意事项分析
2016/05/16 PHP
php和vue配合使用技巧和方法
2019/05/09 PHP
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
菜鸟javascript基础资料整理2
2010/12/06 Javascript
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
firebug的一个有趣现象介绍
2011/11/30 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
2013/03/20 Javascript
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
javascript:window.open弹出窗口的位置问题
2014/03/18 Javascript
初识Node.js
2015/03/20 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
jQuery与Ajax以及序列化
2016/02/01 Javascript
jQuery解决浏览器兼容性问题案例分析
2016/04/15 Javascript
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
2017/07/24 Javascript
微信小程序 同步请求授权的详解
2017/08/04 Javascript
js实现音乐播放控制条
2017/09/09 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
2019/04/17 Javascript
详解js实时获取并显示当前时间的方法
2019/05/10 Javascript
layUI实现前端分页和后端分页
2019/07/27 Javascript
vue父子组件间引用之$parent、$children
2020/05/20 Javascript
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
[03:01]DOTA2英雄基础教程 露娜
2014/01/07 DOTA
[01:06:30]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第二场 1月9日
2021/03/11 DOTA
Pycharm无法打开双击没反应的问题及解决方案
2020/08/17 Python
eDreams意大利:南欧领先的在线旅行社
2018/11/23 全球购物
Yummie官方网站:塑身衣和衣柜必需品
2019/10/29 全球购物
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
医学护理毕业生自荐信
2013/11/07 职场文书
银行实习生的自我评价
2014/01/13 职场文书
Win11自动黑屏怎么办 Win11自动黑屏设置教程
2022/07/15 数码科技