zoukankan      html  css  js  c++  java
  • 点击按钮左右滚动,图片没有的时候按钮变成不可点

    菜鸟级别的前端制作写的jquery滚动代码,不废话了垃圾代码

    style

    *{ padding:0px; margin:0px;}
    li{ list-style:none;}
    #scroll,#scroll1{600px; margin:20px auto; position:relative; height:160px; overflow:hidden;}
    .list{
    height:120px;
    position:absolute;
    left:0px;
    top:20px;
    overflow:hidden;}
    .list li{
    100px;
    float:left;
    text-align:center;}
    .list li a,.list li p{
    display:block;
    90px;
    margin:0px auto;
    }
    .list li a{
    background:#F00;
    height:90px;}
    .list li p{
    height:30px;
    line-height:30px;}

    html

    <div id="scroll">
    <a class="btn_l" href="javascript:void(0)">向左</a>
    <a class="btn_r" href="javascript:void(0)">向右</a>
    <ul class="list">
    <li>
    <a href=""></a>
    <p>1111</p>
    </li>
    <li>
    <a href=""></a>
    <p>2222</p>
    </li>
    <li>
    <a href=""></a>
    <p>3333</p>
    </li>
    <li>
    <a href=""></a>
    <p>4444</p>
    </li>
    <li>
    <a href=""></a>
    <p>5555</p>
    </li>
    <li>
    <a href=""></a>
    <p>6666</p>
    </li>
    <li>
    <a href=""></a>
    <p>7777</p>
    </li>
    <li>
    <a href=""></a>
    <p>8888</p>
    </li>
    <li>
    <a href=""></a>
    <p>9999</p>
    </li>
    </ul>
    </div>

    js

    (function($){
    $.fn.scrollFn = function(btn1,btn2,ul){
    var word=['不可点击','向左','向右']
    var timer=null;
    var visibleLen = 6;//显示个数
    var Len = ul.find('li').length;//获取子元素的个数
    var liWidth=ul.find('li').width();//获取li宽度
    var ulWidth = parseInt(Len * liWidth);//获取整个ul的宽度
    if(parseInt(ul.css('left'))==-(Len%visibleLen)*liWidth){//默认加载的时候图片是否可点
    btn1.unbind( "click" );
    btn2.html(word[0]);
    }
    else if(parseInt(ul.css('left'))==0){//默认加载的时候图片是否可点
    btn2.unbind( "click" );
    btn2.html(word[0]);
    }
    //btn1点击 向左滚动
    btn1.click(function(){
    if(!ul.is(':animated')){//避免点击按钮过快产生图片滚动过快的bug
    if(parseInt(ul.css('left'))==-(Len%visibleLen)*liWidth){//当没有图片的时候显示不可点
    return false;
    }
    else{
    btn1.html(word[1])
    btn2.html(word[2]);
    ul.animate({
    left:'-='+liWidth
    },
    'slow',
    function(){
    if(parseInt(ul.css('left'))==-(Len%visibleLen)*liWidth){
    btn1.html(word[0]);
    }
    })
    }
    }

    })
    //btn2点击 向右滚动
    btn2.click(function(){
    //console.log(ul.css('left'))
    if(parseInt(ul.css('left'))==0){
    btn2.html(word[0]);
    }
    else{
    if(!ul.is(':animated')){
    //console.log(ul.css('left'))
    $(this).html(word[2]);
    btn1.html(word[1]);
    ul.animate({
    left:'+='+liWidth
    },
    'slow',
    function(){
    if(parseInt(ul.css('left'))==0){
    btn2.html(word[0]);
    }
    }
    )
    }
    }
    })
    }
    })(jQuery)
    $(function(){
    $('#scroll').scrollFn($('.btn_l'),$('.btn_r'),$('#scroll').find('ul'));
    })

  • 相关阅读:
    jsp页面数据分页模仿百度分页效果
    java EL表达式
    服务器端javascript——Rhino和Node
    HBase协处理器
    Hbase 计数器
    javascript正则表达式(二)——方法
    javascript正则表达式(一)——语法
    javascript模块化
    使用sqoop工具从oracle导入数据
    HBASE API操作问题总结
  • 原文地址:https://www.cnblogs.com/dm511418503/p/2953929.html
Copyright © 2011-2022 走看看