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 相关文章推荐
使用IE的地址栏来辅助调试Web页脚本
Mar 08 Javascript
javascript 传统事件模型构造的事件监听器实现代码
May 31 Javascript
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
如何减少浏览器的reflow和repaint
Feb 26 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 Javascript
javascript实现将文件保存到本地方法汇总
Jul 26 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
JavaScript实现页面跳转的方式汇总
May 16 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Nov 09 Javascript
vue注册组件的几种方式总结
Mar 08 Javascript
node.js使用express框架进行文件上传详解
Mar 03 Javascript
详解 javascript对象创建模式
Oct 30 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中的实现trim函数代码
2007/03/19 PHP
五款常用mysql slow log分析工具的比较分析
2011/05/22 PHP
php中mysql模块部分功能的简单封装
2011/09/30 PHP
PHP获取网页所有连接的方法(附demo源码下载)
2016/03/30 PHP
Laravel手动分页实现方法详解
2016/10/09 PHP
jQuery EasyUI API 中文文档 - Pagination分页
2011/09/29 Javascript
固定表格行列(expression)在IE下适用
2013/07/25 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
2015/02/27 Javascript
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
基于jQuery实现滚动刷新效果
2017/01/09 Javascript
jQuery实现获取隐藏div高度的方法示例
2017/02/09 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
nodejs 生成和导出 word的实例代码
2018/07/31 NodeJs
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
微信小程序云开发使用方法新手初体验
2019/05/16 Javascript
node express使用HTML模板的方法示例
2019/08/22 Javascript
详解js创建对象的几种方式和对象方法
2021/03/01 Javascript
win7安装python生成随机数代码分享
2013/12/27 Python
搞笑的程序猿:看看你是哪种Python程序员
2015/06/12 Python
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
Python selenium 三种等待方式解读
2016/09/15 Python
Python中read()、readline()和readlines()三者间的区别和用法
2017/07/30 Python
使用PyInstaller将python转成可执行文件exe笔记
2018/05/26 Python
python实现两个dict合并与计算操作示例
2019/07/01 Python
Python中面向对象你应该知道的一下知识
2019/07/10 Python
python模拟键盘输入 切换键盘布局过程解析
2019/08/15 Python
amazeui时间组件的实现示例
2020/08/18 HTML / CSS
美国彩妆品牌:Coastal Scents
2017/04/01 全球购物
法制宣传标语
2014/06/23 职场文书
民事诉讼代理授权委托书
2014/10/11 职场文书
2014年高校辅导员工作总结
2014/12/09 职场文书
2015年大学迎新工作总结
2015/07/16 职场文书
二十年同学聚会感言
2015/07/30 职场文书
python自动化之如何利用allure生成测试报告
2021/05/02 Python
golang操作redis的客户端包有多个比如redigo、go-redis
2022/04/14 Golang