当前位置： 代码迷 >> JavaScript >> 腾讯《活着》频道JS图片替换效果解析
  详细解决方案

腾讯《活着》频道JS图片替换效果解析

热度：296   发布时间：2013-10-08 16:55:16.0
腾讯《活着》频道JS图片轮换效果解析

腾讯《活着》频道JS图片轮换效果解析

1.原理分析

总析:

包含内容的层->宽:900 高:400

主要显示层-> 宽800 高400 即最上面那层 z-index=100

中间层->宽- 800*5/6 高400*5/6 z-index=10

最下面的层->宽 800*2/3 高 400*2/3 z-index=1

通过不同宽/高/z-index 来达到层次感 然后通过定时器是层移动 但样式不同 即左中2移动到最上面 左中2的样式变为最上面的样式 原来最上面的样式变为右2 依次类推

1.层z-index属性的运用 上面->下面层z-index依次是:100-10-1

2.margin-top 的运用 最上面与中间,中间与下面的递减 主要是通过这个属性实现的

3.定时器的运用


2.文档构建

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>《活着》汇总页_图片频道_新闻中心_腾讯网</title>

    <style type="text/css">
    .wrapper_zt {
    background: url("http://img1.gtimg.com/news/pics/hv1/244/23/1028/66851809.png") repeat-x scroll 0 0 transparent;
    font-family: Microsoft YaHei,SimHei,STHeiti;
    width: 100%;
}
.main {
    clear: both;
    margin: 0 auto;
    overflow: hidden;
    width: 960px;
}
.slider {
    height: 400px;
    padding: 30px 0;
    width: 960px;
}
.scrollBox {
    height: 400px;
    margin: 0 auto;
    position: relative;
    width: 900px;
}
.scrollPic {
    height: 400px;
    margin: 0 auto;
    width: 800px;
}
.scrollPic .item {
    background: url("http://mat1.gtimg.com/news/2011baronxiong/inc/sm_loader.gif") no-repeat scroll center center #000000;
    position: absolute;
    z-index: 10;
}
.scrollPic .item img {
    border: 1px solid #666666;
    opacity: 0.8;
}
.scrollPic .current img {
    height: 400px;
    opacity: 1;
    width: 800px;
}
.scrollPic .iText {
    display: none;
}
.scrollPic .current .iText {
    background: url("http://img1.gtimg.com/news/pics/hv1/233/9/1032/67108328.png") no-repeat scroll 0 0 transparent;
    display: block;
    height: 100px;
    left: -5px;
    position: absolute;
    top: -5px;
    width: 100px;
}
.prevCur {
    cursor: pointer;
    display: block;
    height: 27px;
    left: -30px;
    position: absolute;
    top: 185px;
    width: 22px;
}
.nextCur {
    cursor: pointer;
    display: block;
    height: 27px;
    position: absolute;
    right: -30px;
    top: 185px;
    width: 22px;
}
.scrollDot {
    bottom: 0;
    left: 100px;
    position: absolute;
}
.scrollDot span {
    background: url("images/ico11.png") no-repeat scroll 0 0 transparent;
    cursor: pointer;
    display: inline-block;
    margin: 0 5px;
    padding: 6px;
}
.scrollDot span.on {
    background: url("images/ico112.png") no-repeat scroll 0 0 transparent;
}
.prevCur {
    background: url("http://img1.gtimg.com/news/pics/hv1/252/14/1031/67044597.png") no-repeat scroll 0 0 transparent;
}
.nextCur {
    background: url("http://img1.gtimg.com/news/pics/hv1/114/21/1031/67046244.png") no-repeat scroll 0 0 transparent;
}
</style>
</head>
<body>
    <div class="wrapper_zt">
        <div class="main">
            <div class="slider">
                <div id="scrollBox" class="scrollBox">
                    <div id="scrollPic" class="scrollPic">
                        <!-- 初始化插入的数据 -->
                        <!--<div class="item" style="left: 208px; width: 666px; height: 333px; margin-top: 33px;
                            z-index: 10;">
                            <a href="http://news.qq.com/zt2012/living/12mother.htm" target="_blank">
                                <img src="http://mat1.gtimg.com/news/huozhe/collection/12suimama.jpg" style="width: 666px;
                                    height: 333px;"></a><div class="iText">
                                    </div>
                        </div>
                        <div class="item" style="left: 366px; width: 533px; height: 266px; margin-top: 66px;
                            z-index: 1;">
                            <a href="http://news.qq.com/zt2012/living/emergency.htm" target="_blank">
                                <img src="http://mat1.gtimg.com/news/huozhe/collection/jizhenshi2.jpg" style="width: 533px;
                                    height: 266px;"></a><div class="iText">
                                    </div>
                        </div>
                        <div class="item" style="left: 0px; width: 533px; height: 266px; margin-top: 66px;
                            z-index: 1;">
                            <a href="http://news.qq.com/zt2012/living/zengchengjie.htm" target="_blank">
                                <img src="http://mat1.gtimg.com/news/huozhe/collection/zengchengjie.jpg" style="width: 533px;
                                    height: 266px;"></a><div class="iText">
                                    </div>
                        </div>
                        <div class="item" style="left: 25px; width: 666px; height: 333px; margin-top: 33px;
                            z-index: 10;">
                            <a href="http://news.qq.com/zt2012/living/shuangfei.htm" target="_blank">
                                <img src="http://mat1.gtimg.com/news/huozhe/collection/shuangfei.jpg" style="width: 666px;
                                    height: 333px;"></a><div class="iText">
                                    </div>
                        </div>
                        <div class="item current" style="left: 50px; width: 800px; height: 400px; margin-top: 0px;
                            z-index: 100;">
                            <a href="http://news.qq.com/zt2012/living/suiqian.htm" target="_blank">
                                <img src="http://mat1.gtimg.com/news/huozhe/collection/piaobo.jpg" style="width: 800px;
                                    height: 400px;"></a><div class="iText">
                                    </div>
                        </div>-->
                    </div>
                    <div id="scrollDot" class="scrollDot">
                        <!-- 初始化插入的数据 -->
                        <!--<span class=""></span><span class=""></span><span class=""></span><span class=""></span>
                        <span class="on"></span>-->
                    </div>
                    <div id="prevCur" class="prevCur">
                    </div>
                    <div id="nextCur" class="nextCur">
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    
</body>
</html>

3.JS解析

function ScrollBox(Context,cScrollPic,sDot,pCur,nCur,cWidth,cHeight,itemWidth,speedTime,auto){
this.Context=[];
this.sDot={};
this.prevCur={};
this.nextCUr={};
this.cScrollPic={};
this.cWidth=800;
this.cHeight=400;
this.currentDot=2;
this._ready="ready";
this.scrollLength=0;
this.itemWidth=400;
this.itemHeight=200;
this.itemData=[];
this.itemData[5]=[];
this.itemData[3]=[];
this.speed=10;
this.tweenTime=30;
this.speedTime = 3000;
this.auto = false;
}
ScrollBox.prototype = {
//返回action后索引位置 参数依次是:当前索引位置,action,偏移量
funtureDot: function (currentNum, dir, spaceNum) {          //0,next,1
var funtureNode = 0;
if (dir == "prev") {                                        //向上翻
funtureNode = currentNum - spaceNum;
if (funtureNode < 0) {
funtureNode = funtureNode + this.scrollLength;
}
} else {                                                    //向下翻
funtureNode = currentNum + spaceNum;
if (funtureNode >= this.scrollLength) {
funtureNode = funtureNode - this.scrollLength;
}
}
return funtureNode;                                         //返回action后索引位置 参数依次是:当前索引位置,action,偏移量
},
//action后返回的值 参数依次是:原始位置,新旧位置差,action次数,允许action次数
tween: function (a, b, t, d) {
return a + b * t / d;
},
//changData重置图片的左边距,宽度,高度,上边距/下边距
changData: function () {
var spaceWidth = 0;
var spaceHeight = 0;
var spaceHeight2 = 0;
spaceWidth = this.cWidth - this.itemWidth;      //scrollBox-scrollPic 900-800=100
if (this.scrollLength == 3) {                   //当数组长度为3
spaceWidth = spaceWidth / 2;                    //获取scrollPic与scrollBox的边距    100/2=50
spaceHeight = this.itemHeight / 6 / 2;          //400/6/2=33        这里取6/1
} else if (this.scrollLength == 5) {            //当数组长度为5
spaceWidth = spaceWidth / 4;                    //获取scrollPic与scrollBox的边距    100/4=25
spaceHeight = this.itemHeight / 6 / 2;          //400/6/2=33        这里取6/1
spaceHeight2 = this.itemHeight / 3 / 2;         //400/3/2=66        这里取3/1
}
//参数依次为:左边距,宽度,高度,上边距/下边距
//PS:这里需要特别解释一下为什么下面会有2 / 3,5 / 6 建议:当看到这样变量反复操作的时候,最好反向逆推,算出结果,根据结果找规律,再回头看代码,你会发现豁然明了
//      先看上面:spaceHeight 取6/1
//               spaceHeight2 取3/1
//      那么图片所占的宽高就为:原始图片宽高的6/5,3/2
this.itemData[5] = [
{ dLeft: 0, dWidth: Math.floor(this.itemWidth * 2 / 3), dHeight: Math.floor(this.itemHeight * 2 / 3), dMarginTop: Math.floor(spaceHeight2), dZIndex: 1 }, 
{ dLeft: Math.floor(spaceWidth), dWidth: Math.floor(this.itemWidth * 5 / 6), dHeight: Math.floor(this.itemHeight * 5 / 6), dMarginTop: Math.floor(spaceHeight), dZIndex: 10 }, 
{ dLeft: Math.floor(spaceWidth * 2), dWidth: Math.floor(this.itemWidth), dHeight: Math.floor(this.itemHeight), dMarginTop: 0, dZIndex: 100 }, 
{ dLeft: Math.floor(this.itemWidth + spaceWidth * 3 - this.itemWidth * 5 / 6), dWidth: Math.floor(this.itemWidth * 5 / 6), dHeight: Math.floor(this.itemHeight * 5 / 6), dMarginTop: Math.floor(spaceHeight), dZIndex: 10 }, 
{ dLeft: Math.floor(this.cWidth - this.itemWidth * 2 / 3), dWidth: Math.floor(this.itemWidth * 2 / 3), dHeight: Math.floor(this.itemHeight * 2 / 3), dMarginTop: Math.floor(spaceHeight2), dZIndex: 1}
];
this.itemData[3] = [
{ dLeft: 0, dWidth: Math.floor(this.itemWidth * 5 / 6), dHeight: Math.floor(this.itemHeight * 5 / 6), dMarginTop: Math.floor(spaceHeight), dZIndex: 1 }, 
{ dLeft: Math.floor(spaceWidth), dWidth: Math.floor(this.itemWidth), dHeight: Math.floor(this.itemHeight), dMarginTop: 0, dZIndex: 10 }, 
{ dLeft: Math.floor(this.cWidth - this.itemWidth * 5 / 6), dWidth: Math.floor(this.itemWidth * 5 / 6), dHeight: Math.floor(this.itemHeight * 5 / 6), dMarginTop: Math.floor(spaceHeight), dZIndex: 1}
];
},
//selectClassName返回图片Div class等于className的项
selectClassName: function (o, className, tagName) {
var tag = o.getElementsByTagName("div");        //获取图片Div
var l = tag.length;                             //获取数组
var r = [];                                     //初始数组
for (var i = 0; i < l; i++) {                   //循环数组
var classTag = tag[i].className.split(" ");     //分割class数组
var ll = classTag.length;                       //获取class数组
for (var j = 0; j < ll; j++) {                  //循环数组
if (classTag[j] == className) {                 //如果循环项等于className,添加到数组中
r.push(tag[i]);
}
}
}
return r;                                       //返回图片Div class等于className的项
},
//当前索引位置数组
currentArr: function () {
var rArr = [];
var sPicBox = document.getElementById(this.cScrollPic);     //获取scrollPic
var sPicBoxItem = this.selectClassName(sPicBox, "item", "div"); //获取指定calss的图片Div
for (var i = 0; i < this.scrollLength; i++) {
for (var j = 0; j < this.scrollLength; j++) {
var tempLeft = sPicBoxItem[j].style.left;                       //图片Div左边距 如:0px
tempLeft = tempLeft.replace(/[^\d.]/g, '');                     //去除px 如:0px->0
if (this.itemData[this.scrollLength][i].dLeft == tempLeft) {    //左边距相等时,将j添加到数组中
rArr.push(j);
}
}
}
return rArr;                                                    //返回索引位置数组
},
//设置样式
whichDot: function (n) {
var m = n + 2;                                                  //移动后的索引都传进来了,这里还要取m值,不知何解?
if (n == 0) m = this.scrollLength - 1;
if (n == (this.scrollLength - 1)) m = 0;
if (n == (this.scrollLength - 2)) m = 1;
if (n == (this.scrollLength - 3)) m = 2;
var dot = document.getElementById(this.sDot);                   //获取scrollDot
var dotItem = dot.getElementsByTagName("span");                 //获取scrollDot下span
var splitBox = document.getElementById(this.cScrollPic);        //获取scrollPic
var split = this.selectClassName(splitBox, 'item', 'div');      //获取指定calss的图片Div
for (var i = 0; i < this.scrollLength; i++) {                   //循环数组
dotItem[i].className = "";                                      //初始样式
split[i].className = "item";                                    //初始样式
if (i == m) {
dotItem[i].className = "on";                                    //设置选中样式
split[i].className = "item current";                            //设置选中样式
}
}
m = null;                                                       //初始m值
},
//action 参数依次为:action,原始索引位置,新索引位置,当前项,偏移量,左边距差值,宽度差值,高度差值,上边距/下边距差值,z-index差值,原始左边距,原始宽度,原始高度,原始上边距/下边距,原始z-index
scrolling: function (dir, currentone, funtureNode, n, spaceNum, changeLeft, changeWidth, changeHeight, changeMarginTop, changeZIndex, tempLeft, tempWidth, tempHeight, tempMarginTop, tempZIndex) {
var flag = null;
if (flag) {         //flag!=null 强制清除定时器
clearTimeout(flag);
}
var sPicBox = document.getElementById(this.cScrollPic);     //获取scrollPic
var sPicBoxItem = this.selectClassName(sPicBox, "item", "div"); //获取指定calss的图片Div
var ctempLeft = ctempWidth = ctempHeight = ctempMarginTop = ctempZIndex = 0;
var _this = this;
var t = 0;
(function () {
ctempLeft = _this.tween(tempLeft, changeLeft, t, _this.speed);      //action后左边距
ctempWidth = _this.tween(tempWidth, changeWidth, t, _this.speed);   //action后宽度
ctempHeight = _this.tween(tempHeight, changeHeight, t, _this.speed);    //action后高度
ctempMarginTop = _this.tween(tempMarginTop, changeMarginTop, t, _this.speed);   //action后上/下边距
ctempZIndex = _this.tween(tempZIndex, changeZIndex, t, _this.speed);    //action后z-index
sPicBoxItem[n].style.cssText = "left:" + parseInt(ctempLeft) + "px;width:" + parseInt(ctempWidth) + "px;height:" + parseInt(ctempHeight) + "px;margin-top:" + parseInt(ctempMarginTop) + "px;z-index:" + parseInt(ctempZIndex); //设置图片Div样式
sPicBoxItem[n].getElementsByTagName("img")[0].style.cssText = "width:" + parseInt(ctempWidth) + "px;height:" + parseInt(ctempHeight) + "px";    //设置图片样式
t++;    //action操作次数
flag = setTimeout(arguments.callee, _this.tweenTime);   //定时任务
if (t > _this.speed) {      //action次数大于最大值
sPicBoxItem[n].style.cssText = "left:" + _this.itemData[_this.scrollLength][funtureNode].dLeft + "px;width:" + _this.itemData[_this.scrollLength][funtureNode].dWidth + "px;height:" + _this.itemData[_this.scrollLength][funtureNode].dHeight + "px;margin-top:" + _this.itemData[_this.scrollLength][funtureNode].dMarginTop + "px;z-index:" + _this.itemData[_this.scrollLength][funtureNode].dZIndex;
sPicBoxItem[n].getElementsByTagName("img")[0].style.cssText = "width:" + _this.itemData[_this.scrollLength][funtureNode].dWidth + "px;height:" + _this.itemData[_this.scrollLength][funtureNode].dHeight + "px";
t = 0;  //初始action次数
clearTimeout(flag); //清除计时器
flag = null;        //清除计时器对象
if (n == (_this.scrollLength - 1)) {
_this._ready = "ready";
}
}
})();
},
//action
act: function (current, dir) {
if (this._ready == "scrolling") {
return;
}
this._ready = "scrolling";
var rArr = this.currentArr();   //当前索引位置数组
var changeLeft = changeWidth = changeHeight = changeMarginTop = changeZIndex = 0;
var tempLeft = tempWidth = tempHeight = tempMarginTop = tempZIndex = 0;
var spaceNum = 1;
var tempCurrent = 0;
if (dir == "") {                                    //span点击事件 传入的current应该是span索引
var orgspaceNum = current - this.currentDot;
spaceNum = Math.abs(orgspaceNum);                   //获取绝对值
if (orgspaceNum > 0) {                              //3/4-2>0 向下翻
dir = "next";
} else if (orgspaceNum < 0) {                       //0/1-2<0 向上翻
dir = "prev";
}
}
for (var i = 0; i < this.scrollLength; i++) {               //循环数组
var funtureNode = this.funtureDot(i, dir, spaceNum);
changeLeft = this.itemData[this.scrollLength][funtureNode].dLeft - this.itemData[this.scrollLength][i].dLeft;       //左边距差值
changeWidth = this.itemData[this.scrollLength][funtureNode].dWidth - this.itemData[this.scrollLength][i].dWidth;    //宽度差值
changeHeight = this.itemData[this.scrollLength][funtureNode].dHeight - this.itemData[this.scrollLength][i].dHeight; //高度差值
changeMarginTop = this.itemData[this.scrollLength][funtureNode].dMarginTop - this.itemData[this.scrollLength][i].dMarginTop;    //上边距/下边距差值
changeZIndex = this.itemData[this.scrollLength][funtureNode].dZIndex - this.itemData[this.scrollLength][i].dZIndex; //z-index差值
tempLeft = this.itemData[this.scrollLength][i].dLeft;       //原始左边距
tempWidth = this.itemData[this.scrollLength][i].dWidth;     //原始宽度
tempHeight = this.itemData[this.scrollLength][i].dHeight;   //原始高度
tempMarginTop = this.itemData[this.scrollLength][i].dMarginTop; //原始上边距/下边距
tempZIndex = this.itemData[this.scrollLength][i].dZIndex;   //原始z-index
//参数依次为:action,原始索引位置,新索引位置,当前索引所在位置,偏移量,左边距差值,宽度差值,高度差值,上边距/下边距差值,z-index差值,原始左边距,原始宽度,原始高度,原始上边距/下边距,原始z-index
this.scrolling(dir, i, funtureNode, rArr[i], spaceNum, changeLeft, changeWidth, changeHeight, changeMarginTop, changeZIndex, tempLeft, tempWidth, tempHeight, tempMarginTop, tempZIndex);
}
tempCurrent = this.funtureDot(this.currentDot, dir, spaceNum);  //返回action后索引位置
this.whichDot(tempCurrent);     //设置样式
this.currentDot = tempCurrent;  //设置action后索引为当前索引
},
//loadAct初始化标签
loadAct: function () {
this.scrollLength = this.Context.length;        //当前数组长度
var sPicBox = document.getElementById(this.cScrollPic);     //存放图片Div
var elem = elemText = elemLink = elemImg = 0;
var sDotBox = document.getElementById(this.sDot);           //scrollDot
var dotElem = 0;
for (var i = 0; i < this.scrollLength; i++) {               //循环数组
//拼接Div
//<div class="item" style="left: 25px; width: 666px; height: 333px; margin-top: 33px;
//    z-index: 10;">
//    <a href="http://news.qq.com/zt2012/living/shuangfei.htm" target="_blank">
//        <img src="http://mat1.gtimg.com/news/huozhe/collection/shuangfei.jpg" style="width: 666px;
//            height: 333px;"></a><div class="iText">
//            </div>
//</div>
elem = document.createElement("div");                       //创建初始Div
elem.className = "item";                                    //class='item'
elemLink=document.createElement('a');                       //创建超链接
elemLink.href=this.Context[i].href;                         //获取数组参数:{"img":"http://mat1.gtimg.com/news/huozhe/collection/12suimama.jpg","href":"http://news.qq.com/zt2012/living/12mother.htm"}
elemLink.target="_blank";                                   //超链接打开方式
elem.appendChild(elemLink);                                 //将超链接添加到Div中
elemImg = document.createElement("img");                    //创建Img
elemImg.src = this.Context[i].img;                          //获取数组参数:{"img":"http://mat1.gtimg.com/news/huozhe/collection/12suimama.jpg","href":"http://news.qq.com/zt2012/living/12mother.htm"}
elemLink.appendChild(elemImg);                              //将图片添加到超链接中
elemText = document.createElement("div");                   //创建左上Icon图片Div
elemText.className = "iText";                               //class='iText'
elem.appendChild(elemText);                                 //将Div添加到初始Div中
sPicBox.appendChild(elem);                                  //将初始Div添加到图片Div
//拼接span
//<span class=""></span>
dotElem = document.createElement("span");                   //创建初始Span
sDotBox.appendChild(dotElem);                               //将初始Span添加到scrollDot中
}
var sPicBoxItem = this.selectClassName(sPicBox, "item", "div"); //返回图片Div class等于className的项
this.currentDot = Math.floor(this.scrollLength / 2);            //取中间数
sPicBoxItem[this.currentDot].className = "item current";        //设置中间数class='item current' 即选中状态
sDotBox.getElementsByTagName("span")[this.currentDot].className = "on"; //设置对应scrollDot里面的span class='on'
this.changData();                                                       //左边距,宽度,高度,上边距/下边距
for (var n = 0; n < this.scrollLength; n++) {                           //循环数组
var _tempData = this.itemData[this.scrollLength][n];                    //获取图片对象 this.itemData[this.scrollLength]=itemData[5]/itemData[3]
sPicBoxItem[n].style.cssText = "left:" + _tempData.dLeft + "px;width:" + _tempData.dWidth + "px;height:" + _tempData.dHeight + "px;margin-top:" + _tempData.dMarginTop + "px;z-index:" + _tempData.dZIndex;     //设置图片Div样式
sPicBoxItem[n].getElementsByTagName("img")[0].style.cssText = "width:" + _tempData.dWidth + "px;height:" + _tempData.dHeight + "px";                //设置图片样式
}
},
init: function () {
var flag1 = flag2 = flag3 = flag4 = flag5 = flag6 = null;
if (flag1 || flag2 || flag3) {
clearInterval(flag1);
clearTimeout(flag2);
clearTimeout(flag3);
flag1 = flag2 = flag3 = null;
}
var _this = this;
this.loadAct();             //初始化标签
window.onload = function () {   //清除定时器
clearTimeout(flag2);
clearTimeout(flag3);
flag2 = flag3 = null;
if (_this.auto == true) {       //this.auto=true 设置定时器
flag1 = setInterval(function () {
_this.act("", "next");
}, _this.speedTime);            //_this.speedTime 间隔时间
}
};
document.getElementById(this.pCur).onclick = function () {      //向上翻点击事件
if (flag1 || flag2 || flag3 || flag4 || flag5 || flag6) {
clearInterval(flag1);
clearTimeout(flag2);
clearTimeout(flag3);
clearTimeout(flag4);
clearTimeout(flag5);
clearTimeout(flag6);
flag1 = flag2 = flag3 = flag4 = flag5 = flag6 = null;
}
_this.act("", "prev");                                          //向上翻action
flag4 = setTimeout(function () {
if (_this.auto == true) {                                       //this.auto == true 设置定时任务
flag1 = setInterval(function () {
_this.act("", "next");
}, _this.speedTime);
}
}, 1000);
}
document.getElementById(this.nCur).onclick = function () {      //向下翻点击事件
if (flag1 || flag2 || flag3 || flag4 || flag5 || flag6) {
clearInterval(flag1);
clearTimeout(flag2);
clearTimeout(flag3);
clearTimeout(flag4);
clearTimeout(flag5);
clearTimeout(flag6);
flag1 = flag2 = flag3 = flag4 = flag5 = flag6 = null;
}
_this.act("", "next");                                          //向下翻action
flag4 = setTimeout(function () {
if (_this.auto == true) {                                       //this.auto == true 设置定时任务
flag1 = setInterval(function () {
_this.act("", "next");
}, _this.speedTime);
}
}, 1000);
}
var sDotBox = document.getElementById(this.sDot);               //获取scrollDot
var sDotBoxItem = sDotBox.getElementsByTagName("span");         //获取span
for (var i = 0; i < this.scrollLength; i++) {
sDotBoxItem[i].onclick = (function (m) {                        //设置span点击事件(这里由于样式问题span点击事件在这里起不到作用)
return function () {
if (flag1 || flag2 || flag3 || flag4 || flag5 || flag6) {
clearInterval(flag1);
clearTimeout(flag2);
clearTimeout(flag3);
clearTimeout(flag4);
clearTimeout(flag5);
clearTimeout(flag6);
flag1 = flag2 = flag3 = flag4 = flag5 = flag6 = null;
}
_this.act(m, "");                                               //猜测传入的应该是span索引
flag6 = setTimeout(function () {                                //设置定时任务
flag1 = setInterval(function () {
_this.act("", "next");
}, _this.speedTime);
}, 1000);
}
})(i);
}
}
}
/* |xGv00|4b6fb41690ab6674e5b100289265e74a */

4.添加JS初始化代码

在Html文档body底部添加

<script type="text/javascript" src="hzslider.js"></script>

    <script type="text/javascript" language="javascript">
var scrollBox0=new ScrollBox();
scrollBox0.Context=[
{"img":"http://mat1.gtimg.com/news/huozhe/collection/12suimama.jpg","href":"http://news.qq.com/zt2012/living/12mother.htm"},
{"img":"http://mat1.gtimg.com/news/huozhe/collection/jizhenshi2.jpg","href":"http://news.qq.com/zt2012/living/emergency.htm"},
{"img":"http://mat1.gtimg.com/news/huozhe/collection/zengchengjie.jpg","href":"http://news.qq.com/zt2012/living/zengchengjie.htm"},
{"img":"http://mat1.gtimg.com/news/huozhe/collection/shuangfei.jpg","href":"http://news.qq.com/zt2012/living/shuangfei.htm"},
{"img":"http://mat1.gtimg.com/news/huozhe/collection/piaobo.jpg","href":"http://news.qq.com/zt2012/living/suiqian.htm"}
];
scrollBox0.sDot="scrollDot";
scrollBox0.pCur="prevCur";
scrollBox0.nCur="nextCur";
scrollBox0.cScrollPic="scrollPic";
scrollBox0.cWidth=900;
scrollBox0.cHeight=400;
scrollBox0.itemWidth=800; //当前图片宽度
scrollBox0.itemHeight=400; //当前图片高度
scrollBox0.speedTime = 3000;
scrollBox0.auto = true;
scrollBox0.init();
    </script>


5.效果


6.完成

结语:看见好东西就忍不住想看看偷笑 下载Demo

  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.