1. Key points:
1. When the page is loaded, the pictures overlap and stack together [absolute positioning];
2. The first picture shows, others are hidden;
3. Set the subscript and set the color of the subscript so that it moves with the picture;
4. Move the mouse to the picture, display the left and right moving icons, move the mouse away, and continue to carousel;
2. Implementation code:
html code:
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>Carousel chart</title><link href="css/LunBimg.css" rel="stylesheet" /><script src="js/jquery-1.10.2.min.js"></script><script src="js/LunBimg.js"></script></head><body><div id="allswapImg"><div><img src="image/1.jpg" /></div><div><img src="image/2.jpg" /></div><div><img src="image/3.jpg" /></div><div><img src="image/4.jpg" /></div><div><img src="image/5.jpg" /></div><div><img src="image/6.jpg" /></div></div><div><</div><div>></div><div id="tabs"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div></body></html>
css code:
* {padding:0px;margin:0px;}.swapImg {position:absolute;}.btn {position:absolute;height:90px;width:60px;background:rgba(0,0,0,0.5);/*Set the background color to black and the transparency is 50%*/color:#ffffff;text-align:center;line-height:90px;font-size:40px;top:155px;/*Image height 400/2-45*/cursor:pointer;/*display:none;*/}.btnRight {left:840px;/*Image width 900-Navigation width 60*/}#tabs {position:absolute;top:370px;margin-left:350px;}.tab {height:20px;width:20px;background:#05e9e2;line-height:20px;text-align:center;font-size:10px;float:left;color:#ffffff;margin-right:10px;border-radius:100%;cursor:pointer;}.bg {background:#00ff21;}js code:
/// <reference path="_references.js" />var i = 0;//Global variable//Define a variable to obtain carousel var time;$(function (){//1. After the page is loaded, find the first object with Class equal to swapImg, let it display it, its sibling element is hidden $(".swapImg").eq(0).show().siblings().hide();showTime();//When the mouse is placed on the subscript to display the picture, the mouse moves away and continues to carousel $(".tab").hover(function (){//Get the index of the subscript where the current mouse is located i = $(this).index();show();//How to stop after the mouse is put on? The process of getting the variable, clear the carousel, and pass the variable into clearInterval(time);}, function (){showTime();});//Requirements four, when I click left and right to switch $(".btnLeft").click(function (){//1. Before clicking, stop the carousel clearInterval(time);//After clicking, -1if (i == 0){i =6;}i--;show();showTime();});$(".btnRight").click(function () {//1. Before clicking, you need to stop the carousel clearInterval(time);//After clicking, -1if (i == 5) {i = -1;}i++;show();showTime();});});function show() {//$("#allswapImg").hover(function ()//{// $(".btn").show();//}, function ()//{// $(".btn").hide();//});//fadeIn(300) fades in, fadeout(300) fades out, filtering time 0.3s$(".swapImg").eq(i).fadeIn(300).siblings().fadeOut();$(".tab").eq(i).addClass("bg").siblings().removeClass("bg");}function showTime(){time = setInterval(function() {i++;if (i == 6) {//There are only 6 pictures, so i cannot exceed 6. If i is equal to 6, we will make it equal to the first picture i = 0;}show();}, 3000);}The above is the code of the implementation of the carousel diagram based on JavaScript introduced to you. 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!