1.Html structure:
1 <div> 2 <!--图片区开始--> 3 <div> 4 <div><a><img src="/static/imghwm/default1.png" data-src="img/SlideshowImg_1.jpg" class="lazy" alt="Examples of how to create a carousel chart" ></a></div> 5 <div><a><img src="/static/imghwm/default1.png" data-src="img/SlideshowImg_2.jpg" class="lazy" alt="Examples of how to create a carousel chart" ></a></div> 6 <div><a><img src="/static/imghwm/default1.png" data-src="img/SlideshowImg_3.jpg" class="lazy" alt="Examples of how to create a carousel chart" ></a></div> 7 <div><a><img src="/static/imghwm/default1.png" data-src="img/SlideshowImg_4.jpg" class="lazy" alt="Examples of how to create a carousel chart" ></a></div> 8 <div><a><img src="/static/imghwm/default1.png" data-src="img/SlideshowImg_5.jpg" class="lazy" alt="Examples of how to create a carousel chart" ></a></div> 9 <div><a><img src="/static/imghwm/default1.png" data-src="img/SlideshowImg_6.jpg" class="lazy" alt="Examples of how to create a carousel chart" ></a></div>10 </div>11 <!--图片区结束-->12 13 <div>
<div>></div>14 <!--导航条开始-->15 <div>16 <div>1</div>17 <div>2</div>18 <div>3</div>19 <div>4</div>20 <div>5</div>21 <div>6</div>22 </div>23 <!--导航条结束-->24 </div>
</div><p>2.CSS style</p><div class="cnblogs_code"><pre class="brush:php;toolbar:false"> 1 * { 2 padding: 0; 3 margin: 0; 4 } 5 6 #SlideShowBox { 7 width: 790px; 8 margin: 0 auto; 9 position: relative;10 top: 100px;/*position: absolute;*/11 }12 13 #SlideShowBox .SlideShow .SlideShow_Img {14 position: absolute;15 16 }17 18 .btn {19 position: absolute;20 top: 150px;21 width: 40px;22 height: 60px;23 font-size: 40px;24 color: #fff;25 text-align: center;26 line-height: 60px;27 display: none;28 background-color: rgba(0,0,0,0.2);29 }30 31 .btn_right {32 position: absolute;33 right: 0;34 }35 /*设置导航条样式开始*/36 .tabs {37 position: absolute;38 left: 300px;39 top: 290px;40 }41 .tab {42 /*position: absolute;*/43 float: left;
44 width: 30px;45 height: 30px;46 text-align: center;47 line-height: 30px;48 border-radius: 100%;49 cursor: pointer;50 margin-right: 10px;51 background-color: white;52 }53 /*设置导航条样式结束*/54 .bg {55 background-color: red;56 }57 /*鼠标移到图片时出现之前隐藏的.btn盒子*/58 #SlideShowBox:hover .btn {59 display: block;60 cursor: pointer;61 }62 63 .btn:hover {64 background-color: rgba(0,0,0,0.5);65 }3.JQ code
1 var i = 0 ; 2 var timer; 3 $(function(){ 4 //显示第一张图片 5 $(".SlideShow_Img").eq(0).fadeIn(300).siblings().fadeOut(300); 6 ShowTime(); 7 //实现鼠标移到导航条时，停止轮播 8 $(".tab").hover(function(){ 9 //获取当前鼠标位置的索引,然后赋值给i，在调用show()方法10 i = $(this).index();11 Show();12 //清除轮播13 clearInterval(timer);14 },function(){15 ShowTime();16 });17 //实现鼠标移到图片时，停止轮播18 $(".SlideShow_Img").hover(function(){19 //获取当前鼠标位置的索引,然后赋值给i，在调用show()方法20 i = $(this).index();21 Show();22 //清除轮播23 clearInterval(timer);24 },function(){25 ShowTime();26 });27 //左侧点击按钮28 $(".btn_left").click(function(){29 //先停止轮播30 clearInterval(timer);31 if(i==0){32 i = 6;33 }34 i--;35 Show();36 ShowTime();37 });38 //右侧点击按钮39 $(".btn_right").click(function(){40 //先停止轮播41 clearInterval(timer);42 if(i==6){43 i = -1;44 }45 i++;46 Show();47 ShowTime();48 });49 });50 51 //创建显示图片的Show()方法52 function Show(){53 $(".SlideShow_Img").eq(i).fadeIn(300).siblings().fadeOut(300);54 //轮播图下导航条的功能：addClass()方法与removClass()方法55 $(".tab").eq(i).addClass("bg").siblings().removeClass("bg");56 }57 //创建轮播图ShowTime()方法58 function ShowTime(){59 //实现轮播方法：setInterval(function(){},time);60 timer = setInterval(function(){61 i++;62 if(i==6){63 i = 0;64 }65 Show();66 },2000);67 }4. Note: jq plug-in needs to be imported. This case uses: jquery-1.9.1.js
5. Learning experience: When I was learning carousel diagrams, I thought it was very complicated because I couldn’t understand it when I looked at other people’s codes. . . Learn mainly through videos.
The main things you need to know are .eq(), .setInterval(), .fadeIn(), .fadeOut()... and other methods.
The above is the detailed content of Examples of how to create a carousel chart. For more information, please follow other related articles on the PHP Chinese website!
Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
