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获取table下某一行某一列的值实现代码
Apr 07 jQuery
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
jquery对table做排序操作的实例演示
Aug 10 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
jquery中有哪些api jQuery主要API
Nov 20 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
jQuery创建折叠式菜单
Jun 15 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
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
YII框架批量插入数据的方法
2017/03/18 PHP
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
只需一行代码,轻松实现一个在线编辑器
2013/11/12 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
babel基本使用详解
2017/02/17 Javascript
原生js实现吸顶效果
2017/03/13 Javascript
基于jQuery实现文字打印动态效果
2017/04/21 jQuery
Angular 通过注入 $location 获取与修改当前页面URL的实例
2017/05/31 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
vant IndexBar实现的城市列表的示例代码
2019/11/20 Javascript
JavaScript面向对象核心知识与概念归纳整理
2020/05/09 Javascript
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
python中使用enumerate函数遍历元素实例
2014/06/16 Python
python 根据pid杀死相应进程的方法
2017/01/16 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
Python pickle模块实现对象序列化
2019/11/22 Python
tensorflow模型保存、加载之变量重命名实例
2020/01/21 Python
面向新手解析python Beautiful Soup基本用法
2020/07/11 Python
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
澳洲最大的时尚奢侈品电商平台:Cettire
2020/06/15 全球购物
医学生职业规划范文
2014/01/05 职场文书
校园十佳歌手策划书
2014/01/22 职场文书
会议活动邀请函
2014/01/27 职场文书
高中生期末评语
2014/01/28 职场文书
服装创业计划书范文
2014/02/05 职场文书
群众路线教育党课主持词
2014/04/01 职场文书
计划生育证明书写要求
2014/09/17 职场文书
2016年机关单位节能宣传周活动总结
2016/04/05 职场文书
浅谈Python中的函数(def)及参数传递操作
2021/05/25 Python