你的位置:首页 > Java教程

[Java教程]基于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秒钟      }    }

via:http://www.w2bc.com/Article/28435