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输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
jQuery实现简单轮播图效果
Dec 27 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
php中用memcached实现页面防刷新功能
2014/08/19 PHP
统一接口:为FireFox添加IE的方法和属性的js代码
2007/03/25 Javascript
IE与firefox之jquery用法区别
2008/10/03 Javascript
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
Javascript学习笔记一 之 数据类型
2010/12/15 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
2016/02/01 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
Bootstrap表格和栅格分页实例详解
2016/05/20 Javascript
jquery编写日期选择器
2017/03/16 Javascript
bootstrap confirmation按钮提示组件使用详解
2017/08/22 Javascript
Js利用console计算代码运行时间的方法示例
2017/09/24 Javascript
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
Nodejs使用Mongodb存储与提供后端CRD服务详解
2018/09/04 NodeJs
Vue.js实现的购物车功能详解
2019/01/27 Javascript
jQuery事件多次绑定与解绑问题实例分析
2019/02/19 jQuery
原生js+css实现tab切换功能
2020/09/17 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
2020/11/10 Javascript
[01:14]2014DOTA2展望TI 剑指西雅图newbee战队专访
2014/06/30 DOTA
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
Python中的自省(反射)详解
2015/06/02 Python
python得到qq句柄,并显示在前台的方法
2018/10/14 Python
python生成lmdb格式的文件实例
2018/11/08 Python
Python实现简易过滤删除数字的方法小结
2019/01/09 Python
Python学习笔记之读取文件、OS模块、异常处理、with as语法示例
2019/06/04 Python
python读写csv文件并增加行列的实例代码
2019/08/01 Python
Python常用数据类型之间的转换总结
2019/09/06 Python
python如何使用jt400.jar包代码实例
2019/12/20 Python
jupyter notebook 增加kernel教程
2020/04/10 Python
pip安装提示Twisted错误问题(Python3.6.4安装Twisted错误)
2020/05/09 Python
python中封包建立过程实例
2021/02/18 Python
浅谈Html5页面打开app的一些思考
2020/03/30 HTML / CSS
专门经营化妆刷的美国彩妆品牌:Sigma Beauty
2017/09/11 全球购物
银行行长竞聘演讲稿
2014/04/23 职场文书
教师党员承诺书2015
2015/01/21 职场文书