0
我經常使用jQuery幻燈片，並收到一個請求來找出一種方法來衡量用戶使用Google Analytics進入節目的程度 - 即他們是否查看所有幻燈片，或在＃3，＃4等之後停止。添加跟蹤到幻燈片，查看有多少幻燈片
我通常會添加一個onClick事件標記來跟蹤它（您可以在下面的HTML中看到這個示例），但在這種情況下，它不起作用因爲導航箭頭根本不會改變，所以我不確定如何將人物正在查看的特定幻燈片與其點擊操作綁定。
我看過，因此和互聯網，找不到任何想法如何實現這一點。我能想到的唯一方法就是對滑塊進行重新編程，以便所有內容都發生變化，包括導航箭頭，以便我可以爲連接到幻燈片的箭頭指定一個獨特的點擊事件，以顯示它何時被點擊。我不認爲幻燈片會像這樣光滑，我想保持原樣。我還想將所有幻燈片保留在一個網址上，以免整個網站每次點擊都重新加載。
先感謝您的任何意見。 A working example is here，但如果你需要它，這裏是該幻燈片的jQuery代碼：
<script type="text/javascript">
$(document).ready(function(){
var thumbs = $('ul.thumbHolder li');
var thumbs = $('ul.thumbHolder li');
var bigImgs = $('ul.imgHolder li');
var mask = $('.imgHolder');
var imgW = $('ul.imgHolder li').width();
var speed = 300;
thumbs.removeClass('selected').first().addClass('selected');
thumbs.click(function() {
var target = $(this).index();
mask.animate({'left':'-'+imgW*target+'px'},speed);
thumbs.removeClass('selected');
$(this).addClass('selected');
});
$('.Bleft').on('click',function() {
var i = $('ul.thumbHolder li.selected').index();
i--;
$('ul.thumbHolder li.selected').removeClass('selected');
thumbs.eq(i).addClass('selected');
if (i === -1) { mask.animate({'left':'-'+imgW*$('ul.thumbHolder li').index()+'px'},speed); }
else{ mask.animate({'left':'-'+imgW*i+'px'},speed); }
clearInterval(counter);
});
$('.Bright').on('click',function() {
var i = $('ul.thumbHolder li.selected').index();
i = i >= thumbs.length-1 ? 0 : i+1;
$('ul.thumbHolder li.selected').removeClass('selected');
thumbs.eq(i).addClass('selected');
mask.animate({'left':'-'+imgW*i+'px'},speed);
clearInterval(counter);
});
var count = 0;
var counter = window.setInterval(timer, 5000);
function timer() {
count=count+0;
if (count >= 0) { count = 0; return; }
mask.animate({'left':'-'+ imgW*count +'px'},speed);
thumbs.removeClass('selected');
thumbs.eq(count).addClass('selected');
}
});
</script>
這裏是HTML：
<div id="slideshow-container">
<div class="control Bleft"></div>
<div class="control Bright"></div>
<div class="mask">
<ul class="imgHolder">
<li>
<div id="office-tour-slide01">
<p>In April we rolled out the orange carpet to celebrate the grand opening of our new North American Marketing Office and Culinary Center. L’Atelier Le Creuset (French for 「The Le Creuset Workshop」) is situated on the banks of the Ashley River in Charleston, SC.<br /><br />The front entrance to the nearly 9,000 square feet of renovated office space is flanked by entirely edible landscaping. Fresh herbs such as mint, thyme and cilantro are put to good use in our Atelier kitchen.
</p>
<img width="900" height="425" src="/wcsstore/CVWEB/images/home/office-slide_01.jpg" alt="Front Entrance" />
</div><!--//END office-tour-slide01-->
</li>
<li>
<div id="office-tour-slide02">
<p>The glass walled boardroom is more than just a meeting space. It also doubles as a museum for a few of our heritage pieces. The lighting pattern on the ceiling subtly mimics our three-ring logo.</p>
<img width="900" height="425" src="/wcsstore/CVWEB/images/home/office-slide_02.jpg" alt="Le Creuset Board Room" />
</div><!--//END office-tour-slide02-->
</li>
<li>
<div id="office-tour-slide07">
<p>A white marble counter just outside the conference room showcases our newest sun-inspired color, <a href="/cookware/CatalogSearchResultCmd?storeId=10151&catalogId=20002&langId=-1&docType=1&searchTerm=Soleil&shopBy=color" onclick="_gaq.push(['_trackEvent','Office Tour', 'Click', 'Soleil']);">Soleil</a>. The backlit seagrass panel is a nod to our coastal location.</p>
<img width="900" height="425" src="/wcsstore/CVWEB/images/home/office-slide_07.jpg" alt="Soleil Showcase" />
</div><!--//END office-tour-slide07-->
</li>
<li>
<div id="office-tour-slide03">
<p>Even the bathrooms feature an unexpected twist— <a href="/cookware/product_Goose-Pot_10151_-1_20002_83103" onclick="_gaq.push(['_trackEvent','Office Tour', 'Click', 'GoosePot']);">Goose pots</a> – yes, goose pots! – double as sink basins.</p>
<img width="900" height="425" src="/wcsstore/CVWEB/images/home/office-slide_03.jpg" alt="Le Creuset Sinks" />
</div><!--//END office-tour-slide03-->
</li>
<li>
<div id="office-tour-slide04">
<p>While the <a href="/cookware/content_Le-Creuset-Truckette_10151_-1_20002" onclick="_gaq.push(['_trackEvent','Office Tour', 'Click', 'Truckette']);">Le Creuset Truckette</a> has to stay parked outside, our custom vintage-style cruiser brings a bit of whimsy to the lobby.</p>
<img width="900" height="425" src="/wcsstore/CVWEB/images/home/office-slide_04.jpg" alt="Le Creuset Beach Cruiser" />
</div><!--//END office-tour-slide04-->
</li>
<li>
<div id="office-tour-slide05">
<p>An open workspace allows for both collaboration and optimal light exposure. The center island acts as a runway for our collection of pots autographed by our favorite chefs.</p>
<img width="900" height="425" src="/wcsstore/CVWEB/images/home/office-slide_05.jpg" alt="Le Creuset Studio" />
</div><!--//END office-tour-slide05-->
</li>
<li>
<div id="office-tour-slide06">
<p>L’Atelier – the workshop – is a fully equipped demonstration kitchen with the highest-quality Miele appliances. Intended to be a hub for community activity, it’s already hosted our first Guest Chef, with a second soon to follow. Our Guest Chef Series invites innovative chefs to prepare dishes and demonstrate techniques to a ticketed audience.</p>
<img width="900" height="425" src="/wcsstore/CVWEB/images/home/office-slide_06.jpg" alt="L’Atelier" />
</div><!--//END office-tour-slide06-->
</li>
<li>
<div id="office-tour-slide08">
<p>Our communications team maintains a media wall with tears and inspirations from recent photo shoots, magazines and campaigns.</p>
<img width="900" height="425" src="/wcsstore/CVWEB/images/home/office-slide_08.jpg" alt="Communications Team Wall" />
</div><!--//END office-tour-slide08-->
</li>
<li>
<div id="office-tour-slide09">
<a href="/cookware/product_Herb-Planter_10151_-1_20002_89624" onclick="_gaq.push(['_trackEvent','Office Tour', 'Click', 'HerbPlanter']);">
<img width="162" height="279" src="/wcsstore/CVWEB/images/home/office-slide_08_01.jpg" alt="Plant Your Own Herbs: Herb Planter" />
</a>
<a href="/cookware/product_5-Shelf-Cookware-Display-Stand_10151_-1_20002_10056" onclick="_gaq.push(['_trackEvent','Office Tour', 'Click', '5ShelfCookwareDisplayStand']);">
<img width="174" height="279" src="/wcsstore/CVWEB/images/home/office-slide_08_02.jpg" alt="Display Your Cookware: 5 Shelf Cookware Display Stand" />
</a>
<a href="/cookware/product_5-1%2F2-qt.-Round-French-Oven_10151_-1_20002_10138" onclick="_gaq.push(['_trackEvent','Office Tour', 'Click', '512qtRoundFrenchOven']);">
<img width="167" height="279" src="/wcsstore/CVWEB/images/home/office-slide_08_03.jpg" alt="Stock Your Shelves: 5 1/2 qt. Round French Oven" />
</a>
<a href="/cookware/product_16-Piece-Dinnerware-Set_10151_-1_20002_10168_24076" onclick="_gaq.push(['_trackEvent','Office Tour', 'Click', '16PieceDinnerwareSet']);">
<img width="202" height="279" src="/wcsstore/CVWEB/images/home/office-slide_08_04.jpg" alt="Feed a Crowd: 16-Piece Dinnerware Set" />
</a>
<a href="/cookware/content_cooking-techniques-ruhlman_10151_-1_20002" onclick="_gaq.push(['_trackEvent','Office Tour', 'Click', 'Ruhlman']);">
<img width="195" height="279" src="/wcsstore/CVWEB/images/home/office-slide_08_05.jpg" alt="Learn to Cook: Technique Series from Michael Ruhlman" />
</a>
</div><!--//END office-tour-slide09-->
</li>
</ul>
</div>
<div style="clear: both;"></div>
<div id="office-tour-nav" style="display: none;">
<ul class="thumbHolder">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div><!--//END soleil-nav-->
</div><!--//END slideshow-container-->