jQuery轮播图实例详解


Posted in jQuery onAugust 15, 2018

本文实例为大家分享了jQuery轮播图实例的具体代码,供大家参考,具体内容如下

1、html+css+js代码

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <style type="text/css">
 *{
  margin: 0;
  padding: 0;
  text-decoration: none;
 }
 body{
  padding: 20px;
 }
 #container{
  min-width: 1000px;
  /*width: 1300px;*/
  height: 400px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
 }
 #list{
  /*width: 9100px;*/
  height: 400px;
  position: absolute;
  z-index: 1;
  top:0;
  left: 0;
  overflow: hidden;
 }
 #list img{
  float: left;
  /*width: 1300px;*/
  height: 400px;
 }
 #buttons{
  position: absolute;
  height: 10px;
  width: 100px;
  z-index: 2;
  bottom: 20px;
  left: 660px;
  text-align: center;
 }
 #buttons span{
  cursor: pointer;
  float: left;
  width: 10px;
  height: 10px;
  margin-right: 9px;
  display: inline-block;
  background-image: url(img/_eb1b95e.png);
  background-position: -1079px -687px;

 }
 #buttons .on{
  background-position: -1049px -687px;
 }
 .arrow{
  cursor: pointer;
  display: none;
  width: 36px;
  height: 76px;
  position: absolute;
  z-index: 2;
  top: 180px;
  background-color: rgba(0,0,0,.3);
  color: #fff;
 }
 #container:hover .arrow{
  display: block;
 }
 #prev{
  background: url(img/_eb1b95e.png);
  background-position: -569px -491px;
  left: 20px;
 }
 #next{
  background: url(img/_eb1b95e.png);
  background-position: -513px -491px;
  right: 20px;
 }
 </style>
</head>
<body>
 <div id="container">
 <div id="list" >
  <img src="img/5.jpg" alt="1"/>
  <img src="img/1.jpg" alt="1"/>
  <img src="img/2.jpg" alt="2"/>
  <img src="img/3.jpg" alt="3"/>
  <img src="img/4.jpg" alt="4"/>
  <img src="img/5.jpg" alt="5"/>
  <img src="img/1.jpg" alt="5"/>
 </div>
 <div id="buttons">
  <span index="1" class="on"></span>
  <span index="2"></span>
  <span index="3"></span>
  <span index="4"></span>
  <span index="5"></span>
 </div>
 <a href="javascript:;" id="prev" class="arrow"></a>
 <a href="javascript:;" id="next" class="arrow"></a>
 </div>

<script type="text/javascript" src="js/jquery.1.10.2.js"></script>
<script type="text/javascript">
 var container = $("#container");
 var list = $("#list");
 var listimg = $("#list img"); 
 var buttons = $("#buttons span");
 var prev = $("#prev");
 var next = $("#next");
 var index = 1;
 var len = 5;
 var num =len+2;
 var interval = 3000;//变换周期
 var timer; 
 var clientwidth=document.documentElement.clientWidth;//屏幕的宽度
 var conwidth = parseInt(clientwidth)-100;//显示界面的宽度

 $(function(){


 setwidth();//设置container的宽度以及里面元素list和list中img的宽度


 function animate(offset){
  var left = parseInt(list.css("left"))+offset;

  // list.animate({left:left+'px'},'normal');
  list.animate({left:left+'px'},conwidth,function(){
  //第一位规定产生动画效果的样式,第二位设置速度,第三位是动画函数执行完后执行的函数
  if (left > -conwidth) {//如果是第一个元素还向前移,就让最后一个元素是这个元素
   list.css('left',-conwidth*len);
  }
  if (left < (-conwidth*len)) {//如果是最后一个元素还向后移,就让第一个元素是这个元素
   list.css('left', -conwidth);
  }
  });
 }

 function showbutton(){//通过操作css来将显示的图片代表的下方原点变大,其余变小
  buttons.eq(index-1).addClass('on').siblings().removeClass('on');
 }

 function play(){
  timer = setTimeout(function(){
  next.trigger('click');//trigger()方法触发被选元素的指定事件类型。
  play();
  },interval);
 }
 function stop(){
  clearTimeout(timer);
 }

 next.bind('click',function(){
  if (list.is(':animated')) {
  return;
  }
  if (index == 5) {
  index = 1;
  }
  else{
  index++;
  }
  animate(-conwidth);
  showbutton();
 });

 prev.bind('click',function(){
  if (list.is(':animated')) {
  return;
  }
  if (index == 1) {
  index = 5;
  }
  else{
  index--;
  }
  animate(conwidth);
  showbutton();
 });

 buttons.each(function(){
  $(this).bind('click',function(){
  if (list.is(':animated') || $(this).attr('class')=='on') {
   return;
  }
  var myindex = parseInt($(this).attr('index'));
  var offset = -conwidth*(myindex - index);

  animate(offset);
  index = myindex;
  showbutton();
  })
 });

 container.hover(stop,play);//鼠标悬停时执行stop()函数,移开时执行play()

 play();

 });

 function setwidth(){//设置container的宽度以及里面元素list和list中img的宽度

  container[0].style.width = conwidth +'px' ;
  list[0].style.width = num*conwidth +'px';
  list[0].style.left = '-'+conwidth +'px';
  for (var i = 0; i < listimg.length; i++) {
  listimg[i].style.width = conwidth + 'px';
  }
 }
</script>
</body>
</html>

2、实现思路

轮播图的功能可分为:自动循环播放,点击左边按钮显示前面图片,点击后边显示后面图片,点击下方的小圆点实现跳转播放。

1.自动播放功能:设置一个定时器,每隔一个周期的时间,触发一次点击右边按钮的函数功能。
2.点击左边按钮显示前面图片:首先我们应该了解到轮播图的原理。图解

jQuery轮播图实例详解

大盒子是container,小盒子是list,list里面有很多图片,没有间隔的排列在一行,用绝对定位来操纵每次可以看到的图片,也就是定位在container里面的是可见部分。当点击左边的按钮时,前面的图片右移,相当于绝对定位中的left值加一个图片的宽度。

3.点击右边按钮显示后面图片:原理和左边的相同,相当于图片左移,让后面的图片显示出来。
4.点击下方的小圆点实现跳转播放:此时页面是第二个图片,要跳转到第五个,相当于点击了三次右边的按钮,也相当于图片左移三个图片的宽度。

3、需要掌握的知识点:

css:

绝对定位

js+jq:

document.documentElement.clientWidth;
obj.animate();
obj.css();
obj.eq()
obj.addClass();
obj.siblings();
obj.removeClass();
setTimeout();
clearTimeout();
obj.trigger();
obj.attr();
obj.bind();

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

jQuery 相关文章推荐
基于jQuery实现瀑布流页面
Apr 11 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
jQuery实现视频展示效果
May 30 jQuery
jQuery实现全选按钮
Jan 01 jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 #jQuery
jQuery仿移动端支付宝键盘的实现代码
Aug 15 #jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 #jQuery
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 #jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 #jQuery
jQuery实现图片简单轮播功能示例
Aug 13 #jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 #jQuery
You might like
Uchome1.2 1.5 代码学习 common.php
2009/04/24 PHP
php实现微信公众平台账号自定义菜单类
2014/12/02 PHP
PHP使用curl_multi实现并发请求的方法示例
2018/04/29 PHP
基于PHP的微信公众号的开发流程详解
2020/08/07 PHP
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
jQuery之选项卡的简单实现
2014/02/28 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
2015/03/05 Javascript
浅谈$(document)和$(window)的区别
2015/07/15 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
深入浅析JS的数组遍历方法(推荐)
2016/06/15 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
2016/11/01 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
JavaScript实现创建自定义对象的常用方式总结
2018/07/09 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
利用Python复制文件的9种方法总结
2019/09/02 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
Python 中 -m 的典型用法、原理解析与发展演变
2019/11/11 Python
VS2019+python3.7+opencv4.1+tensorflow1.13配置详解
2020/04/16 Python
python实现最短路径的实例方法
2020/07/19 Python
Python3.8.2安装包及安装教程图文详解(附安装包)
2020/11/28 Python
HTML5 textarea高度自适应的两种方案
2020/04/08 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
2020/12/16 HTML / CSS
仓库管理专业个人的自我评价
2013/12/30 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
护士长2014年度工作总结
2014/11/11 职场文书
2014年仓库管理员工作总结
2014/11/18 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
元宵节晚会主持词
2015/07/01 职场文书
pycharm无法导入lxml的解决办法
2021/03/31 Python
python 利用 PIL 将数组值转成图片的实现
2021/04/12 Python
python代码实现备忘录案例讲解
2021/07/26 Python