First, I will show you the bootstrap picture carousel. The effect is as follows. If you feel the effect is pretty good, please continue reading and refer to the implementation code.
I won’t say much nonsense, I will just post the code to you. The specific code is as follows:
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- The above 3 meta tags *must* be placed first, and any other content *must* follow them! --><title>Picture Carousel_01</title><!-- Bootstrap --><link href="../bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet"><script src="../js/jquery-2.1.4.min.js"></script><script src="../bootstrap-3.3.5-dist/js/bootstrap.min.js"></script></head><body><!--Author: Kyle Time: 2016-02-20 Description: carouseldate-interval="4000" Dwell time/picture supports the left and right direction keys of the keyboard to carousel direction selection for the picture--><div><div id="carousel-example-generic"><ol><li data-target="#carousel-example-generic" data-slide-to="0"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="0"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li><li data-target="#carousel-example-generic" data-slide-to="3"></li></ol><div><div><img src="../img/picture carousel/pic01.jpg" /></div><div><img src="../img/picture carousel/pic02.jpg" /><!--Text to be displayed on the picture--><div><h3>Lenovo Campus Ambassador</h3></div></div><div><img src="../img/picture carousel/pic03.jpg" /></div><div><img src="../img/Picture Carousel/pic04.jpg" /></div><!-- Controls --><a href="#carousel-example-generic" role="button" data-slide="prev"><span aria-hidden="true"></span><span>Previous</span></a><a href="#carousel-example-generic" role="button" data-slide="next"><span aria-hidden="true"></span><span>Next</span></a></div></div><!--Set the time interval, through JavaScript, this can be started automatically compared to css attribute setting without human intervention --><script>$(".carousel").carousel({interval: 4000})</script></body></html>The above is the sample code of the BootStrap-based image carousel effect display based on BootStrap that the editor 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!