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插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
jquery实现轮播图特效
Apr 12 jQuery
jquery实现简单每周轮换的日历
Sep 10 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
用php写的serv-u的web申请账号的程序
2006/10/09 PHP
Thinkphp关闭缓存的方法
2015/06/26 PHP
phplist及phpmailer(组合使用)通过gmail发送邮件的配置方法
2016/03/30 PHP
PHP入门教程之字符串处理技巧总结(转换,过滤,解析,查找,截取,替换等)
2016/09/11 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
JavaScript 学习笔记之操作符
2015/01/14 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
WebSocket实现简单客服聊天系统
2017/05/12 Javascript
nodejs使用http模块发送get与post请求的方法示例
2018/01/08 NodeJs
解析Vue.js中的组件
2018/02/02 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
vue自定义表单生成器form-create使用详解
2019/07/19 Javascript
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
详解python websocket获取实时数据的几种常见链接方式
2019/07/01 Python
Python进程,多进程,获取进程id,给子进程传递参数操作示例
2019/10/11 Python
基于python修改srt字幕的时间轴
2020/02/03 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
详解pyqt5的UI中嵌入matplotlib图形并实时刷新(挖坑和填坑)
2020/08/07 Python
python3让print输出不换行的方法
2020/08/24 Python
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
编写用C语言实现的求n阶阶乘问题的递归算法
2014/10/21 面试题
马智宇婚礼主持词
2014/03/22 职场文书
单位租房协议书样本
2014/10/30 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python
Elasticsearch 配置详解
2022/04/19 Java/Android
CSS实现背景图片全屏铺满自适应的3种方式
2022/07/07 HTML / CSS