Magento產品模塊細節圖展示加入左右輪番功能

閒話少說，直接上代碼
找到當前模板下的media.phtml
css部分

<style type="text/css">
ul, ol{list-style:none;margin:0px;padding:0px;}
li{list-style:none outside none;}
div.stylesgoleft{float:left;width:21px;height:28px;background:url('../media/arrowhead.png') no-repeat left top;margin:40px 10px 0 0px;cursor:pointer;}
div.stylesgoleft:hover{float:left;width:21px;height:28px;background:url('../media/arrowhead.png') no-repeat left -28px;margin:40px 10px 0 0px;cursor:pointer;}
div.playerdetail{width:172px;height:245px;background:#FFF;font-family:'微軟雅黑';}
div.playerdetail div.detailimg{width:172px;height:124px;}
div.playerdetail div.detailimg img{width:172px;height:115px;}
div.playerdetail div.teanames{text-align:center;font-size:14px;margin-top:5px;color:#404040;}
div.playerdetail div.teadetail{width:156px;height:27px;margin:5px 8px;color:#666;}
div.playerdetail .checkdetail{width:134px;height:27px;display:block;background:url('../media/checkdetail.png') no-repeat;margin:18px;}
div.stylesgoright{float:left;width:21px;height:28px;background:url('../media/arrowhead.png') no-repeat left -56px;margin:40px 0 0 10px;cursor:pointer;}
div.stylesgoright:hover{float:left;width:21px;height:28px;background:url('../media/arrowhead.png') no-repeat left -84px;margin:40px 0 0 10px;cursor:pointer;}
div.maindiv1{float:left;width:495px;height:auto;overflow:hidden;position:relative;}
div.maindiv1 ul{position:absolute;left:0;top:0;}
div.maindiv1 ul li{float:left;width:172px;height:245px;margin-left:13px;}
#maindiv1 .more-views{width:2000px !important}
</style>

js部分

<script type="text/javascript">
window.onload = function () {
	var oBtnLeft = document.getElementById("goleft");
	var oBtnRight = document.getElementById("goright");
	var oDiv = document.getElementById("maindiv1");
	var oUl = oDiv.getElementsByTagName("ul")[0];
	var aLi = oUl.getElementsByTagName("li");
	var now = -1 * (aLi[0].offsetWidth + 1);
	oUl.style.width = aLi.length * (aLi[0].offsetWidth + 1) + 'px';
	oBtnRight.onclick = function () {
		var n = Math.floor((aLi.length * (aLi[0].offsetWidth + 1) + oUl.offsetLeft) / aLi[0].offsetWidth);
			move(oUl, 'left', oUl.offsetLeft + now);
	}
	oBtnLeft.onclick = function () {
		var now1 = -Math.floor((aLi.length / 1)) * 1 * (aLi[0].offsetWidth + 1);
			move(oUl, 'left', oUl.offsetLeft - now);
	}
	

};

function getStyle(obj, name) {
	if (obj.currentStyle) {
		return obj.currentStyle[name];
	}
	else {
		return getComputedStyle(obj, false)[name];
	}
}

function move(obj, attr, iTarget) {
	clearInterval(obj.timer)
	obj.timer = setInterval(function () {
		var cur = 0;
		if (attr == 'opacity') {
			cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
		}
		else {
			cur = parseInt(getStyle(obj, attr));
		}
		var speed = (iTarget - cur) / 6;
		speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
		if (iTarget == cur) {
			clearInterval(obj.timer);
		}
		else if (attr == 'opacity') {
			obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
			obj.style.opacity = (cur + speed) / 100;
		}
		else {
			obj.style[attr] = cur + speed + 'px';
		}
	}, 30);
}  
</script>

html部分

<?php if (count($this->getGalleryImages()) > 1): ?>
	<div class="stylesgoleft" id="goleft"></div> //左邊滑動按鈕
	<div class="maindiv1 " id="maindiv1"> //整個more-views包含在這個div中間
    <ul class="more-views">
    <?php $i=1; foreach ($this->getGalleryImages() as $_image): ?>
        <li<?php if ($i==1): ?> class="selected"<?php endif; ?>>
            <a class="lightbox" role="button" href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize($resizeAsSquare[$i]); ?>" title="<?php echo $this->escapeHtml($_image->getLabel()) ?>" data-url-medium="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize($width,$maxHeight); ?>">
                <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(68); ?>" alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" width="68" height="68">
                <span class="a11y"><?php echo $this->__('Display Gallery Item %d', $i) ?></span>
            </a>
        </li>
    <?php $i++; endforeach; ?>
    </ul>
	</div>
	<div class="stylesgoright" id="goright"></div>//右邊邊滑動按鈕
    <?php endif; ?>

不喜勿噴，盡情測試。。。