当旋转的缩略图数量为16且所有位置相同时,我的代码可以正常工作(仅因缩略图编号而更改文件名称)。示例:http://www.urltoimage1.jpg....http://www.urltoimage16.jpg
这是html:
<img width="189" height="142" src="http: //www.urltoimage8.jpg" class="someclass" id="latest-499" onmouseover="thumbStart('latest-499', 16, 'http: //www.urltoimage');" onmouseout="thumbStop('latest-499','http: //www.urltoimage8.jpg');">
这是javascript:
// JavaScript Document
//rotating thumb functions
var rotateThumbs = new Array();
function changeThumb( index, i, num_thumbs, path)
{
if (rotateThumbs[index])
{
if(i<=num_thumbs){
document.getElementById(index).src = path + i + ".jpg";
i++;
setTimeout("changeThumb('"+ index +"'," + i + ", " + num_thumbs + ", '" + path + "')", 600);
}else{
changeThumb( index, 1, num_thumbs, path);
}
}
}
function thumbStart(index, num_thumbs, path)
{
rotateThumbs[index] = true;
changeThumb( index, 1, num_thumbs, path);
}
function thumbStop(index, srco)
{
rotateThumbs[index] = false;
document.getElementById(index).src = srco;
}
现在,问题是某些文章缩略图不在同一位置。示例:http://www.urltoimage1.jpg....http://www.urltoimageksks16.jpg
我认为,在存在这种差异的情况下,最好将缩略图的所有网址复制到图像的类中,以这种方式保留html:
<img width="189" height="142" src="http: //www.urltoimage8.jpg" class="http: //www.urltoimage1.jpg,http: //www.urltoimage2.jpg,...,http: //www.urltoimageksks16.jpg" id="latest-499" onmouseover="thumbStart" onmouseout="thumbStop('latest-499','http: //www.urltoimage8.jpg');">
现在我已经拥有了img标签类中的所有url,如何实现缩略图旋转?
由于
答案 0 :(得分:1)
不要将网址存储在类属性中,而是使用Data Attributes。 (或Data Attributes from jQuery)
类似
<img .. data-thumbnail-url="http: //www.urltoimageksks16.jpg" .. />
如果你正在使用jQuery(你已经将它添加到你的标签中),你可以直接使用
var thumbnailSrc = jQuery('img').data('thumbnail');
如果你没有使用它(因为我的代码中根本没有看到任何jQuery)你必须使用它
var thumbnailSrc = document.getElementById(index).dataset.thumbnail
使用它,你可以替换你的src属性。你可能想要在原始的src中存储数据属性。
关于旋转自身(目前尚不清楚它是否是您问题的一部分,或者您是否想知道是否可以将URL存储在类属性中),使用jquery可以得到答案,例如{{3}您只需要调整悬停时要执行的功能。您也可以使用纯css jQuery animate image rotation
在旁注中,请使用此
var rotateThumbs = [];
而不是
var rotateThumbs = new Array();