好的，所以我使用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);
}
}