关闭

jquery 幻灯片 图片切换效果

883人阅读 评论(0) 收藏 举报

js:

(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>


0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

android实战项目六imageview做一个幻灯片效果

imageview做一个幻灯片效果这是从本地获取图片的方法,在Android4.0之后,增加了一些新特性,也增加了一些限制。其中有一个限制就是不能在主线程中访问网络,必须另开一条线程访问。但是这里又存...
  • tangsilian
  • tangsilian
  • 2016-04-14 10:39
  • 1944

如何在PPT中实现多张图片叠加在一起,点击消失一张出来下一张的效果

原文:http://blog.sina.com.cn/s/blog_4fc125320100p9ub.html  这两天在帮忙修改一个PPT的课件,主要内容是让学生学习关于职业的单词,在PPT里的...
  • u013812894
  • u013812894
  • 2014-02-27 21:54
  • 8925

swiper滑动实现幻灯片功能及swiper animate的动画特效

怎么实现手机滑动实现幻灯效果呢?目前网上有很多插件可以实现,本人选了一款非常不错的插件swiper.js,原因有很多,当然这款插件最符合项目的需要。所以在此推荐给大家。            ...
  • sundasheng44
  • sundasheng44
  • 2015-05-19 09:42
  • 14273

jquery 实现图片切换幻灯片效果

js代码 var timer = null; var offset = 5000; var index = 0; //大图交替轮换 function slideImage(i){     ...
  • liuningshiwoa
  • liuningshiwoa
  • 2012-03-14 18:38
  • 1109

60款很酷的 jQuery 幻灯片演示和下载--多张图片Flash切换效果

jQuery 是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果,其中之一就是幻灯片效果的实现,这是一种在有限的网页空间内展...
  • hadesgin
  • hadesgin
  • 2012-07-10 15:32
  • 524

jquery图片轮播插件仿支付宝2013版全屏图片幻灯片淡出淡进切换效果

  • 2016-12-11 09:23
  • 712KB
  • 下载

【js与jquery】幻灯片轮播切换效果

1.效果如图所示:   2.html代码: 1 2 3 ...
  • yanhui_wei
  • yanhui_wei
  • 2012-09-02 23:22
  • 1507

jQuery响应式手机端移动端幻灯片图片切换特效插件slick

使用方法   1、引入文件 link rel="stylesheet" href="style/slick.css"> script src="script/jquery.mi...
  • jinkingliao
  • jinkingliao
  • 2016-04-18 09:54
  • 1461

jquery幻灯片切换过度效果

  • 2015-07-20 10:10
  • 1.74MB
  • 下载

jQuery网站幻灯片切换效果

  • 2013-03-16 11:01
  • 1.06MB
  • 下载
    个人资料
    • 访问:9058212次
    • 积分:75823
    • 等级:
    • 排名:第25名
    • 原创:262篇
    • 转载:2812篇
    • 译文:3篇
    • 评论:787条
    文章分类
    最新评论