我经常使用 jQuery 幻灯片，并且收到了一个请求，希望找出一种方法来衡量人们使用 Google Analytics 进入节目的程度——即他们是查看所有幻灯片，还是在 #3、#4 等之后停止。
我通常会添加一个 onClick 事件标记来跟踪它（您可以在下面的 HTML 中看到这方面的示例），但在这种情况下，它不会起作用，因为导航箭头根本不会改变，所以我没有确定如何将人们正在查看的特定幻灯片与他们的点击操作联系起来。
我查看了 SO 和互联网，找不到任何关于如何实现这一目标的想法。我唯一能想到的就是对滑块进行重新编程，以便所有内容都发生变化，包括导航箭头，这样我就可以将唯一的点击事件分配给与幻灯片相关联的箭头，当它被点击时。我不认为幻灯片会以这种方式流畅，但我想保持原样。我还想将所有幻灯片保留在一个 URL 上，这样整个网站就不会在每次点击时重新加载。
提前感谢您的任何建议。 这里有一个工作示例，但如果您需要它，这里是幻灯片的 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-->