JavaScript简易录播图 · 前端开发

JavaScript简易录播图： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> <link rel="stylesheet" type="text/css" href="demo.css"/> <script src="https://creative.chat/resources/js/jquery-3.5.1.js"></script> <script src="demo.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="igs"> <a class="ig" href="#"><img src="images/image1.jpg" width="100%" /></a> <a class="ig" href="#"><img src="images/image2.jpg" width="100%" /></a> <a class="ig" href="#"><img src="images/image3.jpg" width="100%" /></a> <a class="ig" href="#"><img src="images/image4.jpg" width="100%" /></a> <a class="ig" href="#"><img src="images/image5.jpg" width="100%" /></a> <div class="btn btn1"><</div> <div class="btn btn2">></div> <ul id="tabs"> <li class="tab">1</li> <li class="tab">2</li> <li class="tab">3</li> <li class="tab">4</li> <li class="tab">5</li> </ul> </div> <style> * { margin: 0; padding: 0; } #igs { margin: 10px auto; width: 700px; height: 320px; position: relative; overflow: hidden; } .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: rgb(200,100,150); /*background-color: #000; opacity: 0.3; filter: alpha(opacity=40); color: #fff;*/ } .btn{ position: absolute; color: #fff; top: 110px; width: 40px; height: 100px; background-color: rgba(255,255,255,.3); font-size: 40px; font-weight: bold; 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); cursor: pointer; } .tab:hover { color: #fff; } .bg{ background-color: #f00; color: #fff; } </style> <script> //定义全局变量和定时器 var i = 0 ; var timer; var number = 5; $(document).ready(function(){ //用jquery方法设置第一张图片显示，其余隐藏 $('.ig').eq(0).show().siblings('.ig').hide(); //调用showTime()函数（轮播函数） showTime(); //当鼠标经过下面的数字时，触发两个事件（鼠标悬停和鼠标离开） $('.tab').hover(function(){ //获取当前i的值，并显示，同时还要清除定时器 i = $(this).index(); Show(); clearInterval(timer); },function(){ // showTime(); }); //鼠标点击左侧的箭头 $('.btn1').click(function(){ clearInterval(timer); if(i == 0){ i = number;//注意此时i的值 } i--; Show(); showTime(); }); //鼠标点击右侧的箭头 $('.btn2').click(function(){ clearInterval(timer); if(i == number-1){ i = -1;//注意此时i的值 } i++; Show(); showTime(); }); }); //创建一个showTime函数 function showTime(){ //定时器 timer = setInterval(function(){ //调用一个Show()函数 Show(); i++; //当图片是最后一张的后面时，设置图片为第一张 if(i==number){ i=0; } },2000); } //创建一个Show函数 function Show(){ //在这里可以用其他jquery的动画 $('.ig').eq(i).fadeIn(300).siblings('.ig').fadeOut(300); //给.tab创建一个新的Class为其添加一个新的样式，并且要在css代码中设置该样式 $('.tab').eq(i).addClass('bg').siblings('.tab').removeClass('bg'); } </script> </body> </html> ```