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 the process of carousel var time;$(function (){ //1. After the page is loaded, find the first object with Class equal to swapImg and 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 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, -1 if (i == 0) { i =6; } i--; show(); showTime(); }); $(".btnRight").click(function () { //1. Before clicking, stop the carousel clearInterval(time); // After clicking, -1 if (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 example of simply realizing the effect of carousel images is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.