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-->