基于js仿汽车之家2015新版焦点图代码
今天给大家分享一款仿汽车之家2015新版焦点图代码。这是一款基于jQuery实现的适合电子商务网站或者企业产品展示功能特效。效果图如下:
实现的代码。
html代码:
<div id="box"> <div class="prev"> </div> <div class="next"> </div> <ul class="bigUl"> <li style="z-index: 1"><a href="http://www.w2bc.com/"> <img src="images/1.jpg" alt="图1" /></a></li> <li><a href="http://www.w2bc.com/"> <img src="images/2.jpg" alt="图2" /></a></li> <li><a href="http://www.w2bc.com/"> <img src="images/3.jpg" alt="图3" /></a></li> <li><a href="http://www.w2bc.com/"> <img src="images/4.jpg" alt="图4" /></a></li> <li><a href="http://www.w2bc.com/"> <img src="images/5.jpg" alt="图5" /></a></li> <li><a href="http://www.w2bc.com/"> <img src="images/6.jpg" alt="图6" /></a></li> <li><a href="http://www.w2bc.com/"> <img src="images/7.jpg" alt="图7" /></a></li> </ul> <ul class="numberUl"> <li class="night"><a href="javascript:;">1</a></li> <li><a href="javascript:;">2</a></li> <li><a href="javascript:;">3</a></li> <li><a href="javascript:;">4</a></li> <li><a href="javascript:;">5</a></li> <li><a href="javascript:;">6</a></li> <li><a href="javascript:;">7</a></li> </ul> <div> <ul class="textUl"> <li style="display: block;"><a href="http://www.w2bc.com/">定位精品路线 原创试驾奇瑞艾瑞泽3</a></li> <li><a href="http://www.w2bc.com/">锂电池是亮点 米儿低速电动车设计解读</a></li> <li><a href="http://www.w2bc.com/">舒适及操控更上一层楼 测试长安金欧诺</a></li> <li><a href="http://www.w2bc.com/">外观动感/配置丰富 天籁2.0L用车记</a></li> <li><a href="http://www.w2bc.com/">走到哪都信心十足 普拉多用车心得</a></li> <li><a href="http://www.w2bc.com/">全新东风标致508 驾乘尽享的中高级杰座</a></li> <li><a href="http://www.w2bc.com/">C4L 动力快人一步礼遇更胜一筹</a></li> </ul> </div> </div>
js代码:
window.onload = function () { var oBox = document.getElementById(‘box‘); var oPrev = getByClass(oBox, ‘prev‘)[0]; var oNext = getByClass(oBox, ‘next‘)[0]; var oBigUl = getByClass(oBox, ‘bigUl‘)[0]; var aLiBig = oBigUl.getElementsByTagName(‘li‘); var oNumUl = getByClass(oBox, ‘numberUl‘)[0]; var aLiNumber = oNumUl.getElementsByTagName(‘li‘); var oTextUl = getByClass(oBox, ‘textUl‘)[0]; var aLiText = oTextUl.getElementsByTagName(‘li‘); var nowZindex = 1; var now = 0; function tab() { for (var i = 0; i < aLiNumber.length; i++) { aLiNumber[i].className = ‘‘; } aLiNumber[now].className = ‘night‘; aLiBig[now].style.zIndex = nowZindex++; aLiBig[now].style.opacity = 0; startMove(aLiBig[now], ‘opacity‘, 100); for (var i = 0; i < aLiText.length; i++) { aLiText[i].style.display = ‘none‘; } aLiText[now].style.display = ‘block‘ } for (var i = 0; i < aLiNumber.length; i++) { aLiNumber[i].index = i; aLiNumber[i].onclick = function () { if (this.index == now) return; now = this.index; tab(); } } oNext.onmouseover = oPrev.onmouseover = oBigUl.onmouseover = function () { startMove(oPrev, ‘opacity‘, 100); startMove(oNext, ‘opacity‘, 100) } oNext.onmouseout = oPrev.onmouseout = oBigUl.onmouseout = function () { startMove(oPrev, ‘opacity‘, 0); startMove(oNext, ‘opacity‘, 0) } oPrev.onclick = function () { now-- if (now == -1) { now = aLiNumber.length - 1; } tab(); } oNext.onclick = function () { now++ if (now == aLiNumber.length) { now = 0; } tab(); } var timer = setInterval(oNext.onclick, 3000) oBox.onmouseover = function () { clearInterval(timer) } oBox.onmouseout = function () { timer = setInterval(oNext.onclick, 3000)//改变速度修改3000 ,例如3000=3秒钟 } }
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。