产品切换求救 顶

 <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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值