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 相关文章推荐
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
Aug 24 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
Apr 10 Javascript
JavaScript编码风格指南(中文版)
Aug 26 Javascript
js实现按钮控制带有停顿效果的图片滚动
Aug 30 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
详解vue-validator(vue验证器)
Jan 16 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
vue的mixins属性详解
Mar 14 Javascript
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 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
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
Windows2003下php5.4安装配置教程(Apache2.4)
2016/06/30 PHP
页面版文本框智能提示JS代码
2009/11/20 Javascript
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
JQuery中操作Css样式的方法
2014/02/12 Javascript
代码获取历史上的今天发生的事
2014/04/11 Javascript
jQuery实现鼠标可拖动调整表格列宽度
2014/05/26 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
2015/06/29 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
2015/10/30 Javascript
Angularjs 实现分页功能及示例代码
2016/09/14 Javascript
微信小程序 action-sheet底部菜单详解
2016/10/27 Javascript
jQuery实现字符串全部替换的方法
2016/12/12 Javascript
Websocket协议详解及简单实例代码
2016/12/12 Javascript
nodejs中使用HTTP分块响应和定时器示例代码
2017/03/19 NodeJs
原生JS京东轮播图代码
2017/03/22 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
2018/12/21 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
2019/02/01 Javascript
小程序测试后台服务的方法(ngrok)
2019/03/08 Javascript
vue随机验证码组件的封装实现
2020/02/19 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
numpy使用fromstring创建矩阵的实例
2018/06/15 Python
python 实现将小图片放到另一个较大的白色或黑色背景图片中
2019/12/12 Python
哪些是python中web开发框架
2020/06/17 Python
HTML5拖拽功能实现的拼图游戏
2018/07/31 HTML / CSS
中国宠物用品商城:E宠商城
2016/08/27 全球购物
Banana Republic英国官网:香蕉共和国,GAP集团旗下偏贵族风
2018/04/24 全球购物
自我鉴定范文200字
2013/10/02 职场文书
校长先进事迹材料
2014/02/01 职场文书
学习雷锋精神演讲稿
2014/05/10 职场文书
公司活动总结范文
2014/07/01 职场文书
质监局领导班子践行群众路线整改方案
2014/10/26 职场文书
2014小学教师年度考核工作总结
2014/12/03 职场文书