jquery 图片轮播demo实现
转载注明出处！！！
转载注明出处！！！
转载注明出处！！！
图片轮播demo，弄清楚过程其实是一个很简单的东西，看网上都没有什么实质性的代码，就自己把过程捋了一遍实现了。
这次因为随手写的，所以没有做什么通用性的修改，纯粹想到哪写到哪，大神们别说我就好了。
思路就是显示一张图片，其他图片隐藏掉，很简单吧。。。
由于用到了我博客里面的IcoMoon字体图标，还用到了bootscript的栅格系统用来居中（纯属多余）可以自己看下
废话不多说，直接上代码，还是一样的，注释很清楚了。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"> 7 <link rel="stylesheet" type="text/css" href="font/style.css"> 8 <title>Document</title> 9 <style> 10 img{ 11 width: 700px; 12 height:450px; 13 position: absolute; 14 } 15 .my_center{ 16 text-align:center; 17 } 18 .none{ 19 display: none; 20 } 21 ul{ 22 padding: 0px; 23 } 24 li 25 { 26 list-style-type: none; 27 28 } 29 .box{ 30 position: relative; 31 width: 700px; 32 height:450px; 33 margin: 0 auto; 34 } 35 .left{ 36 left: 0px; 37 } 38 .right{ 39 right: 0px; 40 } 41 .pic_button{ 42 position: absolute; 43 top: 0px; 44 bottom: 0px; 45 margin: auto 0; 46 width: 40px; 47 height: 60px; 48 display: none; 49 opacity: 0.3; 50 background-color: #888888; 51 border: 0px; 52 outline-style:none; 53 z-index: 100; 54 } 55 .lineList{ 56 display: none; 57 position: absolute; 58 left: 0px; 59 right: 0px; 60 bottom: 10px; 61 margin: 0 auto; 62 z-index:100; 63 } 64 span{ 65 color :#CCCCCC; 66 } 67 .lineList li{ 68 display: inline; 69 margin: 5px; 70 </style> 71 <script type="text/javascript" src = "./js/jquery.js"></script> 72 </head> 73 <body class= "scrollbar"> 74 <div class = "row"> 75 <div class = "col-md-12 my_center"> 76 <div id = "box" class = "box"> 77 <button id = "Previous" class = "left pic_button"> 78 <span class="glyphicon glyphicon-chevron-left"></span> 79 </button> 80 <ul> 81 <li> 82 <img class = "none" src="./img/1.jpg"> 83 </li> 84 <li> 85 <img class = "none" src="./img/2.jpg"> 86 </li> 87 <li> 88 <img class = "none" src="./img/3.jpg"> 89 </li> 90 <li> 91 <img class = "none" src="./img/4.jpg"> 92 </li> 93 <li> 94 <img class = "none" src="./img/5.jpg"> 95 </li> 96 <li> 97 <img class = "none" src="./img/6.jpg"> 98 </li> 99 <li> 100 <img class = "none" src="./img/7.jpg"> 101 </li> 102 <li> 103 <img class = "none" src="./img/8.jpg"> 104 </li> 105 </ul> 106 <button id = "next" class = "right pic_button"> 107 <span class="glyphicon glyphicon-chevron-right"></span> 108 </button> 109 </div> 110 </div> 111 </div> 112 </body> 113 </html> 114 <script> 115 $(function(){ 116 //初始化 117 var img_index = 0; 118 var img = $("#box img"); 119 var img_len = img.length; 120 img.eq(0).show(); 121 var id; 122 //开启定时器，设置轮播时间 123 id = setInterval(show_abs,1000); 124 //轮播函数 125 function show_abs(isPrevious){ 126 //设置默认值是为了在不点击按钮的时候自动轮播 127 //这里为什么这么写？你试试用普通的写法就知道了。 128 var isNext = arguments[0] ? true : arguments[0]; 129 //为什么判断是isPrevious而不是isNext，你试试就知道了。 130 var next = isPrevious?-1:1; 131 img.eq(img_index).fadeOut(1000); 132 img_index += next; 133 //判断范围 134 if(img_index == img_len) 135 img_index = 0; 136 if(img_index == -1) 137 img_index = img_len-1; 138 img.eq(img_index).fadeIn(1000); 139 $(".lineList li").eq(img_index).find("span").prop('class','icon-radio-checked'); 140 $(".lineList li").eq(img_index).siblings().find("span").prop('class','icon-radio-unchecked'); 141 } 142 //鼠标悬停的时候暂停轮播，并显示相关组件 143 $("#box").hover(function(){ 144 $(".lineList").fadeIn(500); 145 $(".pic_button").fadeIn(500); 146 clearInterval(id); 147 },function(){ 148 $(".lineList").fadeOut(500); 149 $(".pic_button").fadeOut(500); 150 id = setInterval(show_abs,1000); 151 }); 152 $("#Previous").on('click',function(){ 153 show_abs(true); 154 }); 155 $("#next").on('click',function(){ 156 show_abs(false); 157 }); 158 //插入一行索引 159 var lineList = '<ul class = "lineList">'; 160 for(var i = 0; i < img_len; i++) 161 { 162 lineList += "<li><span class = 'icon-radio-unchecked'></span></li>"; 163 } 164 lineList += '</ul>'; 165 $("#box").append(lineList); 166 //初始化索引显示 167 $(".lineList li").eq(0).find("span").prop('class','icon-radio-checked'); 168 $(".lineList li").each(function(i){ 169 $(this).click(function(){ 170 //点击以后的效果 171 $(this).find("span").prop('class','icon-radio-checked'); 172 $(this).siblings().find("span").prop('class','icon-radio-unchecked'); 173 //点击以后图片的切换 174 if(i != img_index) 175 { 176 img.eq(img_index).fadeOut(1000); 177 img.eq(i).fadeIn(1000); 178 img_index=i; 179 } 180 }); 181 }); 182 }); 183 </script>
