0

我似乎找不到 jQuery 理解元素当前位置的方法。我使用下面的 html 和 css、jQuery 滚动浏览一些标记（就像一个画廊 - 但我不想使用任何插件）但需要找到最后和第一个位置，因此它不会持续让某人将内容滚动出页面 - 目前我只是在应用操作时为父容器着色，但会实时将其换出，以不显示或灰显分页/滚动按钮。

滚动通过调整 209px 或 -209px 来工作，只是不了解第一个和最后一个元素（li）的位置。如果没有更多以前的 li，我试图停止上一个按钮的工作，反之亦然 - 就像我说现在只为父级着色以供视觉使用。当它们动态吐出时，其中可能有任意数量的 li。附上小提琴 URL： http: //jsfiddle.net/jambo/zLSUT/ 抱歉，此演示中的图像无法正常工作。所以回顾一下 - 需要在没有更多内容可查看的方向停止分页。希望这是有道理的，提前谢谢你。

css

    .smartH{
    float: left; position: relative;
    width:10000px; height: 80px; padding: 5px 0;
    font-family: arial;
    background: #fff;
    }
    .smartH a{
    float: left;
      text-decoration: none; cursor:pointer;
    }
    .smartH img{
    float: left;
    width: 100px; height: 80px;
    border: none;
    }
      .smartH .title{
     float: right;
      margin: 0 5px; width:90px;
    font-weight: bold; font-size: 13px; color: #000; line-height: 1.4; text-align: left;
    }
    .smartH .text{
    float: right;
    margin: 5px 5px 0; width:90px; 
    font-size: 12px; color: #000; line-height: 1.1; text-align: left;
    }

    .smartAd{
    float:left;
    width:627px; overflow: hidden;
     }

     .smartH li{
    position:relative;
    float:left; display: inline;
    height:80px; width:200px; padding:0 4px 0 5px;
    list-style-type: none;
     }
     .smartAd .paginate{
    float:right
     }
     .smartAd i{
    cursor:pointer;
    }

jQuery

    $( function () {
    var posF = $(".smartH li.first").position(); 
    var posL = $(".smartH li.last").position();     

    $("a#next").click( function () {
        $(".smartH li").stop().animate({
        left: "-=209px",
        }, 500 );
        if (posL.left == -627){
            $(".smartH").css("background", "blue");   
        }
        return false;
    });
    $("a#prev").click( function () {
        $(".smartH li").stop().animate({
        left: "+=209px",
        }, 500 );
        if (posF.left == 0){
           $(".smartH").css("background", "green");   
        }

        return false;
     }); 

    });

html

<div class="smartAd">
<ul class="smartH"><!-- posit abs?  -->
    <li class="first">
        <a href="http://www.google.com" target="_blank">
            <img src="http://advertising.co.uk/wallpaper/blinds.gif" alt="blinds" />
            <p class="title">Call for a free quote today</p>
            <p class="text">Best value blinds in Lincolnshire!</p>
        </a>
    </li>
    <li>
        <a href="http://www.google.com" target="_blank">
            <img src="http://advertising.co.uk/wallpaper/coach.gif" alt="coach" />
            <p class="title">Experience great days out</p>
            <p class="text">Great value coach trips</p>
        </a>
    </li>
    <li>
        <a href="http://www.google.com" target="_blank">
            <img src="http://advertising.co.uk/wallpaper/coffee.gif" alt="coffee" />
            <p class="title">Need beans?</p>
            <p class="text">We have a great variety of beans at great prices</p>
        </a>
    </li>
    <li>
        <a href="http://www.google.com" target="_blank">
            <img src="http://advertising.co.uk/wallpaper/creditcard.gif" alt="credit card" />
            <p class="title">Got bad credit?</p>
            <p class="text">We can help you boost your rating</p>
        </a>
    </li>
    <li>
        <a href="http://www.google.com" target="_blank">
            <img src="http://advertising.co.uk/wallpaper/mobility.gif" alt="mobility" />
            <p class="title">Struggling to get around?</p>
            <p class="text">Great value scooters!</p>
        </a>
    </li>
    <li class="last">
        <a href="http://www.google.com" target="_blank">
            <img src="http://advertising.co.uk/wallpaper/plumber.gif" alt="plumber" />
            <p class="title">Got a leak?</p>
            <p class="text">Ring for reliable and friendly plumbers</p>
        </a>
    </li>       
</ul><!-- // ul.smartH -->
<span class="paginate">
    <a href="" class="icon" id="prev">Prev 1-</a>
    <a href="" class="icon" id="next">- Next 1</a>      
</span>
  </div>
4

2 回答 2

0

好的，所以我使用jQuery使用jQuery“scrollTo”（所有元素在盒子模型中都有固定的外部尺寸）按照元素宽度或高度的数量移动到下一个兄弟元素，然后添加“动画”速度来转换这个. 效果很好。我在网上苦苦搜索了几天，但无法获得所需的解决方案。我希望随附的代码对其他人有很大用处。我试图让它尽可能直截了当——没有插件的简单 jQuery 库——显示 3 个内联广告，然后单击上一个/下一个按钮滚动到下一个。 http://jsfiddle.net/jambo/eU3jk/13/

html
<!-- jamie paterson -->
<div class="smartAd">
<ul class="smartH">
<!-- posit abs? -->
<li>    
<a href="#">
<img src="http://advertising.co.uk/wallpaper/blinds.gif" alt="blinds" />
<p class="title">First Hampshire Rose</p>
<p class="text">For great value food with friends</p>
</a>
</li>
<li>    
<a href="#">
<img src="http://advertising.co.uk/wallpaper/coach.gif" alt="blinds" />
            <p class="title">Nara Sushi Restaurant</p>
            <p class="text">Healthy & appetising food</p>
        </a>

    </li>
    <li>    
        <a href="#">
            <img src="http://advertising.co.uk/wallpaper/coffee.gif" alt="blinds" />
            <p class="title">Alexandra Sports</p>
            <p class="text">Running & fitness retailers</p>
        </a>

    </li>
    <li>    
        <a href="#">
            <img src="http://advertising.co.uk/wallpaper/blinds.gif" alt="blinds" />
            <p class="title">Blades Barbers</p>
            <p class="text">£10 off Intensive Muscle Release</p>
        </a>

    </li>
    <li>    <a href="#">
            <img src="http://advertising.co.uk/wallpaper/coffee.gif" alt="blinds" />
            <p class="title">Aerial Connections</p>
            <p class="text">Audio & visual entertainment</p>
        </a>

    </li>
    <li>    
        <a href="#">
            <img src="http://advertising.co.uk/wallpaper/coffee.gif" alt="blinds" />
            <p class="title">Highgrove Windows</p>
            <p class="text">10yr guarantee as standard</p>
        </a>

    </li>
    <li>    
        <a href="#">
            <img src="http://advertising.co.uk/wallpaper/coach.gif" alt="blinds" />
            <p class="title">seven</p>
            <p class="text">Best value blinds in Lincolnshire!</p>
        </a>

    </li>
    <li>    
        <a href="#">
            <img src="http://advertising.co.uk/wallpaper/blinds.gif" alt="blinds" />
            <p class="title">eight</p>
            <p class="text">Best value blinds in Lincolnshire!</p>
        </a>

    </li>
    <li>    
        <a href="#">
            <img src="http://advertising.co.uk/wallpaper/blinds.gif" alt="blinds" />
            <p class="title">nine</p>
            <p class="text">Best value blinds in Lincolnshire!</p>
        </a>

    </li>
    <li>    
        <a href="#">
            <img src="http://advertising.co.uk/wallpaper/coach.gif" alt="blinds" />
            <p class="title">Last</p>
            <p class="text">Best value blinds in Lincolnshire!</p>
        </a>

    </li>        
</ul>
<div class="nav">
    <button class="prev" title="previous"><</button>
    <button class="next" title="next">></button>
</div>
</div>
<!-- // smartAd -->

<br /><br /><br /><br /><br />

<div class="smartAdV">
<ul class="smartV">
    <!-- posit abs? -->
    <li>    
        <a href="#">
            <img src="http://advertising.co.uk/wallpaper/blinds.gif" alt="blinds" />
            <p class="title">First Hampshire Rose</p>
            <p class="text">For great value food with friends</p>
        </a>

    </li>
    <li>    
        <a href="#">
            <img src="http://advertising.co.uk/wallpaper/coach.gif" alt="blinds" />
            <p class="title">Nara Sushi Restaurant</p>
            <p class="text">Healthy & appetising food</p>
        </a>

    </li>
    <li>    
        <a href="#">
            <img src="http://advertising.co.uk/wallpaper/coffee.gif" alt="blinds" />
            <p class="title">Alexandra Sports</p>
            <p class="text">Running & fitness retailers</p>
        </a>

    </li>
    <li>    
        <a href="#">
            <img src="http://advertising.co.uk/wallpaper/blinds.gif" alt="blinds" />
            <p class="title">Blades Barbers</p>
            <p class="text">£10 off Intensive Muscle Release</p>
        </a>

    </li>
    <li>    
        <a href="#">
            <img src="http://advertising.co.uk/wallpaper/coffee.gif" alt="blinds" />
            <p class="title">Aerial Connections</p>
            <p class="text">Audio & visual entertainment</p>
        </a>

    </li>
    <li>    
        <a href="#">
            <img src="http://advertising.co.uk/wallpaper/coffee.gif" alt="blinds" />
            <p class="title">Highgrove Windows</p>
            <p class="text">10yr guarantee as standard</p>
        </a>

    </li>
    <li>    <a href="#">
            <img src="http://advertising.co.uk/wallpaper/coach.gif" alt="blinds" />
            <p class="title">seven</p>
            <p class="text">Best value blinds in Lincolnshire!</p>
        </a>

    </li>
    <li>    
        <a href="#">
            <img src="http://advertising.co.uk/wallpaper/blinds.gif" alt="blinds" />
            <p class="title">eight</p>
            <p class="text">Best value blinds in Lincolnshire!</p>
        </a>

    </li>
    <li>    
        <a href="#">
            <img src="http://advertising.co.uk/wallpaper/blinds.gif" alt="blinds" />
            <p class="title">nine</p>
            <p class="text">Best value blinds in Lincolnshire!</p>
        </a>

    </li>
    <li>    
        <a href="#">
            <img src="http://advertising.co.uk/wallpaper/coach.gif" alt="blinds" />
            <p class="title">Last</p>
            <p class="text">Best value blinds in Lincolnshire!</p>
        </a>

    </li>        
</ul>
<div class="nav">
    <span class="wrap">
        <button class="next" title="next">v</button>        
        <button class="prev" title="previous">^</button>
    </span>
</div>
</div>
<!-- // smartAdV -->

    css
    /* jamie paterson */
    /* start horizontal */
    .smartAd {
    float:left; position:relative; /* pos:rel for IE7 only when hasLayout init */
    width:627px; overflow:hidden;
    }
    .smartH {
    width:10000px; position:relative; float:left;
    height: 80px; padding: 0; margin:0;
    font-family: arial;
    background: #fff;
    }
.smartH img, .smartV img{
    float: left;
    width: 100px; height: 70px;
    border: none;
}
.smartH .title{
    float: right;
    margin: 0 0 0 5px; width:100px;
    font-weight: bold; font-size: 13px; color: #000; line-height: 1.4; text-align: left;
}
.smartH .text{
    float: right;
    margin: 5px 5px 0; width:95px; 
    font-size: 12px; color: #000; line-height: 1.1; text-align: left;
}
.smartH a, .smartV a{
    float: left;
    text-decoration: none; cursor:pointer;
}
.smartH li {
    display: inline-block; float:left;
    width:205px; margin:0 4px 0 0; height: 70px; padding: 5px 0;
}
.smartAd .nav {
    float: right;
    width:33px; margin: 10px 0 0;
}
button{
    border: none; cursor: pointer;
    background-image:url("images/carousel-arrows.gif");
}
.prev{
    float: left;
    width:16px; height:16px; margin: 0 1px 0 0;
    background-position: 0 16px;
}
.next{
    float: right;
    width:16px; height:16px;
    background-position: 0 0;
}
/* end Horizontal Style */
/* start Vertical style */
.smartAdV {
    float:left; clear:left; position:relative; /* pos:rel for IE7 only when hasLayout init */
    height:616px; padding: 0 10px; overflow:hidden;
}
.smartV {
    width:100px; position:relative; float:left;
    height: 10000px; padding: 0; margin:0;
    font-family: arial;
    background: #ebebeb;
}
.smartV .title{
    float: left;
    margin: 8px 0; width:100px;
    font-weight: bold; font-size: 13px; color: #000; line-height: 1.4; text-align: left;
}
.smartV .text{
    float: right;
    margin: 5px 0 10px; width:100px; 
    font-size: 12px; color: #000; line-height: 1.4; text-align: left;
}
.smartV li {
    display: inline-block; float:left;
    width:100px; margin:0 0 8px; height: 180px; padding: 10px 0 0;
    border-top: 1px solid #ebebeb; border-bottom:1px solid #ebebeb;
    background: #fff;
}
.smartAdV .nav {
    float: left; position:relative; left:-100px; bottom: -600px;
    width:100px; margin: 0;
    background:#fff;
}
.smartAdV .wrap{
    float: right;
    width:33px;
}
.smartAdV .prev{
    float: left;
    width:16px; height:16px; margin: 0 1px 0 0;
    background-position: 16px 0;
}
.smartAdV .next{
    float: right;
    width:16px; height:16px;
    background-position: 16px 16px;
}
jQuery
// jamie paterson //
//adding classes via jQuery instead of direct for ease - some of these variables not used as var's
var currentElement = $(".smartH li:first"); // sets first current horiz
var lastElementThree = $(".smartH").children("li").eq(-3).addClass("lastThird"); //horiz
var firstElementOne = $(".smartH").children("li").eq(0).addClass("firstOne"); //horiz
var currentElementV = $(".smartV li:first"); // sets first current vert
var lastElementThreeV = $(".smartV").children("li").eq(-3).addClass("lastThirdV"); //vertical
var firstElementOneV = $(".smartV").children("li").eq(0).addClass("firstOneV"); //vertical
var prevBtn = $(".smartAd .prev, .smartAdV .prev").prop('disabled', true).css({ opacity: 0.5 }); // hide but show on scroll
// HORIZONTAL section
$(".smartAd .prev").click(function () {
    currentElement = currentElement.prev();
    scrollTo(currentElement);
    $(currentElement).nextAll().slice(2, 3).css("display", "none"); //move back one place/element and hide prev li
    $(".smartAd .next").prop('disabled', false).css({ opacity: 1.0 }); 
    $(".smartH").stop().animate({
        left: "+=209px" // block li's are white space dependent 
        }, 500 );
    e.preventDefault();
});
$(".smartAd .next").click(function () {
    currentElement = currentElement.next();
    scrollTo(currentElement);
    $(currentElement).nextAll().slice(0, 2).css("display", "inline-block");//move on one place/element and show next li
    $(".smartAd .prev").prop('disabled', false).css({ opacity: 1.0 }); 
    $(".smartH").stop().animate({
        left: "-=209px" // block li's are white space dependent
        }, 500 );
    e.preventDefault();
});
// VERTICAL section
$(".smartAdV .prev").click(function () {
    currentElementV = currentElementV.prev();
    scrollTo(currentElementV);
    $(currentElementV).nextAll().slice(2, 3).css("display", "none"); //move back one place/element and hide prev li
    $(".smartAdV .next").prop('disabled', false).css({ opacity: 1.0 }); 
    $(".smartV").stop().animate({
        top: "+=200px" // block li's are white space dependent 
        }, 500 );
    e.preventDefault();
});
$(".smartAdV .next").click(function () {
    currentElementV = currentElementV.next();
    scrollTo(currentElementV);
    $(currentElementV).nextAll().slice(0, 2).css("display", "inline-block");//move on one place/element and show next li
    $(".smartAdV .prev").prop('disabled', false).css({ opacity: 1.0 }); 
    $(".smartV").stop().animate({
        top: "-=200px" // block li's are white space dependent
        }, 500 );
    e.preventDefault();
});
    function scrollTo(element) { // includes/combined horiz and vert - left action and top action respectively
        if ($(currentElement).hasClass("lastThird")){
           $(".smartAd .next").prop('disabled', true).css({ opacity: 0.5 }); 
           $(window).scrollLeft(element.position().left);
        }
        else if ($(currentElement).hasClass("firstOne")){
           $(".smartAd .prev").prop('disabled', true).css({ opacity: 0.5 });
           $(window).scrollLeft(element.position().left);
        } 
        else{
        $(window).scrollLeft(element.position().left);
        }        
        if ($(currentElementV).hasClass("lastThirdV")){ // vert
           $(".smartAdV .next").prop('disabled', true).css({ opacity: 0.5 });
           $(currentElementV).children().scrollTop(element.position().top);
        }
        else if ($(currentElementV).hasClass("firstOneV")){ // vert
           $(".smartAdV .prev").prop('disabled', true).css({ opacity: 0.5 });
           $(currentElementV).children().scrollTop(element.position().top);
        } 
        else{ // vert
            $(currentElementV).children().scrollTop(element.position().top);
        }
    }
于 2013-04-15T12:46:30.417 回答
0

您使用错误的语法来指定第一个和最后一个孩子，它应该是：

var posF = $(".smartH li:first-child").position(); 
var posL = $(".smartH li:last-child").position();

如果遵循 CSS 伪选择器的路线。

于 2013-04-09T13:10:00.590 回答