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插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
jQuery ajax动态生成table功能示例
Jun 14 jQuery
jquery加载单文件vue组件的方法
Jun 20 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 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的面试题集,附我的答案和分析(一)
2006/11/19 PHP
PHP合并数组+与array_merge的区别分析
2010/08/01 PHP
php过滤所有恶意字符(批量过滤post,get敏感数据)
2014/03/18 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
JSON PHP中,Json字符串反序列化成对象/数组的方法
2018/05/31 PHP
在Laravel中使用MongoDB的方法示例
2019/11/11 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
javascript[js]获取url参数的代码
2007/10/17 Javascript
THREE.JS入门教程(4)创建粒子系统
2013/01/24 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
node.js中的url.parse方法使用说明
2014/12/10 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
2015/12/01 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
自制微信公众号一键排版工具
2016/09/22 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
vue中v-model的应用及使用详解
2018/06/27 Javascript
实现elementUI表单的全局验证的方法步骤
2019/04/29 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
python使用PythonMagick将jpg图片转换成ico图片的方法
2015/03/26 Python
python smtplib模块自动收发邮件功能(二)
2018/05/22 Python
python、Matlab求定积分的实现
2019/11/20 Python
python输出数组中指定元素的所有索引示例
2019/12/06 Python
Python面向对象封装操作案例详解 II
2020/01/02 Python
css3 flex布局 justify-content:space-between 最后一行左对齐
2020/01/02 HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
任意存:BOXFUL
2018/05/21 全球购物
土木工程专业个人求职信
2013/12/30 职场文书
集团公司党的群众路线教育实践活动工作总结
2014/03/03 职场文书
公司委托书怎么写
2014/08/02 职场文书
学校开学标语
2014/10/06 职场文书
政风行风整改报告
2014/11/06 职场文书
2015元旦节寄语
2014/12/08 职场文书
初三英语教学反思
2016/02/15 职场文书
Vue深入理解插槽slot的使用
2022/08/05 Vue.js