hao123網(wǎng)站大家都很熟悉吧，具體的效果不用我多說吧，感興趣的朋友可以去參考效果圖，下面小編給大家分享下實現(xiàn)代碼思路，當(dāng)然大家可以根據(jù)需求適當(dāng)?shù)奶砑有薷膭h除代碼。
關(guān)鍵代碼如下所示：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>圖片輪播</title><style>.warp{width: 600px;height: 750px;position: relative;margin:30px auto 0;overflow: hidden;}#box{width: 600px;height: 750px;position: absolute;top: 0px;left: 0px;overflow: hidden;/*overflow-x:auto;*/}#box #con{width: 6000px;height: 750px;overflow: hidden;}#con img{float: left;width: 600px;height: 750px;}#btnL{position: absolute;left: 0px;top: 366px;width: 36px;height: 36px;background: url(images/btnL.png) 0 0 no-repeat;cursor: pointer;}#btnR{position: absolute;right: 0px;top: 366px;width: 36px;height: 36px;background: url(images/btnR.png) 0 0 no-repeat;cursor: pointer;}#num{position: absolute;bottom: 10px;left: 148px;overflow: hidden;list-style: none;}#num li{float: left;margin:0 5px;font-size: 16px;line-height: 25px;height: 25px;width: 25px;background: #ccc;text-align: center;cursor: pointer;}#num li.select{background-color: green;color: white;}</style></head><body><div class="warp"><div id="box"><div id="con"><img src="images/meinv1.jpg" alt=""><img src="images/meinv2.jpg" alt=""><img src="images/meinv3.jpg" alt=""><img src="images/meinv4.jpg" alt=""><img src="images/meinv5.jpg" alt=""><img src="images/meinv6.jpg" alt=""></div></div><div id="btnL"></div><div id="btnR"></div><ul id="num"><li class="select">1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul></div><script>var box=document.getElementById('box');var con=document.getElementById('con');var imgs=con.getElementsByTagName('img');var btnL=document.getElementById('btnL');var btnR=document.getElementById('btnR');var num=document.getElementById('num');var lis=num.getElementsByTagName('li');var timer1=null,timer2=null;var imgw=imgs[0].clientWidth;var x=0;function imgScroll(){//圖片切換var start=box.scrollLeft;var end=imgw*x;var change=end-start;var minstep=0;var maxstep=30;var stepLength=change/maxstep;clearInterval(timer2);timer2=setInterval(function(){minstep++;// console.log(minstep);if (minstep>=maxstep) {clearInterval(timer2);}start+=stepLength;box.scrollLeft=start;},20) for (var i = 0; i < lis.length; i++) {lis[i].className='none';}lis[x].className='select';}function move(){//默認(rèn)向左每隔3s滾動clearInterval(timer1);timer1=setInterval(function(){x++;if (x>=imgs.length) {x=0;}imgScroll();for (var i = 0; i < lis.length; i++) {lis[i].className='none';lis[x].className='select';}},3000);}move();//啟動默認(rèn)滾動函數(shù)；btnR.onclick=function(){clearInterval(timer1);x++;if (x>=imgs.length) {x=0;}imgScroll();move();}btnL.onclick=function(){clearInterval(timer1);x--;if (x<0) {x=imgs.length-1;}imgScroll();move();}for (var i = 0; i < lis.length; i++) {lis[i].index=i;lis[i].onclick=function(){x=this.index;imgScroll();move();}}</script></body></html>以上所述是小編給大家介紹的JS仿hao123導(dǎo)航頁面圖片輪播效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點
疑難解答
