Magento-Web前端开发

   <page_new_columns translate="label">
        <label>All new-Column Layout Pages</label>
        <reference name="root">
            <action method="setTemplate"><template>page/newcolumn.phtml</template></action>
            <!-- Mark root page block that template is applied -->
            <action method="setIsHandle"><applied>1</applied></action>
        </reference>
    </page_new_columns>

<ul id="nav">
  <?php echo $_menu; ?>
</ul>

<ul id="nav">
  <li class="level0"><a href="<?php echo $this->getBaseUrl() ?>"><span>首页</span></a></li>
  <?php echo $_menu; ?>
</ul>

<default>
   <!-- Mage_Customer -->
   <reference name="top.links">
     <action method="addLink" translate="label title" module="customer"><label>My Account</label><url helper="customer/getAccountUrl"/><title>My Account</title><prepare/><urlParams/><position>10</position></action>
    </reference>
</default>

<default>
   <!-- Mage_Customer -->
   <reference name="top.links">
   <action method="addLink" translate="label title" module="customer"><label>Home</label><url></url><title>Home</title><prepare>true</prepare><urlParams/><position>5</position></action>
 
     <action method="addLink" translate="label title" module="customer"><label>My Account</label><url helper="customer/getAccountUrl"/><title>My Account</title><prepare/><urlParams/><position>10</position></action>
    </reference>
</default>

	li class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
               <img class="listhoverimg" src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(300 ,327); ?>" width="300" height="327" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" />
                <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(155 ,169); ?>" width="155" height="169" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" /></a>
 
……………………</li>

<script type="text/javascript">
jQuery(".listhoverimg").css("display","none");
jQuery(".products-grid li:nth-child(1),.products-grid li:nth-child(2)").addClass("img1");
jQuery(".products-grid li:nth-child(3),.products-grid li:nth-child(4)").addClass("img2");
jQuery(".products-grid .product-image").hover(function(){
jQuery(this).siblings(".listhoverimg").css("display","block")
},function(){
 jQuery(this).siblings(".listhoverimg").css("display","none")
} )
</script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style type="text/css">/*banner轮播*/.picdiv{width:760px; height:290px; margin:0 auto; padding:0; overflow:hidden; position:relative;}.picbox{ margin:0; padding:0; overflow:hidden; width:760px; height:290px; position:absolute;z-index:999; }.picbox img{ width:760px; height:290px;padding:0;}.picbox2{ width:100%; background:#3B3B4C;  filter:alpha(opacity=70); position:absolute;right:0px; bottom:10px;z-index:1000; overflow:hidden;}.picbox2 ul{ float:right; margin:0; padding:0; margin-top:4px; margin-right:15px; }.picbox2 ul li{ cursor:pointer;list-style:none;float:left;width:18px; height:18px; font-family:Arial; line-height:18px;margin:2px; padding:0;overflow:hidden; text-align:center;}.picbox2 ul li.off{ cursor:pointer;list-style:none;float:left;width:15px; height:15px; font-family:Arial; line-height:15px;margin:2px; padding:0;overflow:hidden; text-align:center;background:#353535; border:1px solid #ccc;color:#fff;}.picbox2 ul li.on {cursor:pointer;list-style:none;float:left;width:15px; height:15px; font-family:Arial; line-height:15px;margin:2px; padding:0;overflow:hidden; text-align:center; background:#990000; border:1px solid #ccc;color:#FFF;}.picbox{ margin:0; padding:0; overflow:hidden; width:760px; height:290px; position:absolute;z-index:1; }.picbox img{ width:760px; height:290px;padding:0; border:0;}.picbox2{ margin:0; padding:0; width:760px; overflow:hidden; background:#353536;opacity:0.6; filter:alpha(opacity=60);padding:1px 0; position:relative; top:248px;z-index:2;}.picbox2 .filerdiv{margin:0; padding:0; overflow:hidden; border-width:1px 0;  border-style:solid;border-color:#837B69;font-size:12px; color:#fff; text-align:center; height:30px; line-height:30px;} 
</style>
<div class="picdiv">	
  <div class="picbox">				
    <div id="pic1" >							
      <a href="http://www.masamaso.com/package.php?id=22&path=1269418431" target="_blank">					
        <img src="http://image01.masamaso.com/pic/1270056820499615727.jpg" alt="" />				</a>					
    </div>				
    <div id="pic2" style="display:none;">							
      <a href="http://www.masamaso.com/package.php?id=21&path=1269488844" target="_blank">					
        <img src="http://image01.masamaso.com/pic/1269459787031927872.jpg" alt="" />				</a>					
    </div>				
    <div id="pic3" style="display:none;">							
      <a href="http://www.masamaso.com/goods.php?id=3036&path=1267175650" target="_blank">					
        <img src="http://image01.masamaso.com/pic/1271030787344249690.jpg" alt="" />				</a>					
    </div>				
    <div id="pic4" style="display:none;">							
      <a href="http://www.masamaso.com/goods.php?id=3041&path=1267175650" target="_blank">					
        <img src="http://image01.masamaso.com/pic/1267146761968477480.jpg" alt="" />				</a>					
    </div>				
    <div id="pic5" style="display:none;">							
      <a href="http://www.masamaso.com/goods.php?id=3184&path=1267175650" target="_blank">					
        <img src="http://image01.masamaso.com/pic/1271031039991694249.jpg" alt="" />				</a>					
    </div>			
  </div>	
  <div class="picbox2">		
    <div class="filerdiv">			
      <ul>								
        <li id="num1" class="on" onMouseOver="testshowpic(1,1)" onMouseOut="startpic()">1
        </li>								
        <li id="num2" class="off" onMouseOver="testshowpic(2,1)" onMouseOut="startpic()">2
        </li>								
        <li id="num3" class="off" onMouseOver="testshowpic(3,1)" onMouseOut="startpic()">3
        </li>								
        <li id="num4" class="off" onMouseOver="testshowpic(4,1)" onMouseOut="startpic()">4
        </li>								
        <li id="num5" class="off" onMouseOver="testshowpic(5,1)" onMouseOut="startpic()">5
        </li>							
      </ul>			
      <a style="color:white;" href="activity_1004.php" target="_blank">4.1—4.30，4月老顾客满988元送295元真皮腰带1条，赠品任选，多买多送！</a>		
    </div>	
  </div>	
  <p class="clear">
  </p>
</div>
<script type="text/javascript">
	var time=1;
	var count=5;
	function testshowpic(n,num)
	{
 
		if(num==1){clearInterval(id);}
		if(n>count)
		{
			n=1;
		}
		time=n;
		for(var p=1; p<=count;p++)
		{
			if(p==n)
			{	
				$("#pic"+p).hide().fadeIn('slow');
				$("#pic"+p).css("display","block");
				$("#num"+p).attr("class","on");
			}
			else
			{
				$("#pic"+p).css("display","none");
				$("#num"+p).attr("class","off");
			}
		}
	}
	if (count > 1) {
		var id=window.setInterval("testshowpic(time+1)",7000);
	}
	function startpic()
	{
		id=window.setInterval("testshowpic(time+1)",7000);
	}
</script>