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 26 jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
jQuery实现轮播图效果demo
Jan 11 jQuery
jquery实现上传图片功能
Jun 29 jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 jQuery
jQuery实现查看图片功能
Dec 01 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 stripos()函数及注意事项的分析
2013/06/08 PHP
destoon之一键登录设置
2014/06/21 PHP
PHP中“=&gt;
2019/03/01 PHP
50个比较实用jQuery代码段
2011/09/18 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
jQuery 回车事件enter使用示例
2014/02/18 Javascript
php读取sqlite数据库入门实例代码
2014/06/25 Javascript
jQuery解析json数据实例分析
2015/11/24 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
jQuery实现简单弹窗遮罩效果
2017/02/27 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
layui文件上传实现代码
2017/05/20 Javascript
关于Vue Webpack2单元测试示例详解
2017/08/14 Javascript
Vue组件和Route的生命周期实例详解
2018/02/10 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
2018/08/24 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
利用Python抓取行政区划码的方法
2016/11/28 Python
pandas DataFrame数据转为list的方法
2018/04/11 Python
python实现简易动态时钟
2018/11/19 Python
Python 二叉树的层序建立与三种遍历实现详解
2019/07/29 Python
基于TensorFlow常量、序列以及随机值生成实例
2020/01/04 Python
TensorFlow通过文件名/文件夹名获取标签,并加入队列的实现
2020/02/17 Python
Python实现SMTP邮件发送
2020/06/16 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
保洁主管岗位职责
2013/11/20 职场文书
社区优秀志愿者材料
2014/02/02 职场文书
银行转正自我鉴定
2014/09/29 职场文书
新闻人物通讯稿
2014/10/09 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
《角的初步认识》教学反思
2016/02/17 职场文书
Python Pytorch查询图像的特征从集合或数据库中查找图像
2022/04/09 Python