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 相关文章推荐
替代window.event.srcElement效果的可兼容性的函数
Dec 18 Javascript
JavaScript中的prototype使用说明
Apr 13 Javascript
修复ie8&amp;chrome下window的resize事件多次执行
Oct 20 Javascript
关于JavaScript中原型继承中的一点思考
Jul 25 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
Jun 12 Javascript
用js替换除数字与逗号以外的所有字符的代码
Jun 07 Javascript
angularJS 入门基础
Feb 09 Javascript
JS实现课堂随机点名和顺序点名
Mar 09 Javascript
关于Vue组件库开发详析
Jul 01 Javascript
bootstrap Table实现合并相同行
Jul 19 Javascript
vue项目中使用vue-layer弹框插件的方法
Mar 11 Javascript
javascript实现前端分页效果
Jun 24 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 无极分类(递归)实现代码
2010/01/05 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
PHP面相对象中的重载与重写
2017/02/13 PHP
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
2013/10/25 Javascript
js的延迟执行问题分析
2014/06/23 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
2014/09/01 Javascript
jquery引用方法时传递参数原理分析
2014/10/13 Javascript
JavaScript设计模式之单件模式介绍
2014/12/28 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
2016/08/11 Javascript
Laravel中常见的错误与解决方法小结
2016/08/30 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
微信小程序 UI与容器组件总结
2017/02/21 Javascript
jquery.form.js异步提交表单详解
2017/04/25 jQuery
react-router实现跳转传值的方法示例
2017/05/27 Javascript
vue脚手架中配置Sass的方法
2018/01/04 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
Python获取远程文件大小的函数代码分享
2014/05/13 Python
python实现从一组颜色中找出与给定颜色最接近颜色的方法
2015/03/19 Python
整理Python中的赋值运算符
2015/05/13 Python
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
在python中list作函数形参,防止被实参修改的实现方法
2020/06/05 Python
CSS3 display知识详解
2015/11/25 HTML / CSS
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
美国首屈一指的高品质珠宝设计师和零售商:Allurez
2018/01/23 全球购物
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
意大利奢侈品牌在线精品店:Jole.it
2020/11/23 全球购物
小学新学期教师寄语
2014/01/18 职场文书
主管会计岗位责任制
2014/02/10 职场文书
大学生学习面向未来的赶考思想汇报
2014/09/12 职场文书
入党积极分子个人总结
2015/03/02 职场文书
单位推荐信范文
2015/03/27 职场文书
少年雷锋观后感
2015/06/10 职场文书
男人帮观后感
2015/06/18 职场文书
导游词之上海东方明珠塔
2019/09/25 职场文书