html跑马灯效果源代码，跑马灯效果.html 跑马灯效果
table .pao {
border: 1px solid #e5e5e5;
padding: 10px 20px;
}
table .on {
border-color: red;
color: red;
}
var paomadeng = {
currentIndex: 1, //当前索引
indexCount: 12, //个数
timer: 0, //定时器
currentCycle: 0, //当前圈数
cycles: 4, //跑的圈数
speed: 400, //速度，即定时器的时间间隔
key: 0, //钥匙，随机数
btn: 0, //触发按钮
classPrefix: "pao-", //元素类名class前缀
reset: function() {
//触发对象
paomadeng.btn = this;
paomadeng.btn.style.display = "none";
clearInterval(paomadeng.timer);
paomadeng.currentCycle = 0;
paomadeng.speed = 400;
paomadeng.key = il(Math.random() * paomadeng.indexCount);
console.log("key:" + paomadeng.key);
paomadeng.run();
},
run: function() {
console.log("speed:" + paomadeng.speed);
var before = paomadeng.currentIndex == 1 ? paomadeng.indexCount : paomadeng.currentIndex - 1;
//设置上⼀索引的类名
var beforeNode = ElementsByClassName(paomadeng.classPrefix + before)[0];
var beforeClassNewName = place("on", "");
beforeNode.className = beforeClassNewName;
//设置当前索引的类名
var currentNode = ElementsByClassName(paomadeng.classPrefix + paomadeng.currentIndex)[0]; currentNode.className += " on"; //注意前⾯有空格
paomadeng.upSpeed();
paomadeng.downSpeed();
paomadeng.currentIndex += 1;
paomadeng.currentIndex = paomadeng.currentIndex > paomadeng.indexCount ? 1 : paomadeng.currentIndex; },
//加速
upSpeed: function() {
//前2圈且speed>100时加速
if (paomadeng.currentCycle < 2 && paomadeng.speed > 100) {
paomadeng.speed -= 5 * paomadeng.currentIndex;
paomadeng.stop();
paomadeng.start();
}
},
//增加圈数 并 减速
html导航源码downSpeed: function() {
//增加圈数
if (paomadeng.currentIndex == paomadeng.indexCount) {
paomadeng.currentCycle += 1;
}
//如果当前所跑圈数⼩于总圈数-1 并且 速度⼩于400，那么减速
if (paomadeng.currentCycle > les - 1 && paomadeng.speed < 400) {
paomadeng.speed += 20;
paomadeng.stop();
paomadeng.start();
}
/
/如果当前所跑圈数⼤于总圈数 且 索引值等于key，那么停⽌奔跑
if (paomadeng.currentCycle > les && paomadeng.currentIndex == paomadeng.key) { paomadeng.stop();
paomadeng.showPrize();
}
},
stop: function() {
clearInterval(paomadeng.timer);
},
start: function() {
paomadeng.timer = setInterval(paomadeng.run, paomadeng.speed);
},
showPrize: function() {
//过⼀会再显⽰提⽰信息
setTimeout(function() {
alert("恭喜，你中了" + paomadeng.key + "等奖");
paomadeng.btn.style.display = "block";
}, 700);
}
};
};
1234 125 116 10987⼀键复制
编辑
Web IDE
原始数据
按⾏查看
历史

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。