jQuery实现图片轮播效果代码


Posted in Javascript onSeptember 27, 2016

整理以前用jQuery实现的图片轮播效果。

 1. 不做操作时,自动轮播
 2. 鼠标悬浮在图片上时,停止自动轮播,隐藏在图片左右的箭头会显示出来
 3. 手动轮播1:鼠标指向图片底部的小标按钮,可以切换对应的图片
 4. 手动轮播2:点击左右箭头也可以切换图片

效果图:(PS:用软件捕捉的,不太会弄,感觉图片都失真了)

jQuery实现图片轮播效果代码

下面是代码区域:

**inde.html部分代码**

<div class="box">
 <ul class="img">
  <li class="photo"><a href="#"><img src="images/1.jpg" alt=""/></a></li>
  <li class="photo"><a href="#"><img src="images/2.jpg" alt=""/></a></li>
  <li class="photo"><a href="#"><img src="images/3.jpg" alt=""/></a></li>
  <li class="photo"><a href="#"><img src="images/4.jpg" alt=""/></a></li>
  <li class="photo"><a href="#"><img src="images/5.jpg" alt=""/></a></li>
  <li class="photo"><a href="#"><img src="images/6.jpg" alt=""/></a></li>
  <li class="photo"><a href="#"><img src="images/7.jpg" alt=""/></a></li>
 </ul>
 <div>
  <span class="jt" id="jtLeft"><</span>
  <span class="jt" id="jtRight">></span>
 </div>
 <div class="numList"></div>
</div>

**reset.css代码**

.box{
 padding:0;
 width: 800px;
 height: 500px; 
 margin: 0 auto;
 position:relative;
}
ul.img{
 padding:0;
 margin: 0 auto;
}
ul.img .photo{
 list-style: none;
 position: absolute; 
 display: none;
}
img{
 width: 800px;
 height: 500px;
}
.box .img .active{
 display: block;
}



.jt{
 width: 40px;
 height: 50px;
 background-color: rgba(0,0,0,0.5);
 position: absolute;
 top:50%;
 margin-top: -25px;
 line-height: 50px;
 font-size: 30px; 
 color: white;
 font-weight: 800;
 text-align: center; 
 display: none;
}
#jtRight{
 right: 0;
}


.numList{
 font-size: 0;
 position: absolute;
 bottom:10px;
 left: 50%;
 margin-left:-70px; 
}
.numList .num{
 background-color: black;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 color: white;
 text-align: center;
 font-size: 14px;
 display: inline-block;
}
.numList .check{
 background-color: red;
}

**main.js代码**

$(function(){
 /*定义全局变量,用来记录表示显示的图片的下标*/
 var i=0;

 /*按图片的数量添加下标*/
 var size=$(".photo").size();
 for (var j=1;j<=size;j++){
  var span=$("<span class='num'>"+j+"</span>");
  $(".numList").append(span);
 }
 /*默认选中第一个下标和显示第一张图片*/
 $(".photo:eq(0)").addClass("active");
 $(".num:eq(0)").addClass("check");

 /*手动轮播*/
 var HandleImgChange=function(){
  $(".num").each(function(){
   $(this).mouseover(function(){
    $(this).siblings().removeClass("check");
    $(this).addClass("check");

    /*获得选择的下标值*/
    i=$(this).index();
    $(".photo").hide();
    $(".photo").eq(i).show();
   });
  });
 };

 /*显示下一张图*/
 var move=function(){
  i++;
  if(i>size-1){
   i=0;
  }
  $(".num").eq(i).addClass("check").siblings().removeClass("check");
  $(".photo").eq(i).show().siblings().hide();
 };

 /*自动轮播*/
 var AutoImgChange=function(){
  var t=setInterval(move,1000);
  $(".box").hover(function(){
   $(this).css({"cursor":"pointer"});
   $(".jt").css({"display":"block"});
   clearInterval(t);
  },function(){
   $(".jt").css({"display":"none"});
   t=setInterval(move,1000);
  })
 };

 /*设置左右箭头点击事件*/
 var jtL=function(){
  $("#jtLeft").click(function(){
   i--;
   if(i<0){
    i=size-1;
   }
   $(".num").eq(i).addClass("check").siblings().removeClass("check");
   $(".photo").eq(i).show().siblings().hide();
  })
 };
 var jtR=function(){
  $("#jtRight").click(function(){
   move();
  })
 };

 HandleImgChange();
 AutoImgChange();
 jtR();
 jtL();
});

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

Javascript 相关文章推荐
js用闭包遍历树状数组的方法
Mar 19 Javascript
js中自定义方法实现停留几秒sleep
Jul 11 Javascript
JavaScript设计模式之外观模式实例
Oct 10 Javascript
web前端设计师们常用的jQuery特效插件汇总
Dec 07 Javascript
简单实现异步编程promise模式
Jul 31 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
Jun 12 Javascript
vue实现全选、反选功能
Nov 17 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 Javascript
ajax请求data遇到的问题分析
Jan 18 Javascript
浅谈angularJS2中的界面跳转方法
Aug 31 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
Sep 11 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
Sep 27 #Javascript
Javascript json object 与string 相互转换的简单实现
Sep 27 #Javascript
js转html实体的方法
Sep 27 #Javascript
JSON与String互转的实现方法(Javascript)
Sep 27 #Javascript
通过JS获取Request.QueryString()参数的值实现方法
Sep 27 #Javascript
微信小程序使用第三方库Underscore.js步骤详解
Sep 27 #Javascript
微信小程序使用第三方库Immutable.js实例详解
Sep 27 #Javascript
You might like
利用PHP和AJAX创建RSS聚合器的代码
2007/03/13 PHP
PHP学习之数组值的操作
2011/04/17 PHP
详解php的魔术方法__get()和__set()使用介绍
2012/09/19 PHP
使用gd库实现php服务端图片裁剪和生成缩略图功能分享
2013/12/25 PHP
php简单图像创建入门实例
2015/06/10 PHP
详解PHP用substr函数截取字符串中的某部分
2016/12/03 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
php判断/计算闰年的方法小结【三种方法】
2019/07/06 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
基于node.js的快速开发透明代理
2010/12/25 Javascript
JS date对象的减法处理实现代码
2010/12/28 Javascript
Javascript对象属性方法汇总
2013/11/21 Javascript
Javascript中的String对象详谈
2014/03/03 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
jQuery中get()方法用法实例
2014/12/27 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
2017/02/08 Javascript
MUI实现上拉加载和下拉刷新效果
2017/06/30 Javascript
linux 后台运行node服务指令方法
2018/05/23 Javascript
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
原生js添加一个或多个类名的方法分析
2019/07/30 Javascript
React+TypeScript+webpack4多入口配置详解
2019/08/08 Javascript
基于JQuery和DWR实现异步数据传递
2020/10/16 jQuery
python使用socket远程连接错误处理方法
2015/04/29 Python
Python基于yield遍历多个可迭代对象
2020/03/12 Python
Python 存取npy格式数据实例
2020/07/01 Python
Python程序慢的重要原因
2020/09/04 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
介绍一下MD5加密算法
2016/11/12 面试题
期末考试动员演讲稿
2014/01/10 职场文书
人力资源管理专业自荐书
2014/07/07 职场文书
工人先锋号事迹材料
2014/12/24 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
幼儿园大班教育随笔
2015/08/14 职场文书
聘任通知书
2015/09/21 职场文书
详解用Python把PDF转为Word方法总结
2021/04/27 Python