• EasySlider 图片滚动的JQuery插件的改版(支持多张图片同时显示)


    本来的只是支持一张的显示.经过我的一些小改.现在可以支持多张了.只要设置quantity这个属性就行了.默认为一张.

    效果图 

    我美感很差.不过足以说明,大家将就下.

    给全代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <HTML>
     
    <HEAD>
      
    <TITLE> New Document </TITLE>
      
    <META NAME="Generator" CONTENT="EditPlus">
      
    <META NAME="Author" CONTENT="">
      
    <META NAME="Keywords" CONTENT="">
      
    <META NAME="Description" CONTENT="">
      
    <SCRIPT LANGUAGE="JavaScript" type="text/javascript" src="JQuery/jquery_min.js"></SCRIPT>
      
    <SCRIPT LANGUAGE="JavaScript" type="text/javascript" src="JQuery/easySlider1.5.js"></SCRIPT>
      
    <link href="CSS/Pic.css" rel="stylesheet" type="text/css" />
      
    <script type="text/javascript">
          $(
    function(){//alert();
            $("#easyslider").easySlider(
            {
            auto:
    true,//是否一开始自动滑动
            prevId:"prevpic",
            nextId:
    "nextpic",//下一张的Id,随便你起.用来触发click事件.例如我这里的:<a href="#;" id="nextpic">下一张</a>
            continuous:true,//是否连续,即到最后一张,点击下一张后会跳到第一张,反之亦然
            quantity:2//显示的图片个数
            }
            );
        
        });
      
    </script>
     
    </HEAD>

     
    <BODY>
      
    <div class="picshow" id="easyslider">
        
    <ul>                
            
    <li><href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a></li>
            
    <li><href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
            
    <li><href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>
            
    <li><href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
            
    <li><href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>            
        
    </ul>
      
    </div>
      
    <div class="aclick">
          
    <href="#;" id="prevpic">上一张</a><href="#;" id="nextpic">下一张</a>
      
    <div>
     
    </BODY>
    </HTML>


    例子在这里下载: /Files/SeaSun/easySliderAmend.zip

    JS文件在这里下载: /Files/SeaSun/easySlider改后的.zip

    如果有什么问题,不要找我啊.哈哈..我不负责任的啊.高手请路过. 


  • 相关阅读:
    机器学习任务攻略
    2.0 线性模型_李宏毅2021
    PyTorch
    jupyter切换虚拟环境
    python中yield的用法详解——最简单,最清晰的解释
    Full卷积、Same卷积、Valid卷积、带深度的一维卷积
    计算机环境变量的配置,以java为例以及eclipse简要设置
    conda创建/移除虚拟环境
    bak
    JSoup抓取本地页面
  • 原文地址:https://www.cnblogs.com/SeaSun/p/1602830.html
Copyright © 2020-2023  润新知