jquery 实现左右轮播图
项目中需要用到类似的效果，本来想偷个懒，网上找个插件就可以了。但是发现插件，不是不太好使，就是代码太多臃肿了点。得了，我还是自己写一个吧！！！
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>焦点图</title>
<style>
body,ul,ol,li {margin:0;padding:0;}
ul,ol {list-style:none;}
.slider {width:1000px;height:100px;position:relative;margin:20px auto;border:1px solid #ccc;}
.list {width:900px;height:60px;margin:20px auto;position:relative;overflow:hidden;}
.list ul {height:60px;position:absolute;top:0;left:0;}
.list li {width:80px;height:60px;float:left;margin-right:10px;display:inline;background-color:#ccf;line-height:60px;text-align:center;}
.dots {width:100%;height:20px;position:absolute;left:0;bottom:0;text-align:center;}
.dots li {display:inline-block;*display:inline;zoom:1;font-size:30px;color:#ccc;line-height:20px;cursor:pointer;}
.dots .cur {color:#888;}
.prev, .next {position:absolute;top:30px;font-size:30px;color:#aaa;cursor:pointer;}
.prev {left:10px;}
.next {right:10px;}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(function(){
var slider = $(".slider");
var list = slider.find(".list");
var ul = list.find("ul");
var prev = slider.find(".prev");
var next = slider.find(".next");
var li = ul.find("li");
var timer = null;
var i = 0;
ul.width(li.eq(0).outerWidth(true) * li.length);
var list_width = parseInt(list.width());
var ul_width = parseInt(ul.width());
var num = Math.floor(ul_width/list_width);
var ol = $("<ol class='dots'></ol>");
for(var i=0; i<=num; i++){
var li = $("<li>•</li>");
ol.append(li);
}
slider.append(ol);
var dots_li = $(".dots li");
dots_li.eq(0).addClass("cur");
dots_li.click(function(){
i = dots_li.index(this);
switching(i);
});
function switching(i){
ul.animate({"left": -i * list_width + "px"}, "fast");
dots_li.eq(i).addClass("cur").siblings().removeClass("cur");
}
function autoplay(){
i++;
if(i > num){
i = 0;
}
switching(i);
}
prev.click(function(){
i--;
if(i == -1){
i = num;
}
switching(i);
});
next.click(function(){
autoplay();
});
timer = setInterval(autoplay, 3000);
slider.mouseover(function(){
clearInterval(timer);
}).mouseout(function(){
timer = setInterval(autoplay, 3000);
});
});
</script>
</head>
<body>
<div class="slider">
<div class="list">
<ul class="c">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
</ul>
</div>
<a class="prev"><</a>
<a class="next">></a>
</div>
</body>
</html>
浙公网安备 33010602011771号