<%@ Page Language="C#" AutoEventWireup="true" CodeFile="qyxx-1.aspx.cs" Inherits="qyxx1" %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>GLORY(Ningbo)Service Co,.Ltd</title><link href="inc/css.css" rel="stylesheet" type="text/css">
<script src="scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<style type="text/css">
.img_xian { width:703px;
height:80px;float:left; padding-top:10px; overflow :hidden;
}
.img_xian img{width:73px; height:88px; cursor:pointer;
}
.img_xian img.xian{width:71px;
height: 85px;
border:1px solid #00CC00;
}
#hda{ width:743px; height:383px;}
</style>
<script type="text/javascript">
var index = 1;
var toale = 0; $(function () { $(".img_xian img").hover(
function () { $(this).addClass("xian") },
function () { $(this).removeClass("xian") });
auto(); })
function xiao(id) {
index = parseInt(id.substring(5));
clearTimeout(p);
auto(); }
function leftyin() {
$("#hxiao1").show();
$("#hxiao2").show();
$("#hxiao3").show();
$("#hxiao4").show(); }
function rightin() {
$("#hxiao1").hide();
$("#hxiao2").hide();
$("#hxiao3").hide();
$("#hxiao4").hide();
} function auto() {
var hedi = $(".img_xian").width();
$("#hda").attr("src", $("#" + "hxiao" + index).attr("src"));
index = index + 1;
toale = $(".img_xian img").length;
if (index > toale) {
index = 1;
}
p = setTimeout("auto()", 3000);
}
</script>
</head><body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="980" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<!--#include file="top.aspx" -->
</td>
</tr>
</table>
<table width="980" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="212" align="center" valign="top" bgcolor="#E7E5F2">
<!--#include file="zb.aspx" -->
</td>
<td align="right" valign="top">
<table width="764" border="0" cellspacing="0" cellpadding="0">
<tr>
<div id="img_hzong">
<div id="img_da"><img id="hda" /></div>
<div id="img_xiao">
<div id="img_left" style="float:left; width:20px; height: 54px; padding-top:35px; ">
<img src="gsjs/ad_scroll_back.png" onclick="leftyin()" style="cursor:pointer;" /> </div>
<div class="img_xian" >
<img id="hxiao1" src="gsjs/details_01.jpg" onclick="xiao(this.id)" />
<img id="hxiao2" src="gsjs/details_02.jpg" onclick="xiao(this.id)" />
<img id="hxiao3" src="gsjs/details_03.jpg" onclick="xiao(this.id)" />
<img id="hxiao4" src="gsjs/details_04.jpg" onclick="xiao(this.id)" />
<img id="hxiao5" src="gsjs/details_05.jpg" onclick="xiao(this.id)" />
<img id="hxiao6" src="gsjs/details_06.jpg" onclick="xiao(this.id)" />
<img id="hxiao7" src="gsjs/details_07.jpg" onclick="xiao(this.id)" />
<img id="hxiao8" src="gsjs/details_08.jpg" onclick="xiao(this.id)" />
<img id="hxiao9" src="gsjs/details_09.jpg" onclick="xiao(this.id)" />
<img id="hxiao10" src="gsjs/details_010.jpg" onclick="xiao(this.id)" />
<img id="hxiao11" src="gsjs/details_011.jpg" onclick="xiao(this.id)" />
<img id="hxiao12" src="gsjs/details_012.jpg" onclick="xiao(this.id)" />
<img id="hxiao13" src="gsjs/details_013.jpg" onclick="xiao(this.id)" /> </div>
<div id="img_right" style="float:left; width:20px; height: 56px; padding-top:35px;">
<img src="gsjs/ad_scroll_forward.png" onclick="rightin()" style="cursor:pointer" /> </div></div>
</div>
</td>
</tr>
<tr>
<td height="16" background="images/index_38.jpg">
</td>
</tr>
</table>
<table width="100" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="5">
</td>
</tr>
</table></td>
</tr>
</table>
<table width="980" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<!--#include file="di.aspx" -->
</td>
</tr>
</table>
</body>
</html>
求 办法 让小图在 auto() 这个 方法 中，每次大图片的轮换后，小图也能像左隐藏一张
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>GLORY(Ningbo)Service Co,.Ltd</title><link href="inc/css.css" rel="stylesheet" type="text/css">
<script src="scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<style type="text/css">
.img_xian { width:703px;
height:80px;float:left; padding-top:10px; overflow :hidden;
}
.img_xian img{width:73px; height:88px; cursor:pointer;
}
.img_xian img.xian{width:71px;
height: 85px;
border:1px solid #00CC00;
}
#hda{ width:743px; height:383px;}
</style>
<script type="text/javascript">
var index = 1;
var toale = 0; $(function () { $(".img_xian img").hover(
function () { $(this).addClass("xian") },
function () { $(this).removeClass("xian") });
auto(); })
function xiao(id) {
index = parseInt(id.substring(5));
clearTimeout(p);
auto(); }
function leftyin() {
$("#hxiao1").show();
$("#hxiao2").show();
$("#hxiao3").show();
$("#hxiao4").show(); }
function rightin() {
$("#hxiao1").hide();
$("#hxiao2").hide();
$("#hxiao3").hide();
$("#hxiao4").hide();
} function auto() {
var hedi = $(".img_xian").width();
$("#hda").attr("src", $("#" + "hxiao" + index).attr("src"));
index = index + 1;
toale = $(".img_xian img").length;
if (index > toale) {
index = 1;
}
p = setTimeout("auto()", 3000);
}
</script>
</head><body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="980" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<!--#include file="top.aspx" -->
</td>
</tr>
</table>
<table width="980" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="212" align="center" valign="top" bgcolor="#E7E5F2">
<!--#include file="zb.aspx" -->
</td>
<td align="right" valign="top">
<table width="764" border="0" cellspacing="0" cellpadding="0">
<tr>
<div id="img_hzong">
<div id="img_da"><img id="hda" /></div>
<div id="img_xiao">
<div id="img_left" style="float:left; width:20px; height: 54px; padding-top:35px; ">
<img src="gsjs/ad_scroll_back.png" onclick="leftyin()" style="cursor:pointer;" /> </div>
<div class="img_xian" >
<img id="hxiao1" src="gsjs/details_01.jpg" onclick="xiao(this.id)" />
<img id="hxiao2" src="gsjs/details_02.jpg" onclick="xiao(this.id)" />
<img id="hxiao3" src="gsjs/details_03.jpg" onclick="xiao(this.id)" />
<img id="hxiao4" src="gsjs/details_04.jpg" onclick="xiao(this.id)" />
<img id="hxiao5" src="gsjs/details_05.jpg" onclick="xiao(this.id)" />
<img id="hxiao6" src="gsjs/details_06.jpg" onclick="xiao(this.id)" />
<img id="hxiao7" src="gsjs/details_07.jpg" onclick="xiao(this.id)" />
<img id="hxiao8" src="gsjs/details_08.jpg" onclick="xiao(this.id)" />
<img id="hxiao9" src="gsjs/details_09.jpg" onclick="xiao(this.id)" />
<img id="hxiao10" src="gsjs/details_010.jpg" onclick="xiao(this.id)" />
<img id="hxiao11" src="gsjs/details_011.jpg" onclick="xiao(this.id)" />
<img id="hxiao12" src="gsjs/details_012.jpg" onclick="xiao(this.id)" />
<img id="hxiao13" src="gsjs/details_013.jpg" onclick="xiao(this.id)" /> </div>
<div id="img_right" style="float:left; width:20px; height: 56px; padding-top:35px;">
<img src="gsjs/ad_scroll_forward.png" onclick="rightin()" style="cursor:pointer" /> </div></div>
</div>
</td>
</tr>
<tr>
<td height="16" background="images/index_38.jpg">
</td>
</tr>
</table>
<table width="100" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="5">
</td>
</tr>
</table></td>
</tr>
</table>
<table width="980" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<!--#include file="di.aspx" -->
</td>
</tr>
</table>
</body>
</html>
求 办法 让小图在 auto() 这个 方法 中，每次大图片的轮换后，小图也能像左隐藏一张
function leftClick() {
var getLi;
getLi = document.getElementById("createPublicHeaed").getElementsByTagName("div");
if ((getLi[getLi.length - 1].className.indexOf('chosen')) == -1) {
for (var x = 0; x < getLi.length - 1; x++) {
if ((getLi[x].className.indexOf('chosen')) != -1) {
getLi[x].className = getLi[x].className.replace("chosen", "");
x++;
if (x < getLi.length) {
getLi[x].className += " chosen";
if (x > 8 && x < getLi.length) {
getLi[x].className = getLi[x].className.replace("hide", "");
if ((getLi[x - 9].className.indexOf('hide')) == -1) {
getLi[x - 9].className += " hide";
}
}
}
}
}
}
}
function rightClick() {
var getLi;
getLi = document.getElementById("createPublicHeaed").getElementsByTagName("div");
if ((getLi[0].className.indexOf('chosen')) == -1) {
for (var x = getLi.length - 1; x > 0; x--) {
if ((getLi[x].className.indexOf('chosen')) != -1) {
getLi[x].className = getLi[x].className.replace("chosen", "");
x--;
if (x > -1) {
getLi[x].className += " chosen";
if (x > -1 && x < getLi.length - 9) {
getLi[x].className = getLi[x].className.replace("hide", "");
if ((getLi[x + 9].className.indexOf('hide')) == -1) {
getLi[x + 9].className += " hide";
}
}
}
}
}
}
}
<div class="chosen">
<img src="http://211.100.28.28:8081/Images/zhanshi_head/hd11.jpg"
id="11" style="float: left; margin-top: 8px; margin-left: 8px;
width: 50px; height: 50px;" />
</div>
<div>
<img src="http://211.100.28.28:8081/Images/zhanshi_head/hd16.jpg"
id="16" style="float: left; margin-top: 8px; margin-left: 8px;
width: 50px; height: 50px;" />
</div>
<div>
<img src="http://211.100.28.28:8081/\images\zhanshi_head\hd17.jpg"
id="17" style="float: left; margin-top: 8px; margin-left: 8px;
width: 50px; height: 50px;" />
</div>
<div>
<img src="http://211.100.28.28:8081/\images\zhanshi_head\hd18.jpg"
id="18" style="float: left; margin-top: 8px; margin-left: 8px;
width: 50px; height: 50px;" />
</div>
<div>
<img src="http://211.100.28.28:8081/\images\zhanshi_head\hd19.jpg"
id="19" style="float: left; margin-top: 8px; margin-left: 8px;
width: 50px; height: 50px;" />
</div>
<div>
<img src="http://211.100.28.28:8081/\images\zhanshi_head\hd20.jpg"
id="20" style="float: left; margin-top: 8px; margin-left: 8px;
width: 50px; height: 50px;" />
</div>
<div>
<img src="http://211.100.28.28:8081/\images\zhanshi_head\hd21.jpg"
id="21" style="float: left; margin-top: 8px; margin-left: 8px;
width: 50px; height: 50px;" />
</div>
<div>
<img src="http://211.100.28.28:8081/\images\zhanshi_head\hd22.jpg"
id="22" style="float: left; margin-top: 8px; margin-left: 8px;
width: 50px; height: 50px;" />
</div>
<div class="chosen">
<img src="http://211.100.28.28:8081/\images\zhanshi_head\hd23.jpg"
id="23" style="float: left; margin-top: 8px; margin-left: 8px;
width: 50px; height: 50px;" />
</div>
<div class="hide">
<img src="http://211.100.28.28:8081/\images\zhanshi_head\hd24.jpg"
id="24" style="float: left; margin-top: 8px; margin-left: 8px;
width: 50px; height: 50px;" />
</div>
<div class="hide">
<img src="http://211.100.28.28:8081/\images\zhanshi_head\hd25.jpg"
id="25" style="float: left; margin-top: 8px; margin-left: 8px;
width: 50px; height: 50px;" />
</div>
<div class="hide">
<img src="http://211.100.28.28:8081/\images\zhanshi_head\hd26.jpg"
id="26" style="float: left; margin-top: 8px; margin-left: 8px;
width: 50px; height: 50px;" />
</div>
<div class="hide">
<img src="http://211.100.28.28:8081/\images\zhanshi_head\hd27.jpg"
id="27" style="float: left; margin-top: 8px; margin-left: 8px;
width: 50px; height: 50px;" />
</div>
<div class="hide">
<img src="http://211.100.28.28:8081/\images\zhanshi_head\hd28.jpg"
id="28" style="float: left; margin-top: 8px; margin-left: 8px;
width: 50px; height: 50px;" />
</div>
<div class="hide">
<img src="http://211.100.28.28:8081/\images\zhanshi_head\hd29.jpg"
id="29" style="float: left; margin-top: 8px; margin-left: 8px;
width: 50px; height: 50px;" />
</div>
<div class="hide">
<img src="http://211.100.28.28:8081/Images/zhanshi_head/hd3.jpg"
id="3" style="float: left; margin-top: 8px; margin-left: 8px;
width: 50px; height: 50px;" />
</div>
<div class="hide">
<img src="http://211.100.28.28:8081/\images\zhanshi_head\hd30.jpg"
id="30" style="float: left; margin-top: 8px; margin-left: 8px;
width: 50px; height: 50px;" />
</div>
html页面上的源码
<div class="createPICMain_body_bluePanel_headChoicePanel_pictureDisplayNone" id="createMyHeaed">
<div class="createPICMain_body_bluePanel_headChoicePanel_picture_detail">
<img src="Images/CreatePic/default.jpg" style="float: left; margin-top: 8px; margin-left: 8px;
width: 50px; height: 50px;" />
</div>
<div class="createPICMain_body_bluePanel_headChoicePanel_picture_detail">
<img src="Images/CreatePic/default.jpg" style="float: left; margin-top: 8px; margin-left: 8px;
width: 50px; height: 50px;" />
</div>
<div class="createPICMain_body_bluePanel_headChoicePanel_picture_detail">
<img src="Images/CreatePic/default.jpg" style="float: left; margin-top: 8px; margin-left: 8px;
width: 50px; height: 50px;" />
</div>
<div class="createPICMain_body_bluePanel_headChoicePanel_picture_detail">
<img src="Images/CreatePic/default.jpg" style="float: left; margin-top: 8px; margin-left: 8px;
width: 50px; height: 50px;" />
</div>
<div class="createPICMain_body_bluePanel_headChoicePanel_picture_detail">
<img src="Images/CreatePic/default.jpg" style="float: left; margin-top: 8px; margin-left: 8px;
width: 50px; height: 50px;" />
</div>
<div class="createPICMain_body_bluePanel_headChoicePanel_picture_detail">
<img src="Images/CreatePic/default.jpg" style="float: left; margin-top: 8px; margin-left: 8px;
width: 50px; height: 50px;" />
</div>
<div class="createPICMain_body_bluePanel_headChoicePanel_picture_detail">
<img src="Images/CreatePic/default.jpg" style="float: left; margin-top: 8px; margin-left: 8px;
width: 50px; height: 50px;" />
</div>
<div class="createPICMain_body_bluePanel_headChoicePanel_picture_detail">
<img src="Images/CreatePic/default.jpg" style="float: left; margin-top: 8px; margin-left: 8px;
width: 50px; height: 50px;" />
</div>
<div class="createPICMain_body_bluePanel_headChoicePanel_picture_detail">
<img src="Images/CreatePic/default.jpg" style="float: left; margin-top: 8px; margin-left: 8px;
width: 50px; height: 50px;" />
</div>
</div>
.createPICMain_body_bluePanel_headChoicePanel_picture div
{
width:66px;
height:66px;
float:left;
margin-left:1px;
margin-top:-8px;
cursor:pointer;
}
.createPICMain_body_bluePanel_headChoicePanel_picture .chosen
{
width:66px;
height:66px;
float:left;
margin-left:1px;
margin-top:-8px;
cursor:pointer;
}
.createPICMain_body_bluePanel_headChoicePanel_picture .hide
{
display:none;
}