CSS部分：

ul{ margin: 0; padding: 0; }
                li{ list-style: none; }

                #ad{ width: 298px; height: 208px; border: 1px #ff6300 solid; padding: 4px 1px; text-align: center; }
                #ad .listL{ float: left; }
                #ad .listR{ float: right; }
                #ad li{ width: 48px; height: 26px; border: 1px #ffadad solid; background: #fff7f7; color: #333; line-height: 26px; margin-bottom: 2px; cursor: pointer; }
                #ad img{ height: 206px; width: 188px; background: url(images/loader_ico.gif) no-repeat center center; }
                #ad .cur{ background: #ff8494; color: #fff }
 

<div id="ad">
                <ul class="listL">
                       <!--  <li class="cur"></li>
                       <li></li>
                       <li></li>
                       <li></li>
                       <li></li>
                       <li></li>
                       <li></li> -->
                </ul>
                <a href="#"><img src="" alt=""></a>
                <ul class="listR">
                        <!-- <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li> -->
                </ul>
        </div>
 

window.onload = function(){
                var oDiv = document.getElementById('ad');
                var aUl = oDiv.getElementsByTagName('ul');
                var oImg = oDiv.getElementsByTagName('img')[0];
                var aImg = ['images/pic1.jpg','images/pic2.jpg','images/pic3.jpg','images/pic4.jpg','images/pic5.png','images/pic6.png','images/pic7.png','images/pic8.png','images/pic1.jpg','images/pic2.jpg','images/pic3.jpg','images/pic4.jpg','images/pic5.png','images/pic6.png'];
                var aTxt = ['連衣裙','T恤','雪紡','鉛筆褲','婚紗','外套','連體褲','包包','涼鞋','單鞋','太陽鏡','絲襪','帆布鞋','情侶鞋'];
                var len = aImg.length;
                var oldNum = 0;
                var num = 0;
                var timer = null;
                var speed = 1;

                // 建立新增左右兩側li
                for( var i = 0; i < len/2; i++){
                        aUl[0].innerHTML += '<li>'+ aTxt[i] +'</li>'
                        aUl[1].innerHTML += '<li>'+ aTxt[i + len/2] +'</li>'
                }

                var aLiL = aUl[0].getElementsByTagName('li');
                var aLiR = aUl[1].getElementsByTagName('li');
                var arrLi = []; 
                // 將遍歷的所有li新增到陣列arrLi中
                for( var i = 0; i < aLiL.length; i++){
                        arrLi.push(aLiL[i]);
                }
                for( var i = 0; i < aLiR.length; i++){
                        arrLi.push(aLiR[i]);
                }
                // console.log(arrLi.length);

                // 函式初始化
                function init(n){
                        oImg.src = aImg[n];
                        arrLi[oldNum].className = '';
                        arrLi[n].className = 'cur';
                        oldNum = n;     
                }
                init(0);

                // 滑鼠經過li，圖片切換
                for(var i = 0; i < len; i++){
                        arrLi[i].index = i;
                        arrLi[i].onmouseover = function(){
                                init(this.index);
                        }
                };

                // 定時切換
                function fnTimer(n){
                        timer = setInterval(function(){
                                
                                // type1:順序切換
                               /* n ++;
                                if(n == len){
                                        n = 0;
                                }*/

                                // type2：倒序切換
                                if(n == len-1){
                                        speed = -1;
                                }else if(n== 0){
                                        speed = 1;
                                }
                                n += speed;
                                init(n);
                        },1000);
                };
                fnTimer(0);

                // 滑鼠移入，清除定時器
                oDiv.onmouseover = function(){
                        clearInterval(timer);
                };

                // 滑鼠移出，開啟定時器
                oDiv.onmouseout = function(){
                        fnTimer(oldNum);
                };
         };
 

預覽效果：