1. Implementation principle
(1) Place all pictures in a parent container div, and set the appearance and hiding of the pictures through the display attribute;
(2) The carousel diagram is divided into manual carousel and automatic carousel;
The focus of manual carousel is to click on the small circle below the picture each time you click on it, get its index number, and let the picture with the corresponding index number be displayed, and the small circle at this time is highlighted;
Automatic carousel: Use the timer setInterval() to play the picture every certain time.
(3) All basic knowledge: dom operation, timer, event application.
2. Carousel picture page layout:
<div id="content"> <!-- Total parent container --><div> <!-- Container containing pictures --><div><img src="./img/lunbo1.jpg"></div><div><img src="./img/lunbo2.jpg"></div><div><img src="./img/lunbo3.jpg"></div><!-- Indication circle below the picture --><ul><li id='pic1'>●</li><li id='pic2'>●</li></ul><!-- Scroll the left and right arrows of the picture back and forth --><a href="#"><span></span></a><a href="#"><span>></span></a></div>
3. CSS style of carousel diagram:
#content{width: 100%;height:500px;position: relative;}.carousel-inner{position: relative;width: 100%;overflow: hidden; height:500px; }.carousel-inner>.item>img{display: block; line-height: 1; z-index: 1;}.carousel-indicators{position: absolute;bottom:10px;left:45%;z-index: 2;list-style-type: none;}.carousel-indicators li{display:inline-block;padding: 0 15px;font-size: 24px;color:#999; cursor: pointer;z-index: 2;}.active1{font-size: 28px;color:#fff;}.carousel-control{position: absolute;text-decoration:none;color: #999;font-weight: bold;opacity: .5;font-size: 40px;z-index: 3;}.carousel-control:hover{color:fff;text-decoration: none;opacity: .9;outline: none;font-size: 42px;}.prev{top: 30%; left:20px; }.next{top:30%;right: 20px;}4. JS implementation code for carousel diagram:
window.onload = function(){//Carousel initialization var lunbo = document.getElementById('content');var imgs = lunbo.getElementsByTagName('img'); var uls = lunbo.getElementsByTagName('ul');var lis = lunbo.getElementsByTagName('li');//In the initial state, a circle is in the highlight mode lis[0].style.fontSize = '26px';lis[0].style.color = '#fff';//Define a global variable to automatically change the order of the image carousel var pic_index = 1;//Automatic carousel. Use pic_time to record playback, you can use clearInterval() to clear it at any time. var pic_time = setInterval(autobofang,3000);//Manual carousel for(var i=0;i<lis.length;i++){ lis[i].addEventListener("mouseover",change,false);}function change(event){ var event=event||window.event;var target=event.target||event.srcElement; var children = target.parentNode.children; for(var i=0;i<children.length;i++){if(target == children[i]){ picChange(i); } }} //Picture switching function function picChange(i){ //Let all pictures not be displayed, and all circles are in normal style for(var j=0;j<imgs.length;j++){imgs[j].style.display = 'none'; lis[j].style.fontSize = '24px';lis[j].style.color = '#999';}//Let the selected index image be displayed, and the corresponding circle is highlighted imgs[i].style.display = 'block'; lis[i].style.fontSize = '26px';lis[i].style.color = '#fff'; }//Autoplay event processing function autobofang(){if(pic_index >= lis.length){pic_index = 0;}change1(pic_index);pic_index++;}//Events in the conversion of the automatic playback image function change1(index){ picChange(index);//Mouse moves into the ul tag, automatically plays the picture pause uls[0].addEventListener("mouseover",pause,false);//Mouse moves out the ul tag, automatically plays the picture continues uls[0].addEventListener("mouseout",go,false);}//Auto plays the pause function pause(event){var event=event||window.event;var target=event.target||event.srcElement;switch(target.id){case "pic1":clearInterval(pic_time); break;case "pic2":clearInterval(pic_time);break;case "pic3":clearInterval(pic_time);break;}}//Auto play picture continuing function go(event){var event=event||window.event;var target=event.target||event.srcElement; switch(target.id){case "pic1":pic_index = 1; pic_time = setInterval(autobofang,3000);break;case "pic2":pic_index = 2; pic_time = setInterval(autobofang,3000);break;case "pic3":pic_index = 3; pic_time = setInterval(autobofang,3000);break;}}}5. Reproduction picture:
6. Problems and shortcomings encountered
Problem: When the mouse moves into the ul tag for the first time, the automatic carousel picture stops, the mouse moves out, and the automatic carousel continues, but as the operation is running, the carousel picture changes faster and faster, and clicking the ul tag at this time no longer works.
Cause of the problem: When the timer is used again after stopping the carousel, the value is not assigned to pic_time for recording, so the mouse is not moved to the ul tag again to clear the timer. Therefore, clicking the ul tag again cannot pause the automatic carousel playback, and the speed is getting faster and faster.
Inadequacy: The effect of no-real-scrolling like the Taobao carousel chart has not been achieved, and the indicator effect of the left and right arrows has not been completed. These will continue to be learned in the later stage, improve and share.