zoukankan      html  css  js  c++  java
  • 左右切换

    
    
    <div class="wapper">
      
     <div class="section">
      <h2 class="title">热门活动</h2>
      <div class="activity" class="movie" id="activity-slide">
       <a href="javascript:void(0)" class="pg_left ps_pre hide">pre</a>
       <a href="javascript:void(0)" class="pg_right ps_next" >next</a>
       <ul class="clearfix">
        <li><a href="javascript:;">1</a></li>
        <li><a href="javascript:;">2</a></li>
        <li><a href="javascript:;">3</a></li>
        <li><a href="javascript:;">4</a></li>
        <li><a href="javascript:;">5</a></li>
       </ul>
      </div>
     </div>
     
    </div>

    (function($){
    $.photolist=function(a){
    var w_li = a.find("li").width();
    var margin_li=parseInt(a.find("li").css("marginLeft"));//边距值
    var now = 0;
    var num = 0;
    var addli = 0;
    var lisize = a.find("ul li").size();
    var htmlall = a.find("ul").html();

    //判断每次滚动数量
    num=1;
    addlist();
    //点击滚动事件
    photoscroll();
    function addlist(){
    a.find("ul").css({"width":(w_li+margin_li*2)*(lisize+addli)});
    }
    function photoscroll(){
    a.find(".ps_pre").on("click",function(){
    if(now > 0){
    now--;
    if(now >= 0){
    a.find("ul").animate({"margin-left":-now*num*(w_li+margin_li*2)});
    }
    }
    });
    a.find(".ps_next").on("click",function(){
    if (now < (lisize+addli)/num - 3){
    console.log((lisize+addli)/num - 1);
    now++;
    if(now < (lisize+addli)/num){
    a.find("ul").animate({"margin-left":-now*num*(w_li+margin_li*2)});
    $('.ps_pre').show();
    }
    }
    });
    }
    }
    })(jQuery);
    $.photolist($("#activity-slide"));
  • 相关阅读:
    基于 Token 的身份验证
    学以致用二---配置Centos7.2 基本环境
    学以致用一 安装centos7.2虚拟机
    #!/usr/bin/env python与#!/usr/bin/python的区别
    centos7.2下安装python3.6.2
    Day1-python基础-变量常量
    Day1-python基础
    学python之路前的一些话
    Mybatis generator自动生成mybatis配置和类信息
    MyBatis Generator generatorConfig.xml配置详解
  • 原文地址:https://www.cnblogs.com/opcec/p/8275729.html
Copyright © 2011-2022 走看看