87,910
社区成员
发帖
与我相关
我的任务
分享基于Jquery的焦点图切换源码分析
焦点图切换源码如下，写到关键地方就不知道怎么写了。不要回复说去某某网站下源码
需要把算法和具体接下来的源码步骤解释贴出来....谢谢！！！！
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<LINK rel=Stylesheet type=text/css href="css/1.css">
<script src="js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
</head>
<body>
<div id="top">
<ul>
<li class="cc"><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/5.jpg"/></li>
</ul></div>
<input type="button" value="Hide" id="ck" />
<input type="button" value="Show" id="sk" />
<script type="text/javascript">
$("#ck").click(
function(){
$("#top").hide(500,function(){
alert("1321");});});
$(document).ready(function(){
function callback(){alert("动画执行完毕");}
$("#sk").click(
function(){$("#top").show();}
);});
</script>
</body>
</html>
#top
{
width:480px;
height:200px;
border:1px solid #ccc;
position:relative;
text-align:center;
margin:auto;
overflow:hidden;
}
#top ul
{
margin:0px;
border:0;
padding:0px;
margin-left:0px;
list-style-type:none;
}
#top ul li
{
padding:0px;
margin-left:0px;
display:inline;
}
需要把算法和具体接下来的源码步骤解释贴出来....谢谢！！！！
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<LINK rel=Stylesheet type=text/css href="css/1.css">
<script src="js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
</head>
<body>
<div id="top">
<ul>
<li class="cc"><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/5.jpg"/></li>
</ul></div>
<input type="button" value="Hide" id="ck" />
<input type="button" value="Show" id="sk" />
<script type="text/javascript">
$("#ck").click(
function(){
$("#top").hide(500,function(){
alert("1321");});});
$(document).ready(function(){
function callback(){alert("动画执行完毕");}
$("#sk").click(
function(){$("#top").show();}
);});
</script>
</body>
</html>
#top
{
width:480px;
height:200px;
border:1px solid #ccc;
position:relative;
text-align:center;
margin:auto;
overflow:hidden;
}
#top ul
{
margin:0px;
border:0;
padding:0px;
margin-left:0px;
list-style-type:none;
}
#top ul li
{
padding:0px;
margin-left:0px;
display:inline;
}
...全文
请发表友善的回复…
发表回复
wu19870514 2012-05-13
- 打赏
- 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<LINK rel=Stylesheet type=text/css href="css/1.css">
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<div id="top">
<ul>
<li class="cc"><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/5.jpg"/></li>
</ul></div>
<input type="button" value="Hide" id="ck" />
<input type="button" value="Show" id="sk" />
<script type="text/javascript">
$("#ck").click(
function(){
$("#top").hide(500,function(){
alert("1321");});});
$(document).ready(function(){
function callback(){alert("动画执行完毕");}
$("#sk").click(
function(){$("#top").show();}
);});
setInterval(roll,1000);
var count = 1;
function roll(){
if(count == $("#top ul li").length){
count = 1;
}else{
count++;
}
$("#top ul li").hide();
$("#top ul li").eq(count-1).fadeIn();
}
</script>
</body>
</html>
<style>
#top
{
width:480px;
height:200px;
border:1px solid #ccc;
position:relative;
text-align:center;
margin:auto;
overflow:hidden;
}
#top ul
{
margin:0px;
border:0;
padding:0px;
margin-left:0px;
list-style-type:none;
}
#top ul li
{
padding:0px;
margin-left:0px;
display:none;
}
#top ul li.cc
{
display:block;
}
</style>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<LINK rel=Stylesheet type=text/css href="css/1.css">
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<div id="top">
<ul>
<li class="cc"><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/5.jpg"/></li>
</ul></div>
<input type="button" value="Hide" id="ck" />
<input type="button" value="Show" id="sk" />
<script type="text/javascript">
$("#ck").click(
function(){
$("#top").hide(500,function(){
alert("1321");});});
$(document).ready(function(){
function callback(){alert("动画执行完毕");}
$("#sk").click(
function(){$("#top").show();}
);});
setInterval(roll,1000);
var count = 1;
function roll(){
if(count == $("#top ul li").length){
count = 1;
}else{
count++;
}
$("#top ul li").hide();
$("#top ul li").eq(count-1).fadeIn();
}
</script>
</body>
</html>
<style>
#top
{
width:480px;
height:200px;
border:1px solid #ccc;
position:relative;
text-align:center;
margin:auto;
overflow:hidden;
}
#top ul
{
margin:0px;
border:0;
padding:0px;
margin-left:0px;
list-style-type:none;
}
#top ul li
{
padding:0px;
margin-left:0px;
display:none;
}
#top ul li.cc
{
display:block;
}
</style>
