jQuery插件实现图片轮播效果


Posted in jQuery onOctober 19, 2020

使用插件实现图片轮播效果:

通过设置传入的参数autoScroll,numControl和arrowControl的值可以显示不同的效果

图片轮播效果一:设置autoScroll=true,numControl=false,arrowControl=false,图片自动轮播,当鼠标进入时停止轮播,当鼠标移出时继续轮播;

图片轮播效果二:设置autoScroll=true,numControl=ture,arrowControl=false,图片自动轮播,同时当鼠标指向导航数字时显示相应的图片;

图片轮播效果三:设置autoScroll=true,numControl=false,arrowControl=true,图片自动轮播,当鼠标点击左右按钮时,显示相应的图片;

动画效果如下:

jQuery插件实现图片轮播效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>图片轮播</title>
  <script type="text/javascript" src="http://libs.badu.com/jquery//1.11.1/jquery.min.js.js"></script>
  <style type="text/css">
    *{
      margin: 0px;
      padding: 0px;
      list-style: none;
    }
    .slider{
      position: relative;
      margin: 50px auto;
      width: 800px;
      height: 200px;
      overflow: hidden;
    }
    .slider ul{
      position: absolute;
      width: 3200px;
      height: 200px;
    }
    .slider ul li{
      float: left;
      width: 800px;
      height: 200px;
 
    }
    .slider ul li img{
      width: 800px;
      height: 200px;
    }
    .slider .num{
      position: absolute;
 
      right: 20px;
      bottom: 20px;
    }
    .slider .num span{
      display: block;
      float: left;
      margin-right: 10px;
      width: 30px;
      height: 30px;
      line-height: 30px;
      color: #fff;
      background: #ccc;
      text-align: center;
      opacity: 0.6;
    }
    .slider .num span.active{
      background: #1D5D76;
    }
    .left{
      width:56px;
      height: 87px;
      position: absolute;
      left:10px;
      top:57px;
      background: url('images/left-arrow.png');
    }
    .right{
      width:56px;
      height: 87px;
      position: absolute;
      right:10px;
      top:57px;
      background: url('images/right-arrow.png');
    }
 
  </style>
</head>
<body>
<div id="slider1" class="slider">
  <ul>
    <li><img src="images/1.jpg" alt="图片"></li>
    <li><img src="images/2.jpg" alt="图片"></li>
    <li><img src="images/3.jpg" alt="图片"></li>
    <li><img src="images/4.jpg" alt="图片"></li>
  </ul>
</div>
<div id="slider2" class="slider">
  <ul>
    <li><img src="images/1.jpg" alt="图片"></li>
    <li><img src="images/2.jpg" alt="图片"></li>
    <li><img src="images/3.jpg" alt="图片"></li>
    <li><img src="images/4.jpg" alt="图片"></li>
  </ul>
</div>
<div id="slider3" class="slider">
  <ul>
    <li><img src="images/1.jpg" alt="图片"></li>
    <li><img src="images/2.jpg" alt="图片"></li>
    <li><img src="images/3.jpg" alt="图片"></li>
    <li><img src="images/4.jpg" alt="图片"></li>
  </ul>
</div>
<script type="text/javascript" src="jQuery.slider.js"></script>
<script>
  $(document).ready(function(){
    $("#slider1").slider();
    $("#slider2").slider({
      //autoScroll:false,
      numCtroll:true
 
    });
    $("#slider3").slider({
      //autoScroll:false,
      arrowControl:true
    });
  })
</script>
</body>
</html>

jQuery.slider.js

;(function ($) {
  $.fn.slider=function (options) {
    var defaults={
      autoScroll: true,
      speed:2000,
      numCtroll: false,
      arrowControl: false
    }
    var settings=$.extend({},defaults,options),
      slider=$(this),
      ul=slider.find("ul"),
      li=ul.find("li"),
      img=li.find("imf"),
      width=slider.width(),
      height=slider.height(),
      len=li.length,
      timer=null,
      index=0;
    // ul.css({width:len*width,height:height});
    // li.add(img).css({width:width,height:height});
    //判断是否自动轮播
    if (settings.autoScroll) {
 
      timer=setInterval(pic,settings.speed);
    }
    //判断是否显示数字导航,并通过数字导航控制显示图片
    if (settings.numCtroll){
      slider.append("<div class='num'></div>")
      for (var i=0;i<len;i++){
        slider.find(".num").append("<span>"+(i+1)+"</span>");
      }
      slider.find(".num span").eq(0).addClass("active");
      slider.find(".num span").on("mouseover",function () {
        $(this).addClass("active").siblings().removeClass("active");
        showPic($(this).index());
      })
    }
    //判断是够显示左右按钮,并通过左右按钮控制显示图片
    if(settings.arrowControl){
 
      slider.append("<span class='left'></span><span class='right'></span>");
      var prev = slider.find(".left");
      var next = slider.find(".right");
 
      prev.on("click",function(){
        index-=1
        if(index == -1 ){
          index=len-1;
        }
        showPic(index);
      })
 
      next.on("click",function(){
        index+=1
        if(index==len){
          index=0;
        }
        showPic(index);
      })
 
    }
    //鼠标移入时停止自动轮播
    slider.on("mouseover",function(){
      clearInterval(timer);
    });
    //鼠标移出时,检查autoScroll的值若为true则继续自动轮播
    slider.on("mouseleave",function(){
      if (settings.autoScroll) {
 
        timer=setInterval(pic,settings.speed);
      }
    });
    //设置index的值,并显示相应的图片
    function pic(){
      index++;
      if (index==len){
        index=0;
      }
      showPic(index);
    }
    //显示正确的图片
    function showPic(index){
      ul.animate({
        left:-index*width
      });
      slider.find(".num span").eq(index).addClass("active").siblings().removeClass("active");
 
 
    }
  }
})(jQuery);

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

jQuery 相关文章推荐
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
jQuery实现购物车全功能
Jan 11 jQuery
jquery插件实现轮播图效果
Oct 19 #jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 #jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 #jQuery
jquery简易手风琴插件的封装
Oct 13 #jQuery
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 #jQuery
jQuery实现二级导航菜单的示例
Sep 30 #jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 #jQuery
You might like
Drupal简体中文语言包安装教程
2014/09/27 PHP
php+mysql数据库查询实例
2015/01/21 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
php支持断点续传、分块下载的类
2016/05/02 PHP
PHP 中TP5 Request 请求对象的实例详解
2017/07/31 PHP
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
2010/11/05 Javascript
javascript 二进制运算技巧解析
2012/11/27 Javascript
js调试系列 初识控制台
2014/06/18 Javascript
jquery马赛克拼接翻转效果代码分享
2015/08/24 Javascript
学习JavaScript设计模式之享元模式
2016/01/18 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
2017/11/14 jQuery
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
vue头部导航动态点击处理方法
2018/11/02 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
2018/12/09 Javascript
浅谈KOA2 Restful方式路由初探
2019/03/14 Javascript
Python中使用Tkinter模块创建GUI程序实例
2015/01/14 Python
图文详解WinPE下安装Python
2016/05/17 Python
Bottle框架中的装饰器类和描述符应用详解
2017/10/28 Python
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
如何使用Python自动控制windows桌面
2019/07/11 Python
Python 使用元类type创建类对象常见应用详解
2019/10/17 Python
使用Django和Postgres进行全文搜索的实例代码
2020/02/13 Python
Python 使用生成器代替线程的方法
2020/08/04 Python
英国领先的维生素和营养补充剂直接供应商:Healthspan
2019/04/22 全球购物
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
毕业生就业自荐书
2013/12/15 职场文书
毕业自荐信
2013/12/16 职场文书
关爱女孩行动实施方案
2014/03/13 职场文书
社区消防工作实施方案
2014/03/21 职场文书
教师求职信
2014/06/17 职场文书
幼儿园毕业典礼家长致辞
2015/07/29 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
宣传部部长竞选稿
2015/11/21 职场文书
导游词之山东八大关
2019/12/18 职场文书