首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

jquery实现图片轮播器

Posted in jQuery onMay 23, 2017

一、轮播器

1、HTML框架

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>图片轮播器</title>
  <link rel="stylesheet" type="text/css" href="slider.css" rel="external nofollow" />
  <script src="Jquery.js"></script>
  <script src="slider.js"></script>
 </head>
 <body>
 <div class="wrap">
 <!--快捷键 .wrap>(ul>li*4>img[src=$.jpg])+ol>li*4 -->
  <ul>
   <li><img src="1.jpg" alt="11" /></li>
   <li><img src="2.jpg" alt="22" /></li>
   <li><img src="3.jpg" alt="33" /></li>
   <li><img src="4.jpg" alt="44" /></li>
  </ul>
  <ol>
   <li class="current">1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
  </ol>
  <p class="introduce"></p>
 </div>
 </body>
</html>

2、css的样式

/*清除列表前默认黑点*/
*{
 margin: 0;
 padding: 0;
}
img{
 border:0;
}
ol, ul ,li{list-style: none;} 
body{
 margin: 50px;
}
.wrap{
 width: 500px;/*一张图片的高和宽*/
 height: 350px;
 border: 1px solid red;
 position: relative;/*以这一张图的边框为基准位置*/
 overflow: hidden;/* 将超过这个长宽高的部分隐藏 */
}
.wrap ul{
 width: 2000px;/*列表的行是四张图片的宽度*/
 position: absolute;/* 防止图片溢出 */
 left: 0;
 top: 0;
}
.wrap ul li {
 float: left;/* 将四张图片紧挨着横着排列 */
 width: 500px;
}
.wrap ol{
 position: absolute;
 bottom: 10px;
 right:10px;
}
.wrap ol li{
 float: left;/* 达到 横着排列 的目的*/
 width: 16px;
 height: 16px;
 line-height: 16px;
 text-align: center;/* 字体在列元素中举重显示 */
 color: #fff;
 background: #000;
 border: 1px solid yellow;
 margin-right: 3px;/* 列与列之间的距离 */
 cursor: pointer;
}
.wrap ol li.current{
 background: #fff;
 color:#000;
}
.wrap .introduce{
 width:400px ;
 height: 30px;
 line-height: 30px;
background: rgba(0, 0, 0, 0.5);
/* 达到透明显示的作用；或者用“opacity:0.5 ;
 filter: alpha(opacity = 50);” */
 color: #fff;
 position: absolute;
 bottom: 0;
 left: 0;
}

3、JS控制

$(document).ready(function(){
 var oul = $('.wrap ul');  //获取 行；
 var ali = $('.wrap ul li'); //获取 列；
 var numLi = $('.wrap ol li');//获取数字的 列；
 var aliWidth = $('.wrap ul li').eq(0).width(); //获取单张图片的宽度；
 var _now = 0;//这个控制数字样式的计数器
 var _now2 = 0;//这个是控制图片运动距离的计数器
 var timeId; //定时器的开关
 var aimg = $('.wrap ul img');//获取wrap中img元素
 var op = $('.wrap p')  //获取wrap中p元素
 
 
 numLi.click(function() {       //鼠标点击触发的函数；
  var index = $(this).index();  //如果点击第一张图片，index=0；
  _now = index;      
  //不管_now还是_now2都要和点击时index同步；
  _now2 = index;
  var imgAlt = aimg.eq(_now).attr('alt');//获取 _now时刻的的alt值
  op.html(imgAlt);      //并将atl值显示
 
  $(this).addClass('current').siblings().removeClass();
  //数字样式 的 增和删；
  oul.animate({'left':-aliWidth*index},500);   
  //图片的移动，行元素的左侧距离wrap的左侧-500*index
 });
 
 
 function slider(){
  if (_now==numLi.size()-1) {  //当滚动到第四张图片的时候
    ali.eq(0).css({   //通过定位的方法将第一张移到最后一张；
     'position':'relative',
     'left':oul.width()
    });
   _now=0;
  }
  else{
   _now++;        //如果没达到第四张，那就将_new+1；
  }
  _now2++;        //图片控制计数器 +1；
  numLi.eq(_now).addClass('current').siblings().removeClass();       //数字样式 的 增和删；
  var imgAlt = aimg.eq(_now).attr('alt'); //获取 _now时刻的的alt值
  op.html(imgAlt);       //并将atl值显示
  oul.animate({'left':-aliWidth*_now2},500,function(){   
  //图片的移动，行元素的左侧距离wrap的左侧-500*now2
   if (_now==0) {
    ali.eq(0).css('position','static');
    oul.css('left',0);
    _now2=0;
   }
  });
 }
 
timeId = setInterval(slider,1500);   
//每1500ms，自动切换图片
 //鼠标点击图片则停止计时器，停止“自动切换图片”；离开则继续定时器切换图片
 // $('.wrap').mouseover(function(event) {
 //  clearInterval(timeId);
 // });
 
 // $('.wrap').mouseover(function(event) {
 //  timeId = setInterval(slider,1500);
 // });
 
 $('.wrap').hover(function() {    
  clearInterval(timeId);
 
 }, function() {
  timeId = setInterval(slider,1500);
  
 });
});

*重要函数

1、获取各个标签值并显示

var imgAlt = aimg.eq(_now).attr('alt');//获取 _now时刻的的alt值
  op.html(imgAlt);    //并将atl值显示

2、改变数字样式

$(this).addClass('current').siblings().removeClass();
  //数字样式 的 增和删；

3、滚动图片

oul.animate({'left':-aliWidth*index},500);   
 //图片的移动，行元素的左侧距离wrap的左侧-500*index

*注意点

1、同步

_now = index;
 //不管_now还是_now2都要和点击时index同步；
 //index可能在点击鼠标之后变成3,；松开鼠标后我们希望_now变成从3变成0，但是因为setInterval之后_now加1，_now其实还是从0变成1；所以需要同步_now和index；

2、计数器

_now2的作用是防止父元素在第一张留出空白图片；数字定时器和图片运动控制定时器是不同步的

var _now = 0;//这个控制数字样式的计数器
var _now2 = 0;//这个是控制图片运动距离的计数器

3、去relative属性

if (_now==0) {
    ali.eq(0).css('position','static');//去relative属性
    oul.css('left',0);//当去完relative之后，要还原ul的“left”值为0；
    _now2=0;

4、去属性的时机

Oul.animate({css属性的设置},500,function())其中function就是在500ms执行完之后的操作；

oul.animate({'left':-aliWidth*_now2},500,function(){     
  //图片的移动，行元素的左侧距离wrap的左侧-500*now2
  //根据一组css执行属性动画   
   if (_now==0) {
    ali.eq(0).css('position','static');
    oul.css('left',0);
    _now2=0; //当_now为0的时候，_now2也应该还原回去为0；
   }
  });

*难点

首先，要学会获取元素值；
其次，了解几种函数；
再则，变量的灵活使用，达到了解变量每时每刻的值；
最后，定时器的控制是最难的；

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

jquery实现图片轮播器

- Author -

hanyuwebant

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
jQuery实现多张图片上传预览（不经过后端处理）
Apr 29 jQuery
JQuery实现图片轮播效果
May 08 jQuery
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
JQuery animate动画应用示例
May 14 jQuery
JQuery样式与属性设置方法分析
Dec 07 jQuery
jQuery实现倒计时功能完整示例
Jun 01 jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 #jQuery
jQuery滑动到底部加载下一页数据的实例代码
May 22 #jQuery
jQuery表单验证之密码确认
May 22 #jQuery
JQuery 封装 Ajax 常用方法(推荐)
May 21 #jQuery
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 #jQuery
关于jQuery库冲突的完美解决办法
May 20 #jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 #jQuery
logging(1) Launch Mode(1) json_extract(1) NoSQL(1) 加密(1) Pickle(1) 类加载器(1) netty(1) apt命令(1) JOIN(1)
You might like
dedecms采集中可以过滤多行代码的正则表达式
2007/03/17 PHP
php 代码优化的42条建议 推荐
2009/09/25 PHP
关于php支持分块与断点续传文件下载功能代码
2014/05/09 PHP
PHP实现获取客户端IP并获取IP信息
2015/03/17 PHP
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
thinkPHP框架实现类似java过滤器的简单方法示例
2018/09/05 PHP
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
2008/09/26 Javascript
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
jquery学习笔记 用jquery实现无刷新登录
2011/08/08 Javascript
2014年50个程序员最适用的免费JQuery插件
2014/12/15 Javascript
js表头排序实现方法
2015/01/16 Javascript
JavaScript获得表单target属性的方法
2015/04/02 Javascript
JavaScript中的toUTCString()方法使用详解
2015/06/12 Javascript
谈谈JavaScript异步函数发展历程
2015/09/29 Javascript
Bootstrap框架下下拉框select搜索功能
2020/03/26 Javascript
bootstrap日历插件datetimepicker使用方法
2016/12/14 Javascript
AngularJS实现的回到顶部指令功能实例
2017/05/17 Javascript
JavaScript私有变量实例详解
2019/01/24 Javascript
vue实现学生信息管理系统
2020/05/30 Javascript
Vuex中的Mutations的具体使用方法
2020/06/01 Javascript
基于Electron实现桌面应用开发代码实例
2020/07/07 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
2020/08/05 Javascript
Python的Django框架中的数据库配置指南
2015/07/17 Python
Python爬取三国演义的实现方法
2016/09/12 Python
Python标准库shutil用法实例详解
2018/08/13 Python
python代码xml转txt实例
2020/03/10 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
2021/03/03 Python
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
中文教师求职信
2014/02/22 职场文书
自主招生推荐信范文
2014/05/10 职场文书
体育专业自荐书
2014/05/29 职场文书
检讨书格式
2015/01/23 职场文书
学习党章心得体会2016
2016/01/15 职场文书
财产分割协议书
2016/03/22 职场文书
导游词之阆中古城
2019/12/23 职场文书
win10如何开启ahci模式?win10开启ahci模式详细操作教程
2022/07/23 数码科技