jquery 幻灯片 图片切换效果
2013-12-06 11:45
573 查看
js:
css:
页面:
(function($){ $.fn.extend({ Tabs:function(options){ // 处理参数 options = $.extend({ event : 'mouseover', //事件类型 timeout : 0, //设置事件延迟 auto : 0, //多少秒自动切换一次 callback : null //回调函数 }, options); var self = $(this), tabBox = self.children( 'div.tab_box' ).children( 'div' ), menu = self.find( 'ul.tab_menu' ), items = menu.find( 'li' ), timer; var tabHandle = function( elem ){ elem.siblings( 'li' ) .removeClass( 'current' ) .end() .addClass( 'current' ); tabBox.siblings( 'div' ) .addClass( 'hide' ) .end() .eq( elem.index() ) .removeClass( 'hide' ); }, delay = function( elem, time ){ time ? setTimeout(function(){ tabHandle( elem ); }, time) : tabHandle( elem ); }, start = function(){ if( !options.auto ) return; timer = setInterval( autoRun, options.auto ); }, autoRun = function(){ var current = menu.find( 'li.current' ), firstItem = items.eq(0), len = items.length, index = current.index() + 1, item = index === len ? firstItem : current.next( 'li' ), i = index === len ? 0 : index; current.removeClass( 'current' ); item.addClass( 'current' ); tabBox.siblings( 'div' ) .addClass( 'hide' ) .end() .eq(i) .removeClass( 'hide' ); }; items.bind( options.event, function(){ delay( $(this), options.timeout ); if( options.callback ){ options.callback( self ); } }); if( options.auto ){ start(); self.hover(function(){ clearInterval( timer ); timer = undefined; },function(){ start(); }); } return this; } }); })(jQuery); $(function() { $("#imgsider").Tabs({auto : 3000, event : 'click'}); //顶部 图片预览 })
css:
<style> .backgroundImgWrap{width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden;} .bgafill{width:100%;height:100%;} a{text-decoration:none;} a:hover{text-decoration:underline;} .newbox{width:525px;height:286px;padding:11px;background:url(images/news_pic_bg.gif) no-repeat;overflow:hidden;position:relative;} .new_content{width:100%;} .hide{display:none;} .new_list{height:8px;position:absolute;right:22px;bottom:21px;} .new_list li{list-style-type:none;width:9px;height:8px;margin-left:6px;background:url(images/gray_icon.gif) no-repeat;cursor:pointer;float:left;} .new_list li.current{list-style-type:none;background:url(images/red_icon2.gif) no-repeat;} .newData img{width:523px;height:284px;} .ptitle{width:509px;height:64px;padding-left:14px;overflow:hidden;background:url(images/bs_bg.png);position:absolute;bottom:13px;left:11px;} .ptitle a{font:18px/48px Microsoft yahei;color:#000;text-decoration:none;} </style>
页面:
<div id="imgsider" class="newbox fL"> <div class="new_content tab_box"> <div class="newData"> <p><img src="images/pic.jpg" /></p> <span class="ptitle"><a href="#">上海地铁与艺术人文频道签署战略协议</a></span> </div> <div class="newData hide"> <p><img src="images/pic01.jpg" /></p> <span class="ptitle"><a href="#">上海地铁与艺术人文频道签署战略协议3</a></span> </div> <div class="newData hide"> <p><img src="images/pic02.jpg" /></p> <span class="ptitle"><a href="#">上海地铁与艺术人文频道签署战略协议1</a></span> </div> <div class="newData hide"> <p><img src="images/pic03.jpg" /></p> <span class="ptitle"><a href="#">上海地铁与艺术人文频道签署战略协议2</a></span> </div> <div class="newData hide"> <p><img src="images/pic04.jpg" /></p> <span class="ptitle"><a href="#">上海地铁与艺术人文频道签署战略协议3</a></span> </div> <div class="newData hide"> <p><img src="images/pic05.jpg" /></p> <span class="ptitle"><a href="#">上海地铁与艺术人文频道签署战略协议2</a></span> </div> </div> <ul class="new_list tab_menu"> <li class="current"> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> </ul> </div>
相关文章推荐
- (function($) {…})(jQuery);
- 设置JQuery的Ajax方法同步
- 用jQuery实现弹出窗口/弹出div层
- Jquery手机邮箱验证
- jquery.cookie() 方法的使用(读取、写入、删除)
- Jquery-easyUi------(布局)
- jquery ajax pt4
- jquery ajax pt3
- jquery ajax pt2
- jquery ajax pt1
- jquery ajax
- jQuery学习笔记(二)通过事件触发 实现对HTML和CSS的[得/增/删/改]
- jquery刷新页面
- Jquery mobile 初始化参数设置详解
- jQuery Mobile页面返回无需重新get
- Jquery实际应用,判断radio,selelct,checkbox是否选中及选中的值
- jquery操作input值总结 (转)
- Jquery 参数自动拼接
- 高效的jquery(转)
- ASP.NET 用jquery的ajax調用後台方法(簡潔版)