Jquery实现简单的轮播效果(代码管用)
内容摘要
废话不多说了,直接给大家贴jquery代码了,具体代码如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet
文章正文
废话不多说了,直接给大家贴jquery代码了,具体代码如下所示:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <title>Title</title> <link rel= "stylesheet" href= "css/index.css" > <script src= "js/jquery-1.11.3.js" ></script> <script src= "js/baner.js" ></script> </head> <body> <div class = "main" > <a href= "" ><img src= "img/baner-1.jpg" alt= "" ></a> <a href= "" ><img src= "img/baner-2.jpg" alt= "" ></a> <a href= "" ><img src= "img/baner-3.jpg" alt= "" ></a> <a href= "" ><img src= "img/baner-4.jpg" alt= "" ></a> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </body> </html> /*************初始化************/ *{margin:0;padding: 0;border: none;list-style: none} /*********轮播左右居中*************/ .main{ width: 1024px; height: 320px; margin: 0 auto; position: relative; } .main a{ position: absolute; } .main a img{ width: 100%; height: 320px; } /***********左边小图标************/ .main ul li.selected{ background: #f97157; } .main ul{ position: absolute; z-index: 999; top: 120px; left: 20px; } .main ul li{ width: 20px; height: 20px; border-radius: 50%; background: #909090; cursor: pointer; text-align: center; } /** * Created by Administrator on 16-3-12. */ /***********定义全局变量和定时器*************/ var t=null; var n=0; /**动态变化**/ var count ; /************************/ $( function (){ count =$( ".main a" ).length; /*给动态变化的n备用*/ /**让不是轮播中的第一个隐藏**/ $( ".main a:not(:first-child)" ).hide(); /*点击当前li当前li对应的图片显示出来*/ $( ".main ul li" ).click( function (){ var index=$(this).text()-1; n=index; console.log(n); /*****让当前显示的图片0.5S内渐隐,并匹配下一个渐显示*****/ $( ".main a" ).filter( ":visible" ).fadeOut(500).parent().children().eq(index).fadeIn(1000); /*******聚焦,给当前li追加类,改变背景色*******/ $(this).addClass( "selected" ); /****同时移除当前li的所有兄弟的类名为selected,还原背景色*****/ $(this).siblings().removeClass( "selected" ); }); /***定义定时器3秒执行一次****/ t=setInterval( "autoMove()" ,3000); /****当鼠标进入时候定时器停止,移除时候定时器开启****/ $( ".main" ).hover( function (){clearInterval(t)}, function (){t = setInterval( "autoMove()" , 3000);}); }); /***定义自动轮播函数****/ function autoMove(){ if (n>=( count -1)){ n=0; } else { ++n; } /*****给li执行匹配的事件*****/ $( ".main ul li" ).eq(n).trigger( "click" ); } |
以上所述是小编给大家介绍的Jquery实现简单的轮播效果,希望对大家有所帮助!
代码注释