仿天猫首图效果

最新推荐文章于 2025-08-21 09:25:35 发布

weixin_30448685

最新推荐文章于 2025-08-21 09:25:35 发布

阅读量46

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jane2013/p/3675260.html

本想用一段有些技术含量的话引出下面的这些代码的，但最近的表达能力不知道怎么的，总是词不达意，想想，还是算了，直接贴代码吧!

如果亲们想看效果，可一定要把我的css_ku.css（http://www.cnblogs.com/jane2013/p/3675271.html）文件引进去哦

css 代码

.index_subimg{ margin-top:15px; width:231px; position:relative; z-index:10;}
.index_subimg a{ position:relative; width:231px; height:131px; display:block;}
.index_subimg a div{ /*position:absolute; top:0; left:0; width:231px; height:131px; background:#000;*/ position:absolute;}
.index_subimg a div.index_smallDiv{ opacity:0.5;filter:alpha(opacity=50);}
.index_subImg2{ display:inline; margin-left:230px; height:420px; width:720px;}
.index_subImg2 a{ height:420px; width:720px; position:absolute; top:0; left:0; z-index:3;}



.div1{width:100%; height:30px; bottom:0; position:absolute; z-index:5; text-align:center;}
.ul1 li{display:inline-block;background:black;border-radius:15px;height:20px;width:20px;margin:0 5px;}
.ul1 li{*display:inline;}
.ul1 li.activeJQ{ background:red;}
.div2{height:420px; width:100%;}
.div3{position: relative; width: 100%; left: 0px; top: 0px;}
.div4{height: 420px; z-index: 0; position: absolute; top: 0px; left: 0px; }

html 代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

</head>
<body>
<div class="w100">
     <div class="w100">
        <div class="w100 rel" id="JINGDONGBox" style="height:420px;">
         <div class="div1">
             <ul class="ul1" id="contarlJQ">
               <li class="activeJQ"></li>
  
                   <li></li>
  
                   <li></li>
  
                   <li class=""></li>
  
             </ul>
        </div>
         <div class="div2">
              <div class="div3" id="starTurnJQ">
                    <div class="w100 div4" style="background: url(images/man.jpg) no-repeat center center; z-index:2;">
                            <div class="w1190 fix">
                                  <div class="fl index_subImg2 rel">
                                       <a href="#" target="_blank"></a>
                                  </div>
                                  <div class="fr index_subimg">
                                        <a href="#" target="_blank">
                                           <img src="images/close2.jpg" class="imgBottom" width="231" height="131">
                                           <div class="dn"></div>
                                         </a>
                                       <a href="#" target="_blank">
                                           <img src="images/close.jpg" class="imgBottom" width="231" height="131">
                                           <div class="dn"></div>
                                         </a>
                                        <a href="#" target="_blank">
                                           <img src="images/child.jpg" class="imgBottom" width="231" height="131">
                                           <div class="dn"></div>
                                         </a>
                                  </div>
                            </div>
                       </div>
                    <div class="w100 div4" style="background: url(images/woman.jpg) no-repeat center center;">
                            <div class="w1190 fix">
                                  <div class="fl index_subImg2 rel">
                                       <a href="#" target="_blank"></a>
                                  </div>
                                  <div class="fr index_subimg">
                                        <a href="#" target="_blank">
                                           <img src="images/close2.jpg" class="imgBottom" width="231" height="131">
                                           <div class="dn"></div>
                                         </a>
                                       <a href="#" target="_blank">
                                           <img src="images/close.jpg" class="imgBottom" width="231" height="131">
                                           <div class="dn"></div>
                                         </a>
                                        <a href="#" target="_blank">
                                           <img src="images/child.jpg" class="imgBottom" width="231" height="131">
                                           <div class="dn"></div>
                                         </a>
                                  </div>
                            </div>
                       </div>
                     <div class="w100 div4" style="background: url(images/man.jpg) no-repeat center center;">
                            <div class="w1190 fix">
                                  <div class="fl index_subImg2 rel">
                                       <a href="#" target="_blank"></a>
                                  </div>
                                  <div class="fr index_subimg">
                                        <a href="#" target="_blank">
                                           <img src="images/close2.jpg" class="imgBottom" width="231" height="131">
                                           <div class="dn"></div>
                                         </a>
                                       <a href="#" target="_blank">
                                           <img src="images/close.jpg" class="imgBottom" width="231" height="131">
                                           <div class="dn"></div>
                                         </a>
                                        <a href="#" target="_blank">
                                           <img src="images/child.jpg" class="imgBottom" width="231" height="131">
                                           <div class="dn"></div>
                                         </a>
                                  </div>
                            </div>
                       </div>
                    <div class="w100 div4" style="background: url(images/woman.jpg) no-repeat center center;">
                            <div class="w1190 fix">
                                  <div class="fl index_subImg2 rel">
                                       <a href="#" target="_blank"></a>
                                  </div>
                                  <div class="fr index_subimg">
                                        <a href="#" target="_blank">
                                           <img src="images/close2.jpg" class="imgBottom" width="231" height="131">
                                           <div class="dn"></div>
                                         </a>
                                       <a href="#" target="_blank">
                                           <img src="images/close.jpg" class="imgBottom" width="231" height="131">
                                           <div class="dn"></div>
                                         </a>
                                        <a href="#" target="_blank">
                                           <img src="images/child.jpg" class="imgBottom" width="231" height="131">
                                           <div class="dn"></div>
                                         </a>
                                  </div>
                            </div>
                       </div> 
                                           
             </div>
         </div>
        </div>
    </div>
    
</div>
</body>
<script type="text/javascript">
//使用默认值调用插件

$(document).taperRolling();

自定义参数调用插件

var defaults={
	  container:$('#starTurnJQ'),//要变化的父级
	  control:$('#contarlJQ'),//轮换控件
	  subControl:$('.index_subimg'),//小图容器
	  iClass:'activeJQ',//轮换控件里面的class
	  
	  ev:'mouseover',//鼠标事件
	  
	  delay:3000,//自动播放时间
	  speed:1000,//事件运动速度
	  
	  index:1,
	  
	  change:true,//鼠标放上去图片是否有变化
	  auto:true,//是否自动轮换
	  movement:true,//是否有小图运动
	  
	  callback: $.noop//回调函数
	  }

$(document).taperRolling(defaults);

</script> 
</html>

重头戏来了，js代码

// JavaScript Document
/*
*----->仿天猫首页轮播效果图 by pmm
*/
$.fn.taperRolling = function(options){
	var defaults={
	  container:$('#starTurnJQ'),//要变化的父级
	  control:$('#contarlJQ'),//轮换控件
	  subControl:$('.index_subimg'),//小图容器
	  iClass:'activeJQ',//轮换控件里面的class
	  
	  ev:'mouseover',//鼠标事件
	  
	  delay:3000,//自动播放时间
	  speed:1000,//事件运动速度
	  
	  index:1,
	  
	  change:true,//鼠标放上去图片是否有变化
	  auto:true,//是否自动轮换
	  movement:true,//是否有小图运动
	  
	  callback: $.noop//回调函数
	  }
	var options = $.extend({},defaults,options||{}),auto;
	var setting = {   //重置大图与小图的样式设定
	  setStyle:function(){
		  var o;
		  if(typeof options.container === 'object'){
				   o = options.container;
			   }else{
				   o = $(options.container);
			   }
			o.css({position:'relative'});
			o.children().each(function(i){
					$(this).css({position:'absolute',top:0,left:0});
				});
			  },
		//图片渐变效果
		shade:function(obj){
		  $(options.control.children()[obj.index()]).addClass(options.iClass).siblings().removeClass(options.iClass);
		  obj.stop().animate({zIndex:options.index,opacity:1},options.speed);
		  obj.siblings().stop().animate({zIndex:0,opacity:0},options.speed);
		 },
		//自动播放
		auto:function(){
			if(!options.auto) return ;
			//找到将要渐变的div下标
			var index=($(options.control.find('.'+options.iClass)[0]).index()+1)%options.control.children().length;
			this.shade($(options.container.children()[index]));
			},
		//鼠标移入小图里面的div变化
		mouseover:function(obj){   
			if(!options.change) return;
			var tag = obj.get(0).tagName.toLowerCase();
		   	if(tag != 'a') return;
		   //判断里面的子元素是否超过两个以上
			if(obj.parent().children().length < 1) return;
			var aChild = obj.parent().children();//查找到a节点
		  	for(var i = 0;i < aChild.length;i++){
				 if(obj.index() == i){
				   var w = parseInt(obj.find('img')[0].width);
				   var h = parseInt(obj.find('img')[0].height);
				   var o = $(obj.find('div')[0]);
				   o.css({width:w+'px',height:h+'px',top:0,left:0, background:'none',display:'none',opacity:0});
				}else{
				   var w = parseInt($(aChild[i]).find('img')[0].width);
				   var h = parseInt($(aChild[i]).find('img')[0].height);
				   var o = $($(aChild[i]).find('div')[0]);
				   o.css({width:w+'px',height:h+'px',top:0,left:0, background:'#000', opacity:0.4, display:'block'});
				}
			 }  
		},
		//鼠标移出效果
		mouseout:function(obj){
			obj.siblings().find('div').css({width:0,height:0,background:'none',opacity:0,display:'none'});
			$(obj.find('div')[0]).css({width:0,height:0});
		},
		//鼠标事件
		setEvent:function(_this){   
				  if(options.auto){
					clearInterval(auto);
				}
				  var _th = this;
				  var index = $(options.control.find('.'+options.iClass)[0]).index();
				  if(_this.index() == index){  //判断事件是否为当前项
						return;
					}
				  _th.shade($(options.container.children()[_this.index()]));
			}
	}
//自动播放的效果
setting.setStyle();
if(options.auto){
	 auto = setInterval(function(){setting.auto();},options.delay);
 }
 //绑定按钮事件
options.control.children().each(function(){  
		var _this = $(this);
	   $(this).bind(options.ev,function(){setting.setEvent($(this));});
	   if(options.auto){
			$(this).bind('mouseout',function(){
					auto=setInterval(function(){ setting.auto()},options.delay);
			});
		}
	});
//绑定小图变暗事件
options.subControl.children().bind({
	 mouseover:function(){
		setting.mouseover($(this));//脱离文档流的定位元素
		},
	mouseout:function(){
		setting.mouseout($(this));
	}
});
//计时器
options.container.bind({
	mouseover:function(){
		if(options.auto){
			clearInterval(auto);
		}
	},
	mouseout:function(){
		 if(options.auto){
			auto = setInterval(function(){ setting.auto()},options.delay)
		}
	 }
});
//小图变换
$.silder=function(obj){  
	//计时器
	var obj;
	if(!options.movement) return;
	if(typeof obj === 'object'){
		obj = obj;
		}else{
		obj = $(obj);
	}
	if(obj.get(0).tagName.toLowerCase() != 'b' || obj.children()[0].tagName.toLowerCase() != 'img'){
			//判断是否为图片。。。
			return;
		}
	var index = obj.parent().parent().parent().index();
	var ind = options.control.find('.'+options.iClass).index();
	if(index == ind){
		  obj.animate({top:'-10px',opacity:1},options.speed);
	  }else{
		  obj.animate({top:'-40px',opacity:0},options.speed)
	  }
	}
}

转载于:https://www.cnblogs.com/jane2013/p/3675260.html