jquery轮播图片（无插件简单版）
轮播图（第三版）[2016-2-26]
工作中用的，改写了半透明蒙版，可以兼容ie7
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//轮播图 start
var lunBo = {
boxObj: null,
imgsObj: null,
index: 0,
timer: 2500,
Init:function(boxObj,imgsObj) {
lunBo.boxObj = boxObj;
lunBo.imgsObj = imgsObj;
//加事件（鼠标悬停时停止播放，鼠标移出时开始自动播放）
boxObj.hover(
function () {
clearInterval(handid); //----------清空定时器
$('.lunbo-button-prev').show();
$('.lunbo-button-next').show();
},
function () {
handid = setInterval(lunBo.Next, lunBo.timer); //----------添加计时器
$('.lunbo-button-prev').hide();
$('.lunbo-button-next').hide();
}
);
//设定dot按钮组
var btnBox = $('.pagination');
var len = lunBo.imgsObj.length;
for(var i=0;i<len;i++){
btnBox.append($('<span class="pagination-bullet"></span>'));
}
btnBox.find('.pagination-bullet').bind('mouseover',function(){
lunBo.index = $(this).index();
lunBo.Goto(lunBo.index);
});
//设定向左、向右按钮
$('.lunbo-button-prev').click(function(){
lunBo.Prev();
});
$('.lunbo-button-next').click(function(){
lunBo.Next();
});
lunBo.Goto(0);//初始化，显示第一张
handid = setInterval(lunBo.Next, lunBo.timer); //----------添加计时器(开始播放)
},
Prev:function() {//上一张
lunBo.index--;
if (lunBo.index < 0) {lunBo.index = lunBo.imgsObj.length-1;}
lunBo.Goto(lunBo.index);
},
Next:function() {//下一张
lunBo.index++;
if (lunBo.index == lunBo.imgsObj.length) {lunBo.index = 0;}
lunBo.Goto(lunBo.index);
},
Goto:function(idx) {
lunBo.index = idx;
lunBo.imgsObj.eq(idx).fadeIn(300).siblings().hide();
//lunBo.imgsObj.eq(idx).fadeIn(300);
//console.log(idx);
$('.pagination-bullet').eq(idx).addClass('active').siblings().removeClass('active');
}
};
lunBo.Init($('.media-container'),$('.lunbo-slide'));
//轮播图 end
});
</script>
<style type="text/css">
ul,li,p{padding:0;margin:0;}
img{border:none;}
.mask-white50{background:#fff;opacity:0.5;filter:alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";}
.mask-black50{background:#000;opacity:0.5;filter:alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";}
.bg1{background:#003399;}
.media-container{position:relative;float:left;width:430px;height:230px;}
.media-container .lunbo-wrapper{position:relative;width:430px;height:230px;}
.media-container .lunbo-slide{display:none;position:absolute;width:430px;height:230px;}
.media-container .img1{width:430px;height:230px;}
.media-container .txtbox{position:absolute;left:0;right:0;bottom:0;height:40px;color:#fff;z-index:1;}
.media-container .txtbox .mask{position:absolute;left:0;top:0;right:0;bottom:0;}
.media-container .txtbox .p1{position:absolute;line-height:40px;height:40px;padding:0 1em;z-index:2;}
.media-container .pagination-mask{position:absolute;width:100px;height:40px;bottom:0;right:-100px;text-align:center;z-index:4;}
.media-container .pagination {position:absolute;width:100px;height:40px;bottom:0;right:-100px;text-align:center;z-index:5;}/*翻页小圆点*/
/*小圆点 active状态是不透明白点，默认状态是透明白点*/
.media-container .pagination .pagination-bullet {display:inline-block;width:18px;height:18px;border-radius:10px;background:#fff;margin-top:10px;
opacity:0.5;filter:alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
margin-right:10px;border:none;z-index:3;cursor:pointer;}
.media-container .pagination .active{background:#fff;opacity:1;filter:alpha(opacity=100);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}
</style>
</head>
<body>
<!-- 首屏轮播图 start -->
<div class="media-container">
<!-- 430x230 -->
<div class="lunbo-wrapper">
<div class="lunbo-slide">
<a href="##" target="_blank"><img src="images/_rj33.png" alt="" class="img1"></a>
<div class="txtbox"><div class="mask mask-black50 bg-opacity50"></div><p class="p1">标题111</p></div>
</div>
<div class="lunbo-slide">
<a href="##" target="_blank"><img src="images/_rj34.png" alt="" class="img1"></a>
<div class="txtbox"><div class="mask mask-black50 bg-opacity50"></div><p class="p1">标题222</p></div>
</div>
<div class="lunbo-slide">
<a href="##" target="_blank"><img src="images/_rj35.png" alt="" class="img1"></a>
<div class="txtbox"><div class="mask mask-black50 bg-opacity50"></div><p class="p1">标题333</p></div>
</div>
</div>
<div class="pagination-mask bg1"></div>
<div class="pagination"></div>
</div>
<!-- 首屏轮播图 end -->
轮播图（第二版）[2014-7-4]
对上文的代码做了些改进（代码风格更接近于我最近惯用的风格。）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script type="text/javascript">
var LUNBO = {
imgsObj: null,
index: 0,
timer: 1000,
Init:function(imgsObj) {
LUNBO.imgsObj = imgsObj;
//加事件
imgsObj.hover(
function () {
var idx=$(this).index(); //获得当前索引
clearInterval(handid); //----------清空定时器(鼠标悬停时)
LUNBO.Goto(idx); //----------点击后，跳转到第几张图
},
function () {
handid = setInterval(LUNBO.Play, LUNBO.timer); //----------添加计时器(鼠标移出时)
}
);
LUNBO.Goto(0);//初始化，显示第一张
handid = setInterval(LUNBO.Play, LUNBO.timer); //----------添加计时器(开始播放)
},
Play:function() {//自动播放
LUNBO.index++;
if (LUNBO.index == LUNBO.imgsObj.length) {LUNBO.index = 0;}
LUNBO.Goto(LUNBO.index); //----------自动播放状态，跳转到第几张图
},
Goto:function(idx) {
LUNBO.index = idx;
LUNBO.imgsObj.eq(idx).siblings().hide();
LUNBO.imgsObj.eq(idx).fadeIn(500);
},
};
$(document).ready(function () {
LUNBO.Init($(".box"));
});
</script>
<style type="text/css">
body,ul,li{margin:0;}
ul,li{list-style:none;}
#panel{position:relative;width:550px;height:170px;}
.box{position:absolute;left:0;top:0;width:100%;margin:0px;padding:0px;text-align:center;}
img{border:0;width:550px;height:170px;}
</style>
</head>
<body>
<h1>轮播图，无插件</h1>
<p>鼠标移到图片上，停止轮播。 鼠标移出，开始轮播</p>
<div id="panel">
<ul>
<li class="box"><a href="" target="_blank"><img src="http://image.zhangxinxu.com/image/blog/201311/powerswitch-cover-image.jpg"></a></li>
<li class="box"><a href="" target="_blank"><img src="http://image.zhangxinxu.com/image/blog/201311/http-break-point-upload.jpg"></a></li>
<li class="box"><a href="" target="_blank"><img src="http://image.zhangxinxu.com/image/blog/201309/requestAnimationFrame-tween.jpg"></a></li>
<li class="box"><a href="" target="_blank"><img src="http://image.zhangxinxu.com/image/blog/201308/anchor-cover.jpg"></a></li>
</ul>
</div>
</body>
</html>
第一版（已废弃） [2013-12-03]
鼠标移到按钮上，图片停止播放。 鼠标移出按钮，图片开始自动播放。
靠imgCenter这个方法调用。将“图片列表对象”和"按钮列表对象"直接作为参数传进去。
new imgsCenter( $(".imgbig"),$(".imgbtn") )).Init();
大图上面没做鼠标事件（需要的可以自己加hover事件）
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
6 </head>
7 <body>
8
9
10
11 <script type="text/javascript">
12 function imgsCenter(imgsObj,buttonsObj){
13 var index = 0; //当前图片序号
14 var self = this;
15 var handid;
16 this.length = imgsObj.length;
17 this.timer = 2000;
18
19
20 //初始化
21 this.Init = function(){
22
23 //按钮加事件
24 buttonsObj.hover(
25 function () {
26 buttonsObj.removeClass("hover");
27 $(this).addClass("hover");
28 var idx=$(this).index(); //获得当前索引
29 clearInterval(handid); //----------清空定时器(鼠标悬停时)
30 self.Goto(idx); //----------点击后，跳转到第几张图
31 },
32 function () {
33 handid = setInterval(self.Play, self.timer); //----------添加计时器(鼠标移出时)
34 }
35 );
36
37 //初始化，显示第一张
38 self.Goto(0);
39 handid = setInterval(self.Play, self.timer); //----------添加计时器(开始播放)
40
41 }
42
43 //跳转到第几张图
44 this.Goto = function(idx){
45 index = idx;
46
47 imgsObj.eq(idx).siblings().hide();
48 imgsObj.eq(idx).show();
49 //imgsObj.eq(idx).siblings().fadeOut(200);
50 //imgsObj.eq(idx).fadeIn(200);
51
52 //当前图片显示，其余图片隐藏
53 imgsObj.eq(index).siblings().hide();
54 imgsObj.eq(index).show();
55
56 //图片序号背景更换
57 buttonsObj.eq(index).siblings().removeClass("hover");
58 buttonsObj.eq(index).addClass("hover");
59
60 }
61
62
63 //自动播放
64 this.Play = function () {
65 index++;
66 if (index == self.length) {index = 0;}
67 self.Goto(index); //----------自动播放状态，跳转到第几张图
68
69 };
70
71
72 }
73
74
75
76
77 $(document).ready(function () {
78 (new imgsCenter( $(".imgbig"),$(".imgbtn") )).Init();
79
80
81
82 });
83
84 </script>
85
86
87 <style type="text/css">
88 ul{list-style:none;}
89 .imgbtn{
90 background: #FF70Ad;
91 border:1px solid #000000;
92 width:20px;
93 height:16px;
94 cursor:hand;
95
96 float:left;
97 margin:3px;
98 padding:3px;
99 text-align:center;
100
101 }
102 .hover{background: #FFFF00;}
103 .imgbig{
104 position:absolute;
105 width:500px;
106 height:170px;
107 margin:0px;
108 padding:0px;
109 text-align:center;
110 border:1px solid #ff9900;
111 }
112
113 #div1{
114 position:relative;
115 height:200px;
116 }
117
118 #divbtn{
119 position:relative;
120 left:0px;
121 top:0px;
122 }
123 #divimg{
124 position:relative;
125 left:0px;
126 top:30px;
127 }
128 </style>
129
130 <!--整体容器-->
131 <div id="div1">
132 <!--序号-->
133 <div id="divbtn">
134 <ul>
135 <li class="imgbtn">1</li>
136 <li class="imgbtn">2</li>
137 <li class="imgbtn">3</li>
138 <li class="imgbtn">4</li>
139 </ul>
140 </div>
141
142 <div id="divimg">
143 <!--图片列表，除第一张显示外，其余隐藏-->
144 <ul>
145 <li class="imgbig"><img src="http://image.zhangxinxu.com/image/blog/201311/powerswitch-cover-image.jpg"></li>
146 <li class="imgbig"><img src="http://image.zhangxinxu.com/image/blog/201311/http-break-point-upload.jpg"></li>
147 <li class="imgbig"><img src="http://image.zhangxinxu.com/image/blog/201309/requestAnimationFrame-tween.jpg"></li>
148 <li class="imgbig"><img src="http://image.zhangxinxu.com/image/blog/201308/anchor-cover.jpg"></li>
149 </ul>
150 </div>
151
152
153 </div>
154 </body>
155 </html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
