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 相关文章推荐
学习javascript面向对象 掌握创建对象的9种方式
Jan 04 Javascript
JS组件Bootstrap导航条使用方法详解
Apr 29 Javascript
jQuery实现根据生日计算年龄 星座 生肖
Nov 23 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
JS异步文件上传(兼容IE8+)
Apr 02 Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 Javascript
vue.js select下拉框绑定和取值方法
Mar 03 Javascript
js input输入百分号保存数据库失败的解决方法
May 26 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
微信小程序云开发如何使用npm安装依赖
May 18 Javascript
js实现带箭头的进度流程
Mar 26 Javascript
js闭包的9个使用场景
Dec 29 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
MySQL相关说明
2007/01/15 PHP
php set_time_limit(0) 设置程序执行时间的函数
2010/05/26 PHP
PHP采集腾讯微博的实现代码
2012/01/19 PHP
解析php防止form重复提交的方法
2013/07/01 PHP
PHP捕获Fatal error错误的方法
2014/06/11 PHP
简单的php+mysql聊天室实现方法(附源码)
2016/01/05 PHP
PHP基于单例模式实现的mysql类
2016/01/09 PHP
php加密之discuz内容经典加密方式实例详解
2017/02/04 PHP
js AspxButton的客户端操作
2009/06/26 Javascript
javascript通过class来获取元素实现代码
2013/02/20 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
js中用window.open()打开多个窗口的name问题
2014/03/13 Javascript
jquery中change()用法实例分析
2015/02/06 Javascript
js实现可键盘控制的简单抽奖程序
2016/07/13 Javascript
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
2019/11/01 Javascript
vue实现图片上传到后台
2020/06/29 Javascript
[05:45]Ti4观战指南(下)
2014/07/07 DOTA
使用Kivy将python程序打包为apk文件
2017/07/29 Python
windows下安装python的C扩展编译环境(解决Unable to find vcvarsall.bat)
2018/02/21 Python
python pyheatmap包绘制热力图
2018/11/09 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
基于FME使用Python过程图解
2020/05/13 Python
tensorflow基于CNN实战mnist手写识别(小白必看)
2020/07/20 Python
CSS3简单实现照片墙
2014/12/12 HTML / CSS
Ralph Lauren法国官网:美国高品味时装品牌
2017/12/08 全球购物
SQL Server笔试题
2012/01/10 面试题
工商管理专业自荐信
2014/06/03 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
大学新生军训自我鉴定
2014/09/18 职场文书
乡镇遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
房屋转让协议书
2014/10/18 职场文书
安全隐患整改报告
2014/11/06 职场文书
WordPress多语言翻译插件 - WPML使用教程
2021/04/01 PHP
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS