jQuery - 广告图片轮播切换
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title> 广告图片轮播切换</title> <link rel="stylesheet" href="css/style.css"> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script type="text/javascript"> $(function(){ /*创建一个集合保存图片*/ var imgs=new Array("adver01.jpg","adver02.jpg","adver03.jpg","adver04.jpg","adver05.jpg","adver06.jpg"); var flag=0; /*代表数组的下标*/ /*点击向左的按钮*/ $(".arrowLeft").click(function(){ var i=0; if(flag==0){ flag=imgs.length-1; i=flag+1; /*图片的编号 li中的值*/ }else{ flag--; i=flag+1; /*图片的编号*/ } $(".adver").css("background","url(images/"+imgs[flag]+")"); $("li:nth-of-type("+i+")").css("background","orange"); $("li:nth-of-type("+i+")").siblings().css("background","#333333"); }); /*点击向右的按钮*/ $(".arrowRight").click(function(){ var i=0; if(flag==imgs.length-1){ flag=0; i=flag+1; /*图片的编号*/ }else{ flag++; i=flag+1; /*图片的编号*/ } $(".adver").css("background","url(images/"+imgs[flag]+")"); $("li:nth-of-type("+i+")").css("background","orange"); $("li:nth-of-type("+i+")").siblings().css("background","#333333"); }); /*显示→ ← 的按钮*/ $(".adver").hover((function(){ $(".arrowRight").show(); $(".arrowLeft").show(); }),function(){ $(".arrowRight").hide(); $(".arrowLeft").hide(); }) }) </script> </head> <body> <div class="adver"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <div class="arrowLeft"></div><div class="arrowRight"></div> </div> </body> </html>
style.css
作者:Rick__想太多先森
出处:http://www.cnblogs.com/xtdxs/
注意:本文仅代表个人理解和看法哟!和本人所在公司和团体无任何关系!