左右切换+焦点图

1、css

/*游戏特色*/
#box{width: 1200px;    margin: 20px auto;position:absolute; top:1720px; left:10px;}
#imgWrap a{width:56px; height:119px;position: absolute;top: 50%;margin-top: -25px;text-align: center;z-index:1000;}
#prev{left:-20px;}
#next{right:-20px;}
#imgWrap a:hover{opacity: 1;}
#box ul{font-size: 0;text-align: center;}
#box li{width: 20px;height: 20px;border-radius: 50%;background: #ccc;list-style: none;    display: inline-block;margin:10px 10px;cursor: pointer;position: relative;}
#box li img{width: 78px;background: #fff;position: absolute;top:-80px;left:50%;margin-left: -39px;padding: 5px;}
.te_zhe{position:absolute; top:802px; left:446px;}
#imgWrap{width:1200px; height:910px; position:relative;}
.list_people1{display:none;}
.list_people{ position:absolute; top:58px; right:10px}
.list_nei1{display:none;}
.yuandian{position:absolute; top:720px; left:230px;}
.list_nei{ width:542px; position:absolute; top:216px; left:73px;}
.imga{ position:absolute; top:365px; left:73px;}
.list_nei1 h3{color:#fff; font-size:40px; margin-bottom:18px;}
.list_nei1 p{color:#fffde4; font-size:14px; color:#fffde4;}

2、html

<div id="box">
                    <div id="imgWrap">
                        <a href="javascript:;" id="prev"><img src="images/prevBtn.png"/></a>
                        <a href="javascript:;" id="next"><img src="images/nextBtn.png"/></a>
                        <img src="images/te_img1.jpg" class="imga" id="imga"/>
                        <div class="list_nei" id="list_nei">
                            <div class="list_nei1" style="display:block;">
                            <h3>100%偵探漫畫式劇情</h3>
                            <P>故事講述由「神秘怪盜」盜走古悉蘭寶石，而引發與千年古國古悉蘭、各種神秘組織相關的冒險故事。玩家們將不惜一切與主角「琉星」成為偵探追擊謎樣怪盜，並展開一場愛與夢想的奇妙冒險！</P>
                            </div>
                            <div class="list_nei1">
                            <h3>最強のパーティを結集</h3>
                            <P>豐富劇情關卡，多種特色玩法，包含多人PVP、副本Boss、團戰等，玩家通過簡單、快速的操作，便能夠組合出豐富的連擊，再配合絢麗的技能，和精心原創戰鬥音效，體驗一場暢快淋漓的戰鬥。</P>
                            </div>
                            <div class="list_nei1">
                            <h3>異能覺醒！超能力を発動せよ</h3>
                            <P>遊戲採用高自由度，無鎖定動態操作，打擊感十足！搭配漫畫式劇情，八系元素：金、木、水、火、土、雷、光、乙太，異能玩法可依喜好組合專屬的技能樹，打造最強戰鬥招式。</P>
                            </div>
                            <div class="list_nei1">
                            <h3>角色養成 最高の伴侶を探せ</h3>
                            <P>經典紙娃娃系統再現，提供多達百件特色造型、時裝、道具、坐騎，塑造獨一無二的亮麗外型！CP戀愛計畫，和心儀的對象簽訂愛情契約吧！體驗純愛冒險，尋找你的命定伴侶。</P>
                            </div>
                            <div class="list_nei1">
                            <h3>全明星卡通CV陣容</h3>
                            <P>多位知名CV獻聲，帶領你回到童年卡通時期的青春記憶，透過遊戲尋找你最熟悉的聲音，貼合劇情台詞，配上恰到好處的音樂與聲線，徜徉在這個奇幻世界中。</P>
                            </div>
                        </div>
                        <div class="list_people" id="list_people">
                            <div class="list_people1" style="display:block;">
                            <p><img src="images/1.png"  /></p>
                            </div>
                            <div class="list_people1">
                              <p><img src="images/2.png" /></p>
                            
                            </div>
                            <div class="list_people1">
                              <p><img src="images/3.png"/></p>
                            
                            </div>
                            <div class="list_people1">
                              <p><img src="images/4.png" /></p>
                            </div>
                            <div class="list_people1">
                              <p><img src="images/5.png"/></p>
                            </div>
                        </div>
                        <ul class="yuandian">
                            <li style="background: #ff0;"><!--<img src="img/1.jpg"/>--></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                        <div class="te_zhe">
                          <img src="images/te_zheceng.png" /> </div>
                        </div>
            
                </div>

3、js

window.onload=function(){
var box=document.getElementById("box");
var as=box.querySelectorAll('a');
var img=document.getElementById("imga");
var lis=box.querySelectorAll('li');
var list_nei=document.getElementById("list_nei");
var list_nei1=list_nei.getElementsByTagName('div');
var list_people=document.getElementById("list_people");
var list_people1=list_people.getElementsByTagName('div');
var n=0;
var imgArr=['1','2','3','4','5'];

//下一张
as[1].onclick=function(){
n++;

if(n>imgArr.length-1){
n=0;
}

changeImg();
};

//上一张
as[0].onclick=function(){
n--;

if(n<0){
n=imgArr.length-1;
}

changeImg();
};

function changeImg(){
img.src="images/te_img"+imgArr[n]+".jpg";
for(var i=0;i<lis.length;i++){
lis[i].style.background='';
list_people1[i].style.display='none';
list_nei1[i].style.display='none';
}
lis[n].style.background='#ff0';
list_people1[n].style.display='block';
list_nei1[n].style.display='block';
}

for (var i=0;i<lis.length;i++) {
lis[i].index=i;
//圆点点击事件
lis[i].onclick=function(){
n=this.index;
changeImg();

};

}
};

4、使用方法

实现点击左右以及下方小图标实现切换

5、效果

http://bs.kimi.com.tw/