基于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="data:images/1.jpg" alt="图1" /></a></li>
            <li><a href="http://www.w2bc.com/">
                <img src="data:images/2.jpg" alt="图2" /></a></li>
            <li><a href="http://www.w2bc.com/">
                <img src="data:images/3.jpg" alt="图3" /></a></li>
            <li><a href="http://www.w2bc.com/">
                <img src="data:images/4.jpg" alt="图4" /></a></li>
            <li><a href="http://www.w2bc.com/">
                <img src="data:images/5.jpg" alt="图5" /></a></li>
            <li><a href="http://www.w2bc.com/">
                <img src="data:images/6.jpg" alt="图6" /></a></li>
            <li><a href="http://www.w2bc.com/">
                <img src="data: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