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和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
JQuery获得内容和属性方法解析
May 30 jQuery
jQuery实现开关灯效果
Aug 02 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代码
2013/11/19 PHP
Laravel学习笔记之Artisan命令生成自定义模板的方法
2018/11/22 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
Jsonp 跨域的原理以及Jquery的解决方案
2011/06/27 Javascript
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
javascript full screen 全屏显示页面元素的方法
2013/09/27 Javascript
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
javascript中bind函数的作用实例介绍
2014/09/28 Javascript
ECMAScript6中Set/WeakSet详解
2015/06/12 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
2015/08/28 Javascript
浅析javascript中的事件代理
2015/11/06 Javascript
详解JavaScript基于面向对象之继承实例
2015/12/16 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
通过jquery实现页面的动画效果(实例代码)
2016/09/18 Javascript
JavaScript设计模式之策略模式详解
2017/06/09 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
详解json串反转义(消除反斜杠)
2019/08/12 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
2019/12/29 Javascript
python time模块用法实例详解
2014/09/11 Python
关于反爬虫的一些简单总结
2017/12/13 Python
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
python实现媒体播放器功能
2018/02/11 Python
使用IDLE的Python shell窗口实例详解
2019/11/19 Python
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
致短跑运动员广播稿
2014/01/09 职场文书
感恩节红领巾广播稿
2014/02/11 职场文书
就业意向书范文
2014/04/01 职场文书
学校开学标语
2014/10/06 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP
Ajax实现三级联动效果
2021/10/05 Javascript
Java基础——Map集合
2022/04/01 Java/Android
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers