2
Updated Demo : 任何幫助非常感謝!我有一個需要計數器滑塊的jQuery旋轉木馬/滑塊
我開發了一個帶有垂直縮略圖的旋轉木馬/滑塊,它工作得非常好,但我有一個額外的要求,即必須顯示幻燈片數量,每當用戶滾動下一組數量時都必須更新。 就像yahoo.com滑塊(https://www.yahoo.com/news/)向上箭頭&。
HTML:
<div id="featured">
<!-- First Content -->
<div id="fragment-1" class="ui-tabs-panel" style="">
<a href="#" target="_blank">
<img src="images/image1.jpg" alt="">
<div class="info">
<h2><a href="#">15+ Excellent High Speed Photographs</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#">read more</a></p>
</div>
</a>
</div>
<!-- Second Content -->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<a href="#" target="_blank">
<img src="images/image2.jpg" alt="">
<div class="info">
<h2><a href="#">20 Beautiful Long Exposure Photographs</a></h2>
<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#">read more</a></p>
</div>
</a>
</div>
<!-- Third Content -->
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
<a href="#" target="_blank">
<img src="images/image3.jpg" alt="">
<div class="info">
<h2><a href="#">35 Amazing Logo Designs</a></h2>
<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#">read more</a></p>
</div>
</a>
</div>
<!-- Fourth Content -->
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
<a href="#" target="_blank">
<img src="images/image4.jpg" alt="">
<div class="info">
<h2><a href="#">Create Vintage Photograph in Photoshop</a></h2>
<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#">11read more</a></p>
</div>
</a>
</div>
<!-- 5 Content -->
<div id="fragment-5" class="ui-tabs-panel ui-tabs-hide" style="">
<a href="#" target="_blank">
<img src="images/image4.jpg" alt="">
<div class="info">
<h2><a href="#">Create Vintage Photograph in Photoshop</a></h2>
<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#">11read more</a></p>
</div>
</a>
</div>
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item" id="nav-fragment-1">
<a class="nav-bg-full" href="#fragment-1">
<div class="img-bg hide-for-small" style="background:url('images/image1-small.jpg') no-repeat; width:100%; background-size: 100%; position:relative">
<span>15+ Excellent High Speed Photographs</span>
</div>
<div class="show-for-small">
<div class="mob-img">
<img src="images/image1-small.jpg" alt="" />
</div>
<span>15+ Excellent High Speed Photographs</span>
</div>
</a>
</li>
<li class="ui-tabs-nav-item" id="nav-fragment-2">
<a class="nav-bg-full" href="#fragment-2">
<div class="img-bg hide-for-small" style="background:url('images/image2-small.jpg') no-repeat; width:100%; background-size: 100%; position:relative">
<span>15+ Excellent High Speed Photographs</span>
</div>
<div class="show-for-small">
<div class="mob-img">
<img src="images/image2-small.jpg" alt="" />
</div>
<span>15+ Excellent High Speed Photographs</span>
</div>
</a>
</li>
<li class="ui-tabs-nav-item" id="nav-fragment-3">
<a class="nav-bg-full" href="#fragment-3">
<div class="img-bg hide-for-small" style="background:url('images/image3-small.jpg') no-repeat; width:100%; background-size: 100%; position:relative">
<span>15+ Excellent High Speed Photographs</span>
</div>
<div class="show-for-small">
<div class="mob-img">
<img src="images/image3-small.jpg" alt="" />
</div>
<span>15+ Excellent High Speed Photographs</span>
</div>
</a>
</li>
<li class="ui-tabs-nav-item" id="nav-fragment-4">
<a class="nav-bg-full" href="#fragment-4">
<div class="img-bg hide-for-small" style="background:url('images/image4-small.jpg') no-repeat; width:100%; background-size: 100%; position:relative">
<span>15+ Excellent High Speed Photographs</span>
</div>
<div class="show-for-small">
<div class="mob-img">
<img src="images/image4-small.jpg" alt="" />
</div>
<span>15+ Excellent High Speed Photographs</span>
</div>
</a>
</li>
<li class="ui-tabs-nav-item" id="nav-fragment-5">
<a class="nav-bg-full" href="#fragment-5">
<div class="img-bg hide-for-small" style="background:url('images/image1-small.jpg') no-repeat; width:100%; background-size: 100%; position:relative">
<span>15+ Excellent High Speed Photographs</span>
</div>
<div class="show-for-small">
<div class="mob-img">
<img src="images/image4-small.jpg" alt="" />
</div>
<span>15+ Excellent High Speed Photographs</span>
</div>
</a>
</li>
</ul>
<div class="slide-counter">
<span class="s-counter">1-4 of 20</span>
<span class="s-arrow">
<div class="up-arrow">Scroll up</div>
<div class="down-arrow">Scroll down</div>
</span>
</div>
</div>
CSS:
#featured {
width: 920px;
position: relative;
border: 1px solid #ccc;
height: 400px;
background: #fff;
margin:0 auto;
border-radius: 5px;
/*overflow: hidden;*/
}
#featured ul.ui-tabs-nav {
position: absolute;
top: 0;
right: 0;
list-style: none;
padding: 0;
margin: 0;
width: 300px;
height: 100%;
overflow-y: auto;
}
#featured ul.ui-tabs-nav li {
padding: 0;
font-size: 12px;
color: #666;
}
#featured ul.ui-tabs-nav li img {
float: left;
margin: 2px 5px;
background: #fff;
padding: 2px;
border: 1px solid #eee;
}
#featured ul.ui-tabs-nav li span {
font-size: 12px;
font-family: Verdana;
line-height: 18px;
padding: 10px;
bottom: 0;
position: absolute;
color:#fff;
background: rgba(255,255,255,0);
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.5) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(100%, rgba(0,0,0,0.5)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.5) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.5) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.5) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(0,0,0,0.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000', GradientType=0);
width: 93%;
}
#featured li.ui-tabs-nav-item a {
display: block;
height: 90px;
color: #333;
background: #fff;
line-height: 20px;
text-decoration:none;
border-bottom: 1px solid #fff;
}
#featured li.ui-tabs-nav-item a:hover {
background: #f2f2f2;
}
#featured li.ui-tabs-selected {
background: url('images/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a {
background: #ccc;
}
#featured .ui-tabs-panel {
width: 620px;
/*height: 250px;*/
background: #999;
position: relative;
}
#featured .ui-tabs-panel img {
width:100%;
height:100%;
}
#featured .ui-tabs-panel .info {
position: absolute;
bottom:0;
left: 0;
height: 70px;
background: rgba(255,255,255,0);
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.5) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(100%, rgba(0,0,0,0.5)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.5) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.5) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.5) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(0,0,0,0.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000', GradientType=0);
width:620px;
}
#featured .info h2 {
font-size: 18px;
font-family: Georgia, serif;
color: #fff;
padding: 5px;
margin: 0;
overflow: hidden;
}
#featured .info p {
margin: 0 5px;
font-family: Verdana;
font-size: 11px;
line-height: 15px;
color: #f0f0f0;
}
#featured .info a {
text-decoration: none;
color: #fff;
font-size: 18px;
font-family: arial;
}
#featured .info a:hover {
text-decoration: underline;
}
#featured .ui-tabs-hide {
display: none;
}
.ui-tabs-nav::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
.ui-tabs-nav::-webkit-scrollbar {
width: 6px;
background-color: #F5F5F5;
}
.ui-tabs-nav::-webkit-scrollbar-thumb {
background-color: #000000;
}
.show-for-small {
display:none !important;
}
.img-bg {
width: 100%;
height: 100%;
float: left;
}
/*slider count starts*/
.slide-counter {
position: absolute;
bottom: 0;
right: 0;
width: 280px;
background: #f00;
padding: 10px;
color: #fff;
}
.s-arrow {
float:right;
}
.up-arrow {
cursor: pointer;
}
.down-arrow {
cursor: pointer;
}
/*slider count ends*/
@media only screen and (min-width:300px) and (max-width:760px) {
#featured {
width: 300px;
border-radius: 0;
}
#featured .ui-tabs-panel {
width:300px;
height: 150px;
}
#featured ul.ui-tabs-nav {
position: relative;
height: auto;
overflow-y: auto;
}
#featured .ui-tabs-panel .info {
width:auto;
}
#featured li.ui-tabs-nav-item a {
height:auto;
background:#004990;
float:left;
width:100%;
}
#featured .info a {
font-size: 14px;
}
.hide-for-small {
display:none !important;
}
.show-for-small {
display:block !important;
}
.mob-img {
float:left;
width:100px;
}
#featured ul.ui-tabs-nav li span {
position: relative;
background: none;
float: left;
width: 170px;
}
}
JS:
$(文件)。就緒(函數(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}})//.tabs("rotate", 5000, true);
var sliderNavLength = $('.ui-tabs-nav li').length;
$('.slide-counter').find('.s-counter').text("1 - " + sliderNavLength);
alert(" sliderNavLength - " + sliderNavLength);
});