js　脚本切换图片循环

fuhaojie626 2010-12-27 02:42:06

...全文

345 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

fuhaojie626 2010-12-27

打赏
举报

这个是整个代码部分
<%@ page language="C#" masterpagefile="~/bedove.master" autoeventwireup="true" CodeFile="productshow.aspx.cs" Inherits="productshow"title="无标题页" %>

<asp:Content ID="Content1" ContentPlaceHolderID="Head" Runat="Server">
<link href="pro/layout.css" rel="stylesheet" type="text/css"/>

<%--<link type="text/css" rel="stylesheet" href="js/galleryview.css" />--%>
<script type="text/javascript" src="pro/jquery-1.js"></script>
<script type="text/javascript" src="pro/jquery-ui-1.js"></script>
<script type="text/javascript" src="pro/jquery.js"></script>
<script type="text/javascript" src="pro/common.js"></script>
<script type="text/javascript" src="pro/swfobject_modified.js"></script>
<script type="text/javascript" src="pro/pro_fun.js"></script>
<script language="javascript">
function qiehuan(num){
for(var id = 0;id<=9;id++)
{
if(id==num)
{
document.getElementById("qh_con"+id).style.display="block";
document.getElementById("mynav"+id).className="nav_on";
}
else
{
document.getElementById("qh_con"+id).style.display="none";
document.getElementById("mynav"+id).className="";
}
}
}

function change_view(obj_name)
{
var aa=document.getElementById(obj_name);
if(aa.style.display=="")
{
aa.style.display="none";
}
else
{
aa.style.display="";
}
}

</script>

<%-- <script type="text/javascript">
$(document).ready(function(){
$('#photos').galleryView({
panel_width: 618,
panel_height: 400,
frame_width: 62,
frame_height: 42
});
});
</script> --%>
<style>
.q_box{ position:relative; height:30px; width:100%; padding-bottom:10px;}
.qqnav{ position:relative; left:10px;}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Content" Runat="Server">
<div class="q_box">

<div class="head">

<ul class="qqnav" onMouseOver="document.getElementById('div1').style.display='block'">
<li><a href="#" onMouseOver="document.getElementById('layer1').style.display='block'"& gt;在线交谈</a></li>

</ul>
</div>
<div id="div1" onMouseOver="document.getElementById('div1').style.display='block'" onMouseOut="document.getElementById('div1').style.display='none'">
<ul id="layer1">
<li><a href="productlist.html">新品推荐</a></li>
<li><a href="product-1.html">直板系列</a></li>
<li><a href="product-2.html">翻盖系列</a></li>
<li><a href="product-3.html">滑盖系列</a></li>
</ul>

</div>
</div>
<div id="container">
<div id="container-inc">

<div id="article-list1">
<div id="article-cate1"><span>当前位置:首页->产品展示-><%=sortname %></span><%=sortname %></div>
<div id="proview">
<div class="pro_big"><img src="<%=pro.BigPic %>"></div>
<div class="pro_tab">
<UL id=tags>
<LI class=selectTag><A onclick="selectTag('tagContent0',this)">功能特色</A> </LI>
<LI><A onclick="selectTag('tagContent1',this)">产品参数</A> </LI>
<LI><A onclick="selectTag('tagContent2',this)">产品图片</A> </LI>
<LI><A onclick="selectTag('tagContent3',this)">相关下载</A> </LI>
</UL>
<DIV id=tagContent class=intro_sadow>
<DIV id=tagContent0 class="tagContent selectTag">
<div class="pro_content">
<%=pro.ContentCh %>
</div>
</DIV>
<DIV id=tagContent1 class=tagContent>
<%=pro.SpecCh %>
</DIV>
<DIV id=tagContent2 class=tagContent>
<%
if (pro.OtherPic != "")
{
string[] otherpic = pro.OtherPic.Split(',');

%>
<div id="contain">
<div class="t-bg"></div>
<div class="shows">
<div class="pic-show" id="picshow"><img src="<%=otherpic[0] %>" class="picshow_area"></div>
<div class="thumb-bar">
<a href="#" class="previous" onmousedown="moveSlide(1);return false;" onmouseup="stopMoveSlide();return false" onclick="stepSlide(false);return false;"></a>
<div class="thumb-img">
<div id="thumbs">
<%
for (int i = 0; i < otherpic.Length-1; i++)
{
%>
<a class="<%=(i==0)?"current":"" %>" href="#" id="_slide_<%=i %>" onclick='showImage("<%=otherpic[i] %>", this);return false;'><img src="<%=otherpic[i] %>" width="150px" height="80px"></a>
<%} %>

</div>
</div>
<a href="#" class="next" onmousedown="moveSlide(-1);return false;" onmouseup="stopMoveSlide();return false" onclick="stepSlide(true);return false;"></a>
<div class="zclear"></div>
</div>
</div>
</div>

<script language="javascript">

var img_width = 120;
var img_size = 0;
var cur_s_w = 0;

function install_slide(images) {
img_size = images.length;
var thumbs = document.getElementById("thumbs");
var html = "";
for (var i = 0; i < images.length; ++i) {
if (!images[i]) break;
html += "<a href='#' id='_slide_"+i+"' onclick='showImage(\""+images[i][1]+"\", this);return false;'><img src=\""+images[i][0]+"\" width=\"150px\" height=\"80px\" /></a>";
(new Image()).src=images[i][1];
}
thumbs.innerHTML = html;
if (images.length > 0) {
showImage(images[0][1], document.getElementById("_slide_0"));
}
}

function showImage(img, src) {
document.getElementById("picshow").innerHTML = "<img src=\""+img+"\" class='picshow_area'/>";
var thumbs = document.getElementById("thumbs");
if (thumbs._current) thumbs._current.className = "";
src.className = "current";
thumbs._current = src;
}

function stepSlide(right) {
var thumbs = document.getElementById("thumbs");
var left = parseInt(thumbs.style.left);
if (!left) left = 0;
var step = right ? -180 : 180;
left += step;

if (left > 0) left = 0;

if(cur_s_w<thumbs.parentNode.scrollWidth){cur_s_w = thumbs.parentNode.scrollWidth;}
if (thumbs.scrollWidth + left < thumbs.parentNode.clientWidth) {
left = thumbs.parentNode.clientWidth - cur_s_w;
}

$("#thumbs").animate({'left' : left }, 180);
}

function moveSlide(right) {
var thumbs = document.getElementById("thumbs");
thumbs._move_step = right * (-10);
if (thumbs._move_interval) {
clearInterval(thumbs._move_interval);
thumbs._move_interval = null;
}
thumbs._move_interval = setInterval("moveSlide0()", 20);
}

function stopMoveSlide() {
var thumbs = document.getElementById("thumbs");
if (thumbs._move_interval) {
clearInterval(thumbs._move_interval);
thumbs._move_interval = null;
}
}

function moveSlide0() {
var thumbs = document.getElementById("thumbs");
var end = false;
var left = parseInt(thumbs.style.left);
if (!left) left = 0;
left += thumbs._move_step;
if (thumbs.parentNode.clientWidth - left > thumbs.scrollWidth) {
left = thumbs.parentNode.clientWidth - thumbs.scrollWidth;
end = true;
}
if (left > 0) {
left = 0;
end = true;
}
thumbs.style.left = left + "px";
if (end) {
clearInterval(thumbs._move_interval);
thumbs._move_interval = null;
}
}

install_slide(
[
<%
for (int j = 0; j < otherpic.Length-1; j++)
{
if((j+1)!=otherpic.Length-1)
{
%>
["<%=otherpic[j] %>", "<%=otherpic[j] %>"],
<%}
else{ %>
["<%=otherpic[j] %>", "<%=otherpic[j] %>"]

<%}} %>

]
);
</script>
<%} %>
</DIV>

<DIV id=tagContent3 class=tagContent>
<UL>
<%
if(pro.FileUrl!="")
{
string[] file = pro.FileUrl.Split(',');
string[] filename = pro.FileName.Split(',');
for(int i=0;i<file.Length-1;i++)
{
%>
<LI><A href="<%=file[i] %>" target=_self><%=filename[i] %></A> </LI>
<%} %>

<%} %>
</UL>
</DIV>
<SCRIPT type=text/javascript>
function selectTag(showContent,selfObj){
// 操作标签
var tag = document.getElementById("tags").getElementsByTagName("li");
var taglength = tag.length;
for(i=0; i<taglength; i++){
tag[i].className = "";
}
selfObj.parentNode.className = "selectTag";
// 操作内容
for(i=0; j=document.getElementById("tagContent"+i); i++){
j.style.display = "none";
}
document.getElementById(showContent).style.display = "block";

}
</SCRIPT>
</DIV>
</div>
</div>
</div>
<div class="clearit"></div>
</div>
<div id="container-bot">
</div>
</div>
</asp:Content>

猿敲月下码 2010-12-27

打赏
举报

向右移动的时候,right参数为true,尝试改下left的值
function stepSlide(right) {
var thumbs = document.getElementById("thumbs");
var left = parseInt(thumbs.style.left);
if (!left) left = 0;
var step = right ? -940 : 940;
left += step;

if (left > 0) left = 0;
if(cur_s_w<thumbs.parentNode.scrollWidth){cur_s_w = thumbs.parentNode.scrollWidth;}
if (thumbs.scrollWidth + left < thumbs.parentNode.clientWidth) {
left = thumbs.parentNode.clientWidth - cur_s_w;
}
$("#thumbs").animate({'left' : left }, 500);
}