jquery  实现轮播图详解及实例代码


Posted in Javascript onOctober 12, 2016

轮播图:

接触jquery也有一段时间了,今天刚好利用轮播图来练练手。博文的前面会介绍一个简单用jquery做轮播图的例子,中间会插入一些关于轮播图更多的思考,在后面会用Javascript的方法来写一个轮播图,最后则是关于jquery和Javascript的比较。轮播图的效果可以点击如下链接查看:http://sandbox.runjs.cn/show/t07kscph

jquery做轮播图的例子:

html部分代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <link rel="stylesheet" type="text/css" href="demo.css"/>
    <script src="../jquery/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="demo.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div id="igs">
      <a class="ig" href="#"><img src="images/1.jpg"/></a>
      <a class="ig" href="#"><img src="images/2.jpg"/></a>
      <a class="ig" href="#"><img src="images/3.jpg"/></a>
      <a class="ig" href="#"><img src="images/4.jpg"/></a>
      <a class="ig" href="#"><img src="images/5.jpg"/></a>
      
      <div class="btn btn1"><</div>
      <div class="btn btn2">></div>
      
      <ul id="tabs">
        <li class="tab">1</li>
        <li class="tab">2</li>
        <li class="tab">3</li>
        <li class="tab">4</li>
        <li class="tab">5</li>
      </ul>
    </div>
  </body>
</html>

css部分代码:

* {
  margin: 0;
  padding: 0;
}

#igs {
  margin: 10px auto;
  width: 700px;
  height: 320px;
  position: relative;
}

.ig {
  position: absolute;
}

#tabs {
  position: absolute;
  list-style: none;
  background-color: rgba(255,255,255,.5);
  left: 300px;
  bottom: 10px;
  border-radius: 10px;
  padding: 5px 0 5px 5px;
}

.tab{
  float: left;
  text-align: center;
  line-height: 20px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  overflow: hidden;
  margin-right: 4px;
  border-radius: 100%;
  background-color: rgb(200,100,150);
}

.btn{
  position: absolute;
  color: #fff;
  top: 110px;
  width: 40px;
  height: 100px;
  background-color: rgba(255,255,255,.3);
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  line-height: 100px;
  border-radius: 5px;
  margin: 0 5px;
}

.btn2{
  position: absolute;
  right: 0px;
}

.btn:hover{
  background-color: rgba(0,0,0,.7);
}
 

js部分代码:

//定义全局变量和定时器
var i = 0 ;
var timer;

$(document).ready(function(){
  //用jquery方法设置第一张图片显示,其余隐藏
  $('.ig').eq(0).show().siblings('.ig').hide();
  
  //调用showTime()函数(轮播函数)
  showTime();
  
  //当鼠标经过下面的数字时,触发两个事件(鼠标悬停和鼠标离开)
  $('.tab').hover(function(){
    //获取当前i的值,并显示,同时还要清除定时器
    i = $(this).index();
    Show();
    clearInterval(timer);
  },function(){
    //
    showTime();
  });
  
  //鼠标点击左侧的箭头
  $('.btn1').click(function(){
    clearInterval(timer);
    if(i == 0){
      i = 5;//注意此时i的值
    }
    i--;
    Show();
    showTime();
  });
  
  //鼠标点击右侧的箭头
  $('.btn2').click(function(){
    clearInterval(timer);
    if(i == 4){
      i = -1;//注意此时i的值
    }
    i++;
    Show();
    showTime();
  });
  
});


//创建一个showTime函数
function showTime(){
  //定时器
  timer = setInterval(function(){
    //调用一个Show()函数
    Show();
    i++;
    //当图片是最后一张的后面时,设置图片为第一张
    if(i==5){
      i=0;
    }
  },2000);
}


//创建一个Show函数
function Show(){
  //在这里可以用其他jquery的动画
  $('.ig').eq(i).fadeIn(300).siblings('.ig').fadeOut(300);
  
  //给.tab创建一个新的Class为其添加一个新的样式,并且要在css代码中设置该样式
  $('.tab').eq(i).addClass('bg').siblings('.tab').removeClass('bg');
  
  /*
   * css中添加的代码:
   * .bg{ background-color: #f00; }
   * */
}

完成效果图:

jquery  实现轮播图详解及实例代码

完成效果,点击如下链接即可查看:http://sandbox.runjs.cn/show/t07kscph

关于jquery做轮播图更多的思考

思考一:在第七行代码中用jquery方法设置第一张图片显示,其余隐藏,我们还有没有其他方法可以实现?

思路:通过jquery的筛选器来实现

代码示例:

$("#igs a:not(:first-child)").hide();

扩展:这样来看的话,在a标签中的class我们都可以省略,于此同时我们对于jquery选择器的了解要更深入。

思考二:在第64行代码中,我们创建了一个Show函数,在这里我们只能看到简单的效果,我们能不能将我们的动画效果做的更炫?

思路:用jquery中的自定义动画,为其设置多个动画效果

代码示例:

//代码提示:可以用fadeIn()、fadeOut()、fadeTo()、animate()等,具体实现方法请查阅相关资料 

思考三:如果我们在原来的基础上在增加一张或多张图片,我们又要修改我们的代码了,我们可不可以将该段代码适用到更多的轮播图中?

思路:我们在前面设置一个计数器count,通过DOM的方法获取到图片的数量

代码示例:

var count;
$(document).ready(function(){
  count= $(".main a").length; /*给动态变化的i备用*/;
  //。。。代码省略
  
  //鼠标点击左侧的箭头
  $('.btn1').click(function(){
    clearInterval(timer);
    if(i == 0){
      i = count;//注意此时i的值
    }
    i--;
    Show();
    showTime();
  });
  
  //鼠标点击右侧的箭头
  $('.btn2').click(function(){
    clearInterval(timer);
    //console.log(count-1);
    if(i == count-1){
      i = -1;//注意此时i的值
    }
    i++;
    Show();
    showTime();
  });
  
});

 用原生Javascript方法写一个简单的轮播图

 html部分代码:

<div id="container">
  <div id="list" style="left: -600px;">
    <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>

js部分代码: 

<script type="text/javascript">
    /* 知识点:    */
    /*    this用法 */
    /*    DOM事件 */
    /*    定时器 */
    window.onload = function () {
      var container = document.getElementById('container');
      var list = document.getElementById('list');
      var buttons = document.getElementById('buttons').getElementsByTagName('span');
      var prev = document.getElementById('prev');
      var next = document.getElementById('next');
      var index = 1;
      var timer;
      function animate(offset) {
        //获取的是style.left,是相对左边获取距离,所以第一张图后style.left都为负值,
        //且style.left获取的是字符串,需要用parseInt()取整转化为数字。
        var newLeft = parseInt(list.style.left) + offset;
        list.style.left = newLeft + 'px';
        //无限滚动判断
        if (newLeft > -600) {
          list.style.left = -3000 + 'px';
        }
        if (newLeft < -3000) {
          list.style.left = -600 + 'px';
        }
      }
      function play() {
        //重复执行的定时器
        timer = setInterval(function () {
          next.onclick();
        }, 2000)
      }
      function stop() {
        clearInterval(timer);
      }
      function buttonsShow() {
        //将之前的小圆点的样式清除
        for (var i = 0; i < buttons.length; i++) {
          if (buttons[i].className == "on") {
            buttons[i].className = "";
          }
        }
        //数组从0开始,故index需要-1
        buttons[index - 1].className = "on";
      }
      prev.onclick = function () {
        index -= 1;
        if (index < 1) {
          index = 5
        }
        buttonsShow();
        animate(600);
      };
      next.onclick = function () {
        //由于上边定时器的作用,index会一直递增下去,我们只有5个小圆点,所以需要做出判断
        index += 1;
        if (index > 5) {
          index = 1
        }
        animate(-600);
        buttonsShow();
      };
      for (var i = 0; i < buttons.length; i++) {
        (function (i) {
          buttons[i].onclick = function () {
            /* 这里获得鼠标移动到小圆点的位置,用this把index绑定到对象buttons[i]上,去谷歌this的用法 */
            /* 由于这里的index是自定义属性,需要用到getAttribute()这个DOM2级方法,去获取自定义index的属性*/
            var clickIndex = parseInt(this.getAttribute('index'));
            var offset = 600 * (index - clickIndex); //这个index是当前图片停留时的index
            animate(offset);
            index = clickIndex; //存放鼠标点击后的位置,用于小圆点的正常显示
            buttonsShow();
          }
        })(i)
      }
      container.onmouseover = stop;
      container.onmouseout = play;
      play();
    }
  </script>

jquery和Javascript方法的比较

 经过比较,我们不难看出,jquery方法比我们的Javascript方法写的代码要少得多。事实上,直接用Javascript省略了好多问题,比如说兼容性的问题(该示例没有做测试,只是用来做比较);还有,如果当class的值有两个,中间用空格隔开,那么我们用DOM该如何操作(思路:用正则表达式和数组的相关方法),这样我们的代码量会更多;如果我们想要更改动画效果,我们需要修改的地方也很多,而从前面的介绍,我们知道,想要修改动画效果直接修改调用的动画函数就行了……

后面的话:

这篇博文记录自己思维多一点,其中很多方法的具体实现效果都还没写。现在边学习jquery边复习前面学过的Javascript,越来越觉得Javascript强大了(其实是自己弱爆了),好多东西都值得去深究,越来越觉得这个东西有意思了。

感谢大家阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jQuery的实现原理的模拟代码 -3 事件处理
Aug 03 Javascript
jquery中map函数与each函数的区别实例介绍
Jun 23 Javascript
使用js画图之饼图
Jan 12 Javascript
详解AngularJS中自定义指令的使用
Jun 17 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
Sep 09 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
Sep 09 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 Javascript
jquery拖拽效果完整实例(附demo源码下载)
Jan 14 Javascript
利用iscroll4实现轮播图效果实例代码
Jan 11 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
Sep 20 Javascript
JavaScript实现秒杀时钟倒计时
Sep 29 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
Mar 09 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
Oct 12 #Javascript
JS代码实现百度地图 画圆 删除标注
Oct 12 #Javascript
如何使用jquery实现文字上下滚动效果
Oct 12 #Javascript
微信js-sdk界面操作接口用法示例
Oct 12 #Javascript
微信小程序 location API接口详解及实例代码
Oct 12 #Javascript
webpack+vue.js实现组件化详解
Oct 12 #Javascript
微信小程序 加载 app-service.js 错误解决方法
Oct 12 #Javascript
You might like
打造计数器DIY三步曲(下)
2006/10/09 PHP
模仿OSO的论坛(二)
2006/10/09 PHP
php下正则来匹配dede模板标签的代码
2010/08/21 PHP
JavaScript的漂亮的代码片段
2013/06/05 Javascript
javascript中的if语句使用介绍
2013/11/20 Javascript
Javascript中使用parseInt函数需要注意的问题
2015/04/02 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
Bootstrap编写导航栏和登陆框
2016/05/30 Javascript
Bootstrap栅格系统学习笔记
2016/11/25 Javascript
JavaScript 字符串常用操作小结(非常实用)
2016/11/30 Javascript
jquery 正整数数字校验正则表达式
2017/01/10 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
基于JavaScript实现无缝滚动效果
2017/07/21 Javascript
Vue.js框架路由使用方法实例详解
2017/08/25 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
可能被忽略的一些JavaScript数组方法细节
2019/02/28 Javascript
mpvue微信小程序开发之实现一个弹幕评论
2019/11/24 Javascript
JS中多层次排序算法的实现代码
2021/01/06 Javascript
Python简单删除目录下文件以及文件夹的方法
2015/05/27 Python
Python基础教程之正则表达式基本语法以及re模块
2016/03/25 Python
Django 使用logging打印日志的实例
2018/04/28 Python
python使用BeautifulSoup与正则表达式爬取时光网不同地区top100电影并对比
2019/04/15 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
Jupyter安装链接aconda实现过程图解
2020/11/02 Python
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
印度最好的在线药品订购网站:PharmEasy
2018/11/30 全球购物
导师评语大全
2014/04/26 职场文书
2015年司机工作总结
2015/04/23 职场文书
员工年度工作总结2015
2015/05/18 职场文书
会议简讯范文
2015/07/20 职场文书
二手手机买卖合同范本(2019年版)
2019/10/28 职场文书
微软Win11 全新照片应用面向 Dev预览版推出 新版本上手体验图集
2022/09/23 数码科技