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实现文章图片弹出放大效果
Apr 06 jQuery
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
jQuery实现html可联动的百分比进度条
Mar 26 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
php mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
php堆排序实现原理与应用方法
2015/01/03 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
jQuery select自动选中功能实现方法分析
2016/11/28 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
自制简易打赏功能的实例
2017/09/02 Javascript
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
4 种滚动吸顶实现方式的比较
2019/04/09 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
2020/12/30 jQuery
基于vue的video播放器的实现示例
2021/02/19 Vue.js
js闭包和垃圾回收机制示例详解
2021/03/01 Javascript
[01:14:12]2018DOTA2亚洲邀请赛4.7 总决赛 LGD vs Mineski 第二场
2018/04/09 DOTA
Python中使用HTMLParser解析html实例
2015/02/08 Python
深入解析Python中的集合类型操作符
2015/08/19 Python
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
python中join()方法介绍
2018/10/11 Python
从DataFrame中提取出Series或DataFrame对象的方法
2018/11/10 Python
Python实现根据日期获取当天凌晨时间戳的方法示例
2019/04/09 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
python 实现线程之间的通信示例
2020/02/14 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
PyCharm2019 安装和配置教程详解附激活码
2020/07/31 Python
如何使用Python调整图像大小
2020/09/26 Python
使用python将微信image下.dat文件解密为.png的方法
2020/11/30 Python
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
2017/01/12 HTML / CSS
4S店售后客服自我评价
2014/04/09 职场文书
审计专业自荐信范文
2014/04/21 职场文书
初中班主任评语
2014/04/24 职场文书
文秘自荐信
2014/06/28 职场文书
学院党的群众路线教育实践活动第一阶段情况汇报
2014/10/25 职场文书
MySQL 使用SQL语句修改表名的实现
2021/04/07 MySQL