jquery轮播图片(无插件简单版)
2013-12-03 15:27
211 查看
轮播图(第三版)[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事件)
<!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>
相关文章推荐
- jsp使用jquery通过ajax方式访问servlet
- 菜鸟学习日记:Jquery validation插件的使用(一)
- jQuery插件 -- Form表单插件jquery.form.js
- jquery图片幻灯片殊效教程源码分享_Javascript教程
- jquery-json2form
- jquery自动将form表单封装成json
- jQuery获得内容和属性方法及示例
- jquery插件图片放大显示插件lightBox2.6最新版
- jquery $(document).ready() 与window.onload的区别
- jquery-1.10.2.min.map 404 (Not Found)问题及解决
- jQuery AJAX实现调用页面后台方法
- get 方式请求乱码以及用Jquery ajax 乱码问题的解决;
- jquery 点击切换面板及图标
- 基于jquery ajax 无刷新 文件批量上传插件 GooUploader整合struts2实现上传
- jquery easyui 没有出效果
- jQuery判断滚动条是否在顶部、底部。
- 几个jQuery滚动到顶部(Scroll to top)解决方案
- Ajax 中正常使用jquery-easyui (转)
- jquery 和其他js框架同时使用的不兼容问题解决方法
- jquery Ajax 乱码问题