js入门练习

html：

<div class="box" id="box">    <ul class="tabImg" id="tabImg">        <li><img src="images/1.jpg" ></li>        <li><img src="images/2.jpg" ></li>        <li><img src="images/3.jpg" ></li>        <li><img src="images/4.jpg" ></li>        <li><img src="images/5.jpg" ></li>    </ul>    <div class="tabList" id="tabList">        <a href="javascript:;" class="active"></a>        <a href="javascript:;"></a>        <a href="javascript:;"></a>        <a href="javascript:;"></a>        <a href="javascript:;"></a>    </div></div>

css：

<style>    *{margin: 0; padding: 0; list-style: none;}    .box{ width: 790px; height: 340px; margin: 200px auto; position: relative; overflow: hidden;}    .tabImg{ position: absolute; left: 0; top: 0; width: 500%; transition: 0.35s ease-in-out;}    .tabImg li{ float: left;}    .tabImg li img{ vertical-align: top;}    .tabList{ position: absolute; left: 50%; bottom: 10px; margin-left: -82px; padding: 3px 10px; background: rgba(255,255,255,0.5); border-radius: 12px;}    .tabList a{ display: inline-block; margin: 0 5px; width: 15px; height: 15px; background-color: white; border-radius: 100%;}    .tabList a.active{ background-color: firebrick;}</style>

js：

<script>    var oUl = document.getElementById('tabImg');    var oList = document.getElementById('tabList');    var aList = oList.getElementsByTagName('a');    for(var i=0;i<aList.length;i++){        aList[i].index = i;        aList[i].onmouseover = function(){            for(var i=0;i<aList.length;i++){                aList[i].className = '';            }            this.className = 'active';            oUl.style.left = -790 * this.index + 'px';        }    }</script>

---

aList[i].index = i;
设置索引值

利用li左右滚动实现焦点图轮换效果

---