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 相关文章推荐
jquery下onpropertychange事件的绑定方法
Aug 01 Javascript
JavaScript对象学习经验整理
Oct 12 Javascript
JavaScript代码复用模式详解
Nov 07 Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 Javascript
JavaScript代码里的判断小结
Aug 22 Javascript
JavaScript中原型链存在的问题解析
Sep 25 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
Nov 24 Javascript
获取IE浏览器Cookie信息的方法
Jan 23 Javascript
详解Vue内部怎样处理props选项的多种写法
Nov 06 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
Nov 15 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
Dec 06 Javascript
vue router返回到指定的路由的场景分析
Nov 10 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 替换模板变量实现步骤
2009/08/24 PHP
VPS中使用LNMP安装WordPress教程
2014/12/28 PHP
PHP实现对图片的反色处理功能【测试可用】
2018/02/01 PHP
splice slice区别
2006/10/09 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
2010/07/13 Javascript
javaScript 删除字符串空格多种方法小结
2012/10/24 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
Javascript农历与公历相互转换的简单实例
2016/10/09 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
2017/04/26 jQuery
微信小程序实现tab切换效果
2017/11/21 Javascript
JavaScript实现微信红包算法及问题解决方法
2018/04/26 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
node实现爬虫的几种简易方式
2019/08/22 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
JS常用排序方法实例代码解析
2020/03/03 Javascript
python使用urlparse分析网址中域名的方法
2015/04/15 Python
使用python实现生成用户信息
2017/03/20 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
python之信息加密题目详解
2019/06/26 Python
解决Pycharm后台indexing导致不能run的问题
2019/06/27 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
Win10系统下安装labelme及json文件批量转化方法
2019/07/30 Python
python使用socket 先读取长度,在读取报文内容示例
2019/09/26 Python
Python 实现加密过的PDF文件转WORD格式
2020/02/04 Python
python mysql 字段与关键字冲突的解决方式
2020/03/02 Python
Tensorflow中的降维函数tf.reduce_*使用总结
2020/04/20 Python
html5调用摄像头功能的实现代码
2018/05/07 HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
2018/09/19 HTML / CSS
英国女性时尚品牌:Apricot
2018/12/04 全球购物
俄罗斯电子产品、计算机和家用电器购物网站:OLDI
2019/10/27 全球购物
《草虫的村落》教学反思
2014/02/16 职场文书
《我不是最弱小的》教学反思
2014/02/23 职场文书
学习雷锋寄语大全
2014/04/11 职场文书
大学迎新生欢迎词
2015/09/29 职场文书