This is my own to do a carousel map, you can see, I have not been optimized. Where there's room for improvement, private conversation.
The layout, whatever you're doing.
<div class= "Slider" id= "Circle" > <a href= "" ></a> ' <ul class= " Circle "> <li onclick=" lun (1) "id=" Ico1 ">1</li> <li onclick=" LUN (2) "id=" Ico2 ">2</li> < Li onclick= Lun (3) "id=" Ico3 ">3</li> <li onclick=" LUN (4) "id=" Ico4 ">4</li> <li onclick=" LUN (5 ) "id=" Ico5 >5</li> <li class= "current" onclick= "LUN (6)" id= "Ico6" >6</li> </ul> <div Class= "Arrow" > <a href= "javaScript:;" class= "Arrow-l" onclick= "Bo2 ()" id= "Bo1" ><</a> <a href= " JavaScript:; "class=" Arrow-r "onclick=" Bo1 () "id=" Bo2 ">></a> </div> </div> <script> var
c = 0;
var T; Window.onload = function () {t = setinterval ("Bo1 ()", 5000);} function lun (num) {c = num; var ptn = Document.getelementb
Yid ("Circle"). getElementsByTagName ("img") [0]; for (var i = 1; i < 7;i++) {var li = document.getElementById ("Circle"). getElementsByTagName ("Li") [i-1]; li.stYle.backgroundcolor = "#3E3E3E";
if (num = i) {ptn.src = "img/" + i + "p.jpg"; li.style.backgroundColor = "#B61B1F";} The function Bo1 () {if (c>=6) {c = 0;} C + + LUN (c);} function Bo2 () {if (c<=1) {c = 7;} c--; Lun (c);} </scrip T>
Below look at the custom scroll bar with the mouse wheel demo
The specific code looks like this:
The above is a small series to introduce JavaScript Carousel map and custom scroll bar with the mouse wheel share code stickers, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!