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、效果