This article shares the specific code for using js to create carousel effects on the homepage of general websites for your reference. The specific content 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> <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> </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 num=document.getElementById('num'); var num=document.getElementById('num'); var btnR=document.getElementById('num'); var num=document.getElementById('num'); 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 specific effect is based on the effect of the hao123 navigation page picture carousel. You can go to the website to refer to it.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.