javascript仿汽车之家焦点图

今天我们用原生js来写下汽车之家首页左侧今日焦点图，该效果不需要引入jQuery库。

淘建站为您提供更多_图片代码_图片轮播_轮播_焦点图，在此特别感谢您对我们的支持与厚爱！

HTML

首先我们放置6张图片，对应6个分页按钮及6个标题：

<div id="box">
    <div class="prev"></div>
    <div class="next"></div>
    <ul class="bigUl">
        <li style="z-index:1"><a href="http://www.sucaiq.com/"><img src="images/1.jpg" alt="图1" /></a></li>
        <li><a href="http://www.sucaiq.com/"><img src="images/2.jpg" alt="图2" /></a></li>
        <li><a href="http://www.sucaiq.com/"><img src="images/3.jpg" alt="图3" /></a></li>
        <li><a href="http://www.sucaiq.com/"><img src="images/4.jpg" alt="图4" /></a></li>
        <li><a href="http://www.sucaiq.com/"><img src="images/5.jpg" alt="图5" /></a></li>
        <li><a href="http://www.sucaiq.com/"><img src="images/6.jpg" alt="图6" /></a></li>
        <li><a href="http://www.sucaiq.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.sucaiq.com/">定位精品路线 原创试驾奇瑞艾瑞泽3</a></li>
            <li><a href="http://www.sucaiq.com/">锂电池是亮点 米儿低速电动车设计解读</a></li>
            <li><a href="http://www.sucaiq.com/">舒适及操控更上一层楼 测试长安金欧诺</a></li>
            <li><a href="http://www.sucaiq.com/">外观动感/配置丰富 天籁2.0L用车记</a></li>
            <li><a href="http://www.sucaiq.com/">走到哪都信心十足 普拉多用车心得</a></li>
            <li><a href="http://www.sucaiq.com/">全新东风标致508 驾乘尽享的中高级杰座</a></li>
            <li><a href="http://www.sucaiq.com/">C4L 动力快人一步礼遇更胜一筹</a></li>
        </ul>
    </div>
</div>

jQuery

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秒钟
    }
}