做前端常用的网站及软件seo专员工资一般多少
在学校学习前端也有一段时间了，也学习到了一些东西。
今天学习了用jquery如何制作轮播图
今天就用了这五张图片制作了一个轮播图。
首先设立一个div把这五张图片放进去
<div id="igs"> <a class="ig" href="#" style="display: block;"><img src="img/NO.1.jpg" style=" width:700px; height: 320px;">a> <a class="ig" href="#" style="display: none;"><img src="img/NO.2.jpg" style=" width:700px; height: 320px;">a> <a class="ig" href="#" style="display: none;"><img src="img/NO.3.jpg" style=" width:700px; height: 320px;">a> <a class="ig" href="#" style="display: none;"><img src="img/NO.4.jpg" style=" width:700px; height: 320px;">a> <a class="ig" href="#" style="display: none;"><img src="img/NO.5.jpg" style=" width:700px; height: 320px;">a> <div class="btn btn1"> > div> <div class="btn btn2"> < div> <ul id="tabs"> <li class="tab bg">1li> <li class="tab">2li> <li class="tab">3li> <li class="tab">4li> <li class="tab">5li> ul> div>同时用CSS修饰一下
<style type="text/css"> *{ margin: 0px; padding: 0px; } #igs{ margin: 10px auto; width: 700px; height: 320px; position: relative; } .ig{ position: absolute; } #tabs{ position: absolute; list-style: none; background-color: rgba(255,255,255,.5); left: 300px; bottom: 10px; border-radius: 10px; padding: 5px 0 5px 5px; } .tab{ float: left; text-align: center; line-height: 20px; width: 20px; height: 20px; cursor: pointer; overflow: hidden; margin-right: 4px; border-radius: 100%; background-color: rgba(200,100,150); } .btn{ position: absolute; color: #fff; top: 110px; width: 40px; height: 100px; background-color: rgba(255,255,255,.3); font-size: 40px; font-weight: blod; text-align: center; line-height: 100px; border-radius: 5px; margin: 0 5px; } .btn2{ position: absolute; right: 0px; } .btn:hover{ background-color:rgba(0,0,0,.7) ; } .bg{ background-color: #f00; }style>接下来是最重要的JS部分，也就是jquery部分
<script type="text/javascript"> var i=0; var timer; $(document).ready(function(){ $('.ig').eq(0).show().siblings('.ig').hide(); showTime(); $('.tab').hover(function(){ i=$(this).index(); Show(); clearInterval(timer); },function(){ showTime(); }); $('.btn1').click(function(){ clearInterval(timer); if(i==0){ i=5; } i--; Show(); showTime(); }); $('.btn2').click(function(){ clearInterval(timer); if(i==4){ i=-1; } i++; Show(); showTime(); }); }); function showTime(){ timer=setInterval(function(){ Show(); i++; if(i==5){ i=0; } },2000); }; function Show(){ $('.ig').eq(i).fadeIn(300).siblings('.ig').fadeOut(300); $('.tab').eq(i).addClass('bg').siblings('.tab').removeClass('bg'); };script>这样就可以用jquery制作一个轮播图了。
提前告诉大家，做出来的轮播图很nice哦！大家感兴趣就赶紧去试一试吧！
下面的投票是想了解一下，大家对Web前端中的哪一部分最感兴趣，希望大家多多支持！感谢！
喜欢就关注呦！
