Everyone is familiar with the hao123 website. I don’t need to say more about the specific effects. Interested friends can refer to the renderings. The following editor will share with you the idea of implementing the code. Of course, you can appropriately add, modify and delete the code according to your needs.
The key code is as follows:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Picture carousel</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><div id="box"><div id="con"><img src="images/meinv1.jpg"><img src="images/meinv2.jpg"><img src="images/meinv3.jpg"><img src="images/meinv4.jpg"><img src="images/meinv5.jpg"><img src="images/meinv6.jpg"></div><div id="btnL"></div><div id="btnR"></div><ul id="num"><li>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(){//Image switch 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(){//Default scrolling to the left every 3 seconds 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();//Start the default scroll function; 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>The above is the image carousel effect of the JS imitation hao123 navigation page introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!