腾讯中图片滚动如何制作
http://news.qq.com/photo.shtml
腾讯中图片滚动如何制作？
[解决办法]
通过缩略图掠过事件改变 主图 显示相对就的图,动画用JQ实现
页面排版CSS直接考他的
[解决办法]
代码就写在页面上。
(function () {
/*-------------------------编辑数据修改-------------------------------*/
var data = [
{img1: 'http://img1.gtimg.com/news/pics/hv1/93/163/1426/92767308.jpg', title: '夏俊峰之子哭泣怀念父亲', slink: 'http://news.qq.com/a/20130926/004177.htm#p=1'},
{img1: 'http://img1.gtimg.com/news/pics/hv1/190/161/1426/92766895.jpg', title: '活着：谁为我负责', slink: 'http://news.qq.com/zt2012/living/yimiao.htm'},
{img1: 'http://img1.gtimg.com/news/pics/hv1/189/161/1426/92766894.jpg', title: '大黄鸭吻别园博湖 移居颐和园', slink: 'http://news.qq.com/a/20130926/003865.htm#p=1'},
{img1: 'http://img1.gtimg.com/news/pics/hv1/191/161/1426/92766896.jpg', title: '【影像记忆】辽沈晚报精选：母婴盗窃团', slink: 'http://news.qq.com/zt2012/Memory2012/liaoshenwanbao.htm'},
{img1: 'http://img1.gtimg.com/news/pics/hv1/88/176/1426/92770618.jpg', title: '世界小姐时装秀 群芳争艳超养眼', slink: 'http://news.qq.com/a/20130926/003596.htm'},
{img1: 'http://img1.gtimg.com/news/pics/hv1/36/66/1426/92742516.jpg', title: '独家：夏俊峰被执行死刑之后', slink: 'http://news.qq.com/a/20130925/014734.htm#p=1'},
{img1: 'http://img1.gtimg.com/news/pics/hv1/213/196/1424/92645793.jpg', title: '影像记录曼哈顿街头的女神梦露', slink: 'http://news.qq.com/a/20130923/012719.htm#p=1'},
{img1: 'http://img1.gtimg.com/news/pics/hv1/55/68/1426/92743045.jpg', title: '夏健强绘画作品饱含对父亲夏俊峰思念之情', slink: 'http://news.qq.com/a/20130925/012023.htm#p=1'},
{img1: 'http://img1.gtimg.com/news/pics/hv1/133/194/1425/92710228.jpg', title: '巴基斯坦7.7级强震 海上冒出小岛', slink: 'http://news.qq.com/a/20130925/005598.htm#p=1'},
{img1: 'http://img1.gtimg.com/news/pics/hv1/122/202/1425/92712257.jpg', title: '海南三亚“摩的”当校车 一车拉5人', slink: 'http://news.qq.com/a/20130925/004403.htm#p=1'}
]
/*-------------------------编辑数据修改-------------------------------*/
var aImg = $('focus_view').getElementsByTagName('li');
var aTxt = $('focus_text').getElementsByTagName('li');
var aSmg = $('focus_slider').getElementsByTagName('li');
var aaImg = $('focus_view').getElementsByTagName('img');
var aaSmg = $('focus_slider').getElementsByTagName('img');
var aa0 = $('focus_text').getElementsByTagName('a');
var aa1 = $('focus_slider').getElementsByTagName('a');
var aa2 = $('focus_view').getElementsByTagName('a');
var oUl = $('focus_slider').getElementsByTagName('ul')[0];
var oNum = $('num');
var oPrev = $('prev');
var oNext = $('next');
for (var i = 0; i < aSmg.length; i++) {
aSmg[i].index = i; //当前添加索引
aImg[i].index = i;
aa0[i].href = aa1[i].href = aa2[i].href = data[i].slink;
aa0[i].innerHTML = data[i].title;
aaImg[i].src = aaSmg[i].src = data[i].img1;
aSmg[i].onmouseover = function () {
for (var i = 0; i < aSmg.length; i++) {
aSmg[i].className = '';
aTxt[i].className = '';
startMove(aImg[i], 'opacity', 0);
aImg[i].style.zIndex = 1;
}
aSmg[this.index].className = 'current';
aTxt[this.index].className = 'show';
oNum.innerHTML = this.index + 1 + '/10';
startMove(aImg[this.index], 'opacity', 100);
aImg[this.index].style.zIndex = 2;
}
oNext.onclick = oPrev.onclick = function () {
if (parseInt(oUl.style.marginLeft) < 0) {
startMove(oUl, 'marginLeft', 0);
for (var i = 0; i < aSmg.length; i++) {
aTxt[i].className = '';
startMove(aImg[i], 'opacity', 0);
aSmg[i].className = '';
aImg[i].style.zIndex = 1;
}
startMove(aImg[0], 'opacity', 100);
aSmg[0].className = 'current';
aTxt[0].className = 'show';
oNum.innerHTML = 1 + '/10';
aImg[0].style.zIndex = 2;
} else {
startMove(oUl, 'marginLeft', -oUl.offsetWidth / 2);
for (var i = 0; i < aSmg.length; i++) {
aTxt[i].className = '';
startMove(aImg[i], 'opacity', 0);
aSmg[i].className = '';
aImg[i].style.zIndex = 1;
}
startMove(aImg[aSmg.length / 2], 'opacity', 100);
aSmg[aSmg.length / 2].className = 'current';
aTxt[aSmg.length / 2].className = 'show';
oNum.innerHTML = (aSmg.length * 0.5 + 1) + '/10';
aImg[aSmg.length / 2].style.zIndex = 2;
}
}
}
})();
function $(id) {
return document.getElementById(id)
}
;
function startMove(obj, attr, iTarget) { //轮换动画
clearInterval(obj.timer);
obj.timer = setInterval(function () {
doMove(obj, attr, iTarget);
}, 15);
}
function doMove(obj, attr, iTarget) {
var iCur = 0;
if (attr == 'opacity') {
iCur = parseInt(100 * getStyle(obj, attr))
[解决办法]
0;
} else {
iCur = parseInt(getStyle(obj, attr))
[解决办法]
0;
}
var iSpeed = (iTarget - iCur) / 8;
iSpeed = (iSpeed > 0) ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (iCur == iTarget) {
clearInterval(obj.timer);
} else if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')';
obj.style.opacity = (iCur + iSpeed) / 100;
} else {
obj.style[attr] = iCur + iSpeed + 'px';
}
}
function getStyle(obj, attr) { //取样式
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
