zoukankan      html  css  js  c++  java
  • JQ_简单版图像点击切换(不是无缝)

    /*css*/

    .site{800px;margin:0 auto;padding-top:50px;}
    .pro{height:200px;overflow:hidden;600px;margin:0 auto; position:relative;}
    .pro ul{6000px;position:absolute;left:0;}
    .pro li{float:left;font-size:0;}
    .button{height:100px;}
    .button p{text-align:center;line-height:100px;font-size:20px;}
    .button b:hover{cursor:pointer;}
    .button b.hide{visibility:hidden;}

    /*jq*/

    var imgClick = function(a){
        this.option=a;
        this.base();
        }
    imgClick.prototype = {
        base: function(){
            var butle = $(this.option.imgCle);
            var butri = $(this.option.imgCri);
            var proul = $(this.option.imgRun);
            var fazhi = this.option.fazhi || 0;
            var dire  = this.option.dire || "left";
            switch(dire){
                case "left" : var liW = proul.find("li").eq(0).outerWidth(true);
                              var ulW = liW * proul.find("li").length;
                              var ulwP = proul.parent().width();
                break;
                case "top" : var liW = proul.find("li").eq(0).outerHeight(true);
                             var ulW = liW * proul.find("li").length;
                             var ulwP = proul.parent().height();
                break;
                }
            var x = ulW - ulwP - fazhi;
            var juli = 0;
            butle.click(function(){
                if(juli < 0 && !proul.is(":animated")){
                    juli = juli + liW;
                    switch(dire){
                        case "left" : proul.animate({left:juli},200);break;
                        case "top" : proul.animate({top:juli},200);break;
                        }
                    }
                });
            butri.click(function(){
                if(juli>-x && !proul.is(":animated")){
                    juli = juli - liW;
                    switch(dire){
                        case "left" : proul.animate({left:juli},200);break;
                        case "top" : proul.animate({top:juli},200);break;
                        }
                    };
                });
            }
        }
    new imgClick({
        imgRun     : "#imgShow",
        imgCle     : "#left",
        imgCri     : "#right",
        fazhi    : 20,
        dire    : "left"
        });

    /*html*/

    <div class="site">
     <div class="pro">
     <ul id="imgshow">
       <li><img src="images/i01.jpg" /></li>
       <li><img src="images/i02.jpg" /></li>
       <li><img src="images/i03.jpg" /></li>
       <li><img src="images/i04.jpg" /></li>
       <li><img src="images/i05.jpg" /></li>
       <li><img src="images/i06.jpg" /></li>   
     </ul>
     </div>
     <div class="button">
     <p><b class="left" id="left">&laquo;</b>&nbsp;<b class="right" id="right">&raquo;</b></p>
     </div>
    </div>

  • 相关阅读:
    已经菜到不行了 PAT 1010. Radix (25)
    容斥 或者 单调栈 hihocoder #1476 : 矩形计数 和 G. Snake Rana 2017 ACM Arabella Collegiate Programming Contest
    React的Context的使用方法简介
    canvas的进阶
    canvas的基础入门
    CSS3 中弹性盒模型--容器的属性
    creat-react-app搭建的项目中按需引入antd以及配置Less和如何修改antd的主题色
    D3.js 动画 过渡效果 (V3版本)
    D3.js(v3)+react 制作 一个带坐标轴与比例尺的折线图
    D3.js 弦生成器(V3版本)
  • 原文地址:https://www.cnblogs.com/somesayss/p/2498014.html
Copyright © 2011-2022 走看看