jquery轮播图片(无插件简单版)

时间:2024-10-08 20:05:26

轮播图(第三版)[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="data: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="data: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="data: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事件)

 <!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
</head>
<body> <script type="text/javascript">
function imgsCenter(imgsObj,buttonsObj){
var index = 0; //当前图片序号
var self = this;
var handid;
this.length = imgsObj.length;
this.timer = 2000; //初始化
this.Init = function(){ //按钮加事件
buttonsObj.hover(
function () {
buttonsObj.removeClass("hover");
$(this).addClass("hover");
var idx=$(this).index(); //获得当前索引
clearInterval(handid); //----------清空定时器(鼠标悬停时)
self.Goto(idx); //----------点击后,跳转到第几张图
},
function () {
handid = setInterval(self.Play, self.timer); //----------添加计时器(鼠标移出时)
}
); //初始化,显示第一张
self.Goto(0);
handid = setInterval(self.Play, self.timer); //----------添加计时器(开始播放) } //跳转到第几张图
this.Goto = function(idx){
index = idx; imgsObj.eq(idx).siblings().hide();
imgsObj.eq(idx).show();
//imgsObj.eq(idx).siblings().fadeOut(200);
//imgsObj.eq(idx).fadeIn(200); //当前图片显示,其余图片隐藏
imgsObj.eq(index).siblings().hide();
imgsObj.eq(index).show(); //图片序号背景更换
buttonsObj.eq(index).siblings().removeClass("hover");
buttonsObj.eq(index).addClass("hover"); } //自动播放
this.Play = function () {
index++;
if (index == self.length) {index = 0;}
self.Goto(index); //----------自动播放状态,跳转到第几张图 }; } $(document).ready(function () {
(new imgsCenter( $(".imgbig"),$(".imgbtn") )).Init(); }); </script> <style type="text/css">
ul{list-style:none;}
.imgbtn{
background: #FF70Ad;
border:1px solid #000000;
width:20px;
height:16px;
cursor:hand; float:left;
margin:3px;
padding:3px;
text-align:center; }
.hover{background: #FFFF00;}
.imgbig{
position:absolute;
width:500px;
height:170px;
margin:0px;
padding:0px;
text-align:center;
border:1px solid #ff9900;
} #div1{
position:relative;
height:200px;
} #divbtn{
position:relative;
left:0px;
top:0px;
}
#divimg{
position:relative;
left:0px;
top:30px;
}
</style> <!--整体容器-->
<div id="div1">
<!--序号-->
<div id="divbtn">
<ul>
<li class="imgbtn">1</li>
<li class="imgbtn">2</li>
<li class="imgbtn">3</li>
<li class="imgbtn">4</li>
</ul>
</div> <div id="divimg">
<!--图片列表,除第一张显示外,其余隐藏-->
<ul>
<li class="imgbig"><img src="http://image.zhangxinxu.com/image/blog/201311/powerswitch-cover-image.jpg"></li>
<li class="imgbig"><img src="http://image.zhangxinxu.com/image/blog/201311/http-break-point-upload.jpg"></li>
<li class="imgbig"><img src="http://image.zhangxinxu.com/image/blog/201309/requestAnimationFrame-tween.jpg"></li>
<li class="imgbig"><img src="http://image.zhangxinxu.com/image/blog/201308/anchor-cover.jpg"></li>
</ul>
</div> </div>
</body>
</html>