<style type="text/css">
img, fieldset {border:0 none; vertical-align:middle;}
#product {float:left; width:600px;}
.product_tit {position:relative;background:url('Images/main_product_bg.gif') no-repeat;color:#333; font-weight:bold; padding:8px 0 0 15px; height:300px;}
.product_tit span {position:absolute; top:9px; right:14px; color:#406c80; font-size:0.75em;}
.product_tit span a {color:#406c80; text-decoration:underline;}
.product_tit span a:link,
.product_tit span a:visited,
.product_tit span a:active,
.product_tit span a:hover {color:#406c80; text-decoration:underline;}
.product_list {}
.product_list div.btn_prev {float:left; height:360px;}
.product_list ul.list {float:left; padding-left:0px;}
.product_list ul.list li {float:left;margin:20px 0px 0 0; text-align:center;}
.product_list ul.list li div.img {background:url('Images/product_bg.gif') no-repeat; width:500px; height:360px;}
.product_list ul.list li div.txt {color:#4d4d4d; font-size:0.95em;}
.product_list div.btn_next {float:right; height:360px;}
.product_list div.cboth {clear:both;}
#slideContentContainer {
float:left;
position: relative;
margin-left:0px;
width: 555px;
height: 360px;
overflow: hidden;
}
#slideContent {
position: absolute;
}
#slideContent div.slideContent {
position: absolute;
width: 80px;
padding: 10px;
}
#slideBtnSet {
width: 80px;
padding: 10px;
text-align: right;
}
#slideBtnSet *.on {
color: #000;
cursor: pointer;
}
#slideBtnSet *.off {
color: #aaa;
cursor: default;
}
</style>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><script type="text/javascript">
<!--
/* Slide Content */
var currentContentPage = 1;
var contentElCount = 3;
var content_x = 0;
var slideContentTo = 0;
var contentWidth = 500;//每次切换的尺寸
var isImageBtn = false;
function initScrollContent(initCont) {
cont = document.getElementById("slideContent").getElementsByTagName("li");
for (i=0; i<cont.length; i++) {
if (cont[i].className == "slideContent") {
contentElCount++;
cont[i].style.left = contentWidth * (contentElCount - 1) + "px";
}
}
setSlideBtn();
}
function setSlideBtn() {
if (parseInt(currentContentPage) == 1) {
if(contentElCount < 5){
setPrevBtn("off");
setNextBtn("off");
}else{
setPrevBtn("off");
setNextBtn("on");
}
} else if (parseInt(currentContentPage) == contentElCount-3) {
setPrevBtn("on");
setNextBtn("off");
} else {
setPrevBtn("on");
setNextBtn("on");
}
}
function setPrevBtn(condition) {
var prevBtn = document.getElementById("prevBtn");
if (condition == "on") {
prevBtn.onclick = viewPrev;
prevBtn.style.cursor = "pointer";
if (isImageBtn) prevBtn.src = prevBtn.src.replace("_off.gif", ".gif");
prevBtn.className = "on";
} else {
prevBtn.onclick = "";
prevBtn.style.cursor = "default";
if (isImageBtn) prevBtn.src = prevBtn.src.replace(".gif", "_off.gif");
prevBtn.className = "off";
}
}
function setNextBtn(condition) {
var nextBtn = document.getElementById("nextBtn");
if (condition == "on") {
nextBtn.onclick = viewNext;
nextBtn.style.cursor = "pointer";
if (isImageBtn) nextBtn.src = nextBtn.src.replace("_off.gif", ".gif");
nextBtn.className = "on";
} else {
nextBtn.onclick = "";
nextBtn.style.cursor = "default";
if (isImageBtn) nextBtn.src = nextBtn.src.replace(".gif", "_off.gif");
nextBtn.className = "off";
}
}
function viewPrev() {
slideContentTo += contentWidth;
currentContentPage = parseInt(currentContentPage) - 1;
setSlideBtn();
startScroll();
}
function viewNext() {
slideContentTo -= contentWidth;
currentContentPage = parseInt(currentContentPage) + 1;
setSlideBtn();
startScroll();
}
function startScroll() {
setTimeout("slideContent()", 10);//切换速度
}
function slideContent() {
if (Math.abs(content_x - slideContentTo) > 1) {
content_x += (slideContentTo - content_x) * .10;
document.getElementById("slideContent").style.left = content_x + "px";
startScroll();
} else {
content_x = slideContentTo;
document.getElementById("slideContent").style.left = content_x + "px";
}
}
function defaultImage(img){
img.src = " http://www.newaye.com/2008/Images/Default_PR_no.gif";
}
//-->
</script>
<div class="product_list">
<div class="btn_prev"> <img src=" http://www.newaye.com/2008/Images/Btn_Prudctst_prev.gif" alt="" id="prevBtn" /></div>
<div id="slideContentContainer">
<ul class="list" id="slideContent">
<li class="slideContent">
<div class="img"><a href="#"><img src=" http://www.newaye.com/2008/Images/Products_Center001.jpg" alt="#" width="500" height="300" οnerrοr="javascript:defaultImage(this);"/></a></div>
<div class="txt">Product Name001</div>
</li>
<li class="slideContent">
<div class="img"><a href="#"><img src=" http://www.newaye.com/2008/Images/Products_Center002.jpg" alt="#" width="500" height="300" οnerrοr="javascript:defaultImage(this);"/></a></div>
<div class="txt">Product Name002</div>
</li>
<li class="slideContent">
<div class="img"><a href="#"><img src=" http://www.newaye.com/2008/Images/Products_Center003.jpg" alt="#" width="500" height="300" οnerrοr="javascript:defaultImage(this);"/></a></div>
<div class="txt">Product Name003</div>
</li>
<li class="slideContent">
<div class="img"><a href="#"><img src=" http://www.newaye.com/2008/Images/Products_Center004.jpg" alt="#" width="500" height="300" οnerrοr="javascript:defaultImage(this);"/></a></div>
<div class="txt">Product Name004</div>
</li>
<li class="slideContent">
<div class="img"><a href="#"><img src=" http://www.newaye.com/2008/Images/Products_Center001.jpg" alt="#" width="500" height="300" οnerrοr="javascript:defaultImage(this);"/></a></div>
<div class="txt">Product Name005</div>
</li>
<li class="slideContent">
<div class="img"><a href="#"><img src=" http://www.newaye.com/2008/Images/Products_Center002.jpg" alt="#" width="500" height="300" οnerrοr="javascript:defaultImage(this);"/></a></div>
<div class="txt">Product Name006</div>
</li>
<li class="slideContent">
<div class="img"><a href="#"><img src=" http://www.newaye.com/2008/Images/Products_Center003.jpg" alt="#" width="500" height="300" οnerrοr="javascript:defaultImage(this);"/></a></div>
<div class="txt">Product Name007</div>
</li>
<li class="slideContent">
<div class="img"><a href="#"><img src=" http://www.newaye.com/2008/Images/Products_Center004.jpg" alt="#" width="500" height="300" οnerrοr="javascript:defaultImage(this);"/></a></div>
<div class="txt">Product Name008</div>
</li>
</ul>
</div>
<div class="btn_next"> <img src=" http://www.newaye.com/2008/Images/Btn_Prudctst_next.gif" alt="" id="nextBtn" /></div>
</div>
<script type="text/javascript">
initScrollContent();
</script>
</td>
</tr>
</table>
img, fieldset {border:0 none; vertical-align:middle;}
#product {float:left; width:600px;}
.product_tit {position:relative;background:url('Images/main_product_bg.gif') no-repeat;color:#333; font-weight:bold; padding:8px 0 0 15px; height:300px;}
.product_tit span {position:absolute; top:9px; right:14px; color:#406c80; font-size:0.75em;}
.product_tit span a {color:#406c80; text-decoration:underline;}
.product_tit span a:link,
.product_tit span a:visited,
.product_tit span a:active,
.product_tit span a:hover {color:#406c80; text-decoration:underline;}
.product_list {}
.product_list div.btn_prev {float:left; height:360px;}
.product_list ul.list {float:left; padding-left:0px;}
.product_list ul.list li {float:left;margin:20px 0px 0 0; text-align:center;}
.product_list ul.list li div.img {background:url('Images/product_bg.gif') no-repeat; width:500px; height:360px;}
.product_list ul.list li div.txt {color:#4d4d4d; font-size:0.95em;}
.product_list div.btn_next {float:right; height:360px;}
.product_list div.cboth {clear:both;}
#slideContentContainer {
float:left;
position: relative;
margin-left:0px;
width: 555px;
height: 360px;
overflow: hidden;
}
#slideContent {
position: absolute;
}
#slideContent div.slideContent {
position: absolute;
width: 80px;
padding: 10px;
}
#slideBtnSet {
width: 80px;
padding: 10px;
text-align: right;
}
#slideBtnSet *.on {
color: #000;
cursor: pointer;
}
#slideBtnSet *.off {
color: #aaa;
cursor: default;
}
</style>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><script type="text/javascript">
<!--
/* Slide Content */
var currentContentPage = 1;
var contentElCount = 3;
var content_x = 0;
var slideContentTo = 0;
var contentWidth = 500;//每次切换的尺寸
var isImageBtn = false;
function initScrollContent(initCont) {
cont = document.getElementById("slideContent").getElementsByTagName("li");
for (i=0; i<cont.length; i++) {
if (cont[i].className == "slideContent") {
contentElCount++;
cont[i].style.left = contentWidth * (contentElCount - 1) + "px";
}
}
setSlideBtn();
}
function setSlideBtn() {
if (parseInt(currentContentPage) == 1) {
if(contentElCount < 5){
setPrevBtn("off");
setNextBtn("off");
}else{
setPrevBtn("off");
setNextBtn("on");
}
} else if (parseInt(currentContentPage) == contentElCount-3) {
setPrevBtn("on");
setNextBtn("off");
} else {
setPrevBtn("on");
setNextBtn("on");
}
}
function setPrevBtn(condition) {
var prevBtn = document.getElementById("prevBtn");
if (condition == "on") {
prevBtn.onclick = viewPrev;
prevBtn.style.cursor = "pointer";
if (isImageBtn) prevBtn.src = prevBtn.src.replace("_off.gif", ".gif");
prevBtn.className = "on";
} else {
prevBtn.onclick = "";
prevBtn.style.cursor = "default";
if (isImageBtn) prevBtn.src = prevBtn.src.replace(".gif", "_off.gif");
prevBtn.className = "off";
}
}
function setNextBtn(condition) {
var nextBtn = document.getElementById("nextBtn");
if (condition == "on") {
nextBtn.onclick = viewNext;
nextBtn.style.cursor = "pointer";
if (isImageBtn) nextBtn.src = nextBtn.src.replace("_off.gif", ".gif");
nextBtn.className = "on";
} else {
nextBtn.onclick = "";
nextBtn.style.cursor = "default";
if (isImageBtn) nextBtn.src = nextBtn.src.replace(".gif", "_off.gif");
nextBtn.className = "off";
}
}
function viewPrev() {
slideContentTo += contentWidth;
currentContentPage = parseInt(currentContentPage) - 1;
setSlideBtn();
startScroll();
}
function viewNext() {
slideContentTo -= contentWidth;
currentContentPage = parseInt(currentContentPage) + 1;
setSlideBtn();
startScroll();
}
function startScroll() {
setTimeout("slideContent()", 10);//切换速度
}
function slideContent() {
if (Math.abs(content_x - slideContentTo) > 1) {
content_x += (slideContentTo - content_x) * .10;
document.getElementById("slideContent").style.left = content_x + "px";
startScroll();
} else {
content_x = slideContentTo;
document.getElementById("slideContent").style.left = content_x + "px";
}
}
function defaultImage(img){
img.src = " http://www.newaye.com/2008/Images/Default_PR_no.gif";
}
//-->
</script>
<div class="product_list">
<div class="btn_prev"> <img src=" http://www.newaye.com/2008/Images/Btn_Prudctst_prev.gif" alt="" id="prevBtn" /></div>
<div id="slideContentContainer">
<ul class="list" id="slideContent">
<li class="slideContent">
<div class="img"><a href="#"><img src=" http://www.newaye.com/2008/Images/Products_Center001.jpg" alt="#" width="500" height="300" οnerrοr="javascript:defaultImage(this);"/></a></div>
<div class="txt">Product Name001</div>
</li>
<li class="slideContent">
<div class="img"><a href="#"><img src=" http://www.newaye.com/2008/Images/Products_Center002.jpg" alt="#" width="500" height="300" οnerrοr="javascript:defaultImage(this);"/></a></div>
<div class="txt">Product Name002</div>
</li>
<li class="slideContent">
<div class="img"><a href="#"><img src=" http://www.newaye.com/2008/Images/Products_Center003.jpg" alt="#" width="500" height="300" οnerrοr="javascript:defaultImage(this);"/></a></div>
<div class="txt">Product Name003</div>
</li>
<li class="slideContent">
<div class="img"><a href="#"><img src=" http://www.newaye.com/2008/Images/Products_Center004.jpg" alt="#" width="500" height="300" οnerrοr="javascript:defaultImage(this);"/></a></div>
<div class="txt">Product Name004</div>
</li>
<li class="slideContent">
<div class="img"><a href="#"><img src=" http://www.newaye.com/2008/Images/Products_Center001.jpg" alt="#" width="500" height="300" οnerrοr="javascript:defaultImage(this);"/></a></div>
<div class="txt">Product Name005</div>
</li>
<li class="slideContent">
<div class="img"><a href="#"><img src=" http://www.newaye.com/2008/Images/Products_Center002.jpg" alt="#" width="500" height="300" οnerrοr="javascript:defaultImage(this);"/></a></div>
<div class="txt">Product Name006</div>
</li>
<li class="slideContent">
<div class="img"><a href="#"><img src=" http://www.newaye.com/2008/Images/Products_Center003.jpg" alt="#" width="500" height="300" οnerrοr="javascript:defaultImage(this);"/></a></div>
<div class="txt">Product Name007</div>
</li>
<li class="slideContent">
<div class="img"><a href="#"><img src=" http://www.newaye.com/2008/Images/Products_Center004.jpg" alt="#" width="500" height="300" οnerrοr="javascript:defaultImage(this);"/></a></div>
<div class="txt">Product Name008</div>
</li>
</ul>
</div>
<div class="btn_next"> <img src=" http://www.newaye.com/2008/Images/Btn_Prudctst_next.gif" alt="" id="nextBtn" /></div>
</div>
<script type="text/javascript">
initScrollContent();
</script>
</td>
</tr>
</table>