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解析获取JSON数据
Apr 08 jQuery
jquery与js实现全选功能的区别
Jun 11 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
jQuery实现可以计算进制转换的计算器
Oct 19 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
php页面防重复提交方法总结
2013/11/25 PHP
PHP递归调用数组值并用其执行指定函数的方法
2015/04/01 PHP
php+croppic.js实现剪切上传图片功能
2018/08/14 PHP
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
2010/04/15 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
2014/01/02 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
2014/03/19 Javascript
深入理解javascript构造函数和原型对象
2014/09/23 Javascript
jquery+php实现搜索框自动提示
2014/11/28 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
js实现表单提交后不重新刷新当前页面
2016/11/30 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
Vue前后端不同端口的实现方法
2018/09/19 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
[02:18]DOTA2英雄基础教程 育母蜘蛛
2014/01/20 DOTA
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
python操作mongodb根据_id查询数据的实现方法
2015/05/20 Python
转换科学计数法的数值字符串为decimal类型的方法
2018/07/16 Python
pycharm打开命令行或Terminal的方法
2019/01/16 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
浅谈Pycharm的项目文件名是红色的原因及解决方式
2020/06/01 Python
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
Nº21官方在线商店:numeroventuno.com
2019/09/26 全球购物
优秀社区干部事迹材料
2014/02/03 职场文书
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
珍惜水资源建议书
2014/03/12 职场文书
小学优秀班集体申报材料
2014/05/25 职场文书
学雷锋先进个人事迹
2014/05/26 职场文书
2014年中秋节活动总结
2014/08/29 职场文书
宾馆卫生管理制度
2015/08/06 职场文书
婚庆答谢词大全
2015/09/29 职场文书