$(document).ready(function(){
var auto=true;
var neednumhander=true;
var settimeout;
var rongqi=$("#slider");
var curr=1;
var thispage;
var $img=rongqi.find("img");
var ilen=$img.length;
var $ul=$("ul",rongqi);
var heng=true;
var next;
var easing="easeOutBounce";
var iwidth=400;
var iheigth=$img.eq(0).height();
var settime;
rongqi.css("overflow","hidden");
if(auto)
{
timeout=setTimeout(function(){
donghua(2,false);
},2000);
}
if(neednumhander)
{
var numdiv="<div id='flashnvanum'>";
for(i=0;i<ilen;i++)
{
numdiv+="<span>"+(i+1)+"</span>";
}
numdiv+="</div>";
rongqi.append(numdiv);
rongqi.find("#flashnvanum span").hover(function(){
thispage=parseInt($(this).text());
donghua(thispage,true);
},function(){
timeout=setTimeout(function(){
donghua(thispage,false);
},2000);
});
}
function setclass(index)
{
rongqi.find("#flashnvanum>span").eq(index).addClass("on").siblings().removeClass("on");
}
function donghua(index,clicked)
{
if(index=="")
{
return false;
}
$ul.stop();
if(clicked)
{
clearTimeout(timeout);
}
next=index==ilen?1:index+1;
var pre=index-1;
setclass(index-1);
if(heng)
{
p3=(pre*iwidth)*(-1);
$ul.animate({marginLeft:p3+"px"},{
queue:false,
duration:600,
easing:easing});
}
if(auto && !clicked)
{
timeout=setTimeout(function(){
donghua(next,false);
},2000);
}
}
});
*{
padding:0;
margin:0;
list-style:none;
border:none;
}
a{
color:#9C0;
text-decoration:none;
}
img{
width:400px;
height:300px;
}
#slider{
width:400px;
position:absolute;
height:300px;
}
#slider ul{
width:3000px;
height:300px;
background:#000;
}
#slider ul li{
float:left;
width:400px;
}
#flashnvanum
{
bottom: 10px;
position: absolute;
right: 20px;
width: 90px;
}
#flashnvanum span
{
background: transparent url(../images/flashbutton.gif) no-repeat scroll -15px 0;
color: #86A2B8;
cursor: pointer;
float: left;
font-family: Arial;
font-size: 12px;
height: 15px;
line-height: 15px;
margin: 1px;
text-align: center;
width: 15px;
}
#flashnvanum span.on
{
background: transparent url(../images/flashbutton.gif) no-repeat scroll 0 0;
color: #FFFFFF;
height: 15px;
line-height: 15px;
width: 15px;
}
.jj{
float:left;
}
<meta http-equiv="Content-Type">
<head>
<title></title>
<script src="../jq.js" type="text/javascript"></script>
<script src="javascript/jquery.flashSlider-1.0.js" type="text/javascript"></script>
<script src="../esing.js" type="text/javascript"></script>
<link href="css/jquery.flashSlider.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="slider">
<ul style="background-color:#F66">
<li>
<img src="images/01.jpg" alt="" /></li>
<li>
<img src="images/02.jpg" alt="" /></li>
<li>
<img src="images/03.jpg" alt="" /></li>
<li>
<img src="images/04.jpg" alt="" /></li>
<li>
<img src="images/05.jpg" alt="" /></li>
</ul>
</div>
</body>
</html>
http://xinwenmm.co.cc
var auto=true;
var neednumhander=true;
var settimeout;
var rongqi=$("#slider");
var curr=1;
var thispage;
var $img=rongqi.find("img");
var ilen=$img.length;
var $ul=$("ul",rongqi);
var heng=true;
var next;
var easing="easeOutBounce";
var iwidth=400;
var iheigth=$img.eq(0).height();
var settime;
rongqi.css("overflow","hidden");
if(auto)
{
timeout=setTimeout(function(){
donghua(2,false);
},2000);
}
if(neednumhander)
{
var numdiv="<div id='flashnvanum'>";
for(i=0;i<ilen;i++)
{
numdiv+="<span>"+(i+1)+"</span>";
}
numdiv+="</div>";
rongqi.append(numdiv);
rongqi.find("#flashnvanum span").hover(function(){
thispage=parseInt($(this).text());
donghua(thispage,true);
},function(){
timeout=setTimeout(function(){
donghua(thispage,false);
},2000);
});
}
function setclass(index)
{
rongqi.find("#flashnvanum>span").eq(index).addClass("on").siblings().removeClass("on");
}
function donghua(index,clicked)
{
if(index=="")
{
return false;
}
$ul.stop();
if(clicked)
{
clearTimeout(timeout);
}
next=index==ilen?1:index+1;
var pre=index-1;
setclass(index-1);
if(heng)
{
p3=(pre*iwidth)*(-1);
$ul.animate({marginLeft:p3+"px"},{
queue:false,
duration:600,
easing:easing});
}
if(auto && !clicked)
{
timeout=setTimeout(function(){
donghua(next,false);
},2000);
}
}
});
*{
padding:0;
margin:0;
list-style:none;
border:none;
}
a{
color:#9C0;
text-decoration:none;
}
img{
width:400px;
height:300px;
}
#slider{
width:400px;
position:absolute;
height:300px;
}
#slider ul{
width:3000px;
height:300px;
background:#000;
}
#slider ul li{
float:left;
width:400px;
}
#flashnvanum
{
bottom: 10px;
position: absolute;
right: 20px;
width: 90px;
}
#flashnvanum span
{
background: transparent url(../images/flashbutton.gif) no-repeat scroll -15px 0;
color: #86A2B8;
cursor: pointer;
float: left;
font-family: Arial;
font-size: 12px;
height: 15px;
line-height: 15px;
margin: 1px;
text-align: center;
width: 15px;
}
#flashnvanum span.on
{
background: transparent url(../images/flashbutton.gif) no-repeat scroll 0 0;
color: #FFFFFF;
height: 15px;
line-height: 15px;
width: 15px;
}
.jj{
float:left;
}
<meta http-equiv="Content-Type">
<head>
<title></title>
<script src="../jq.js" type="text/javascript"></script>
<script src="javascript/jquery.flashSlider-1.0.js" type="text/javascript"></script>
<script src="../esing.js" type="text/javascript"></script>
<link href="css/jquery.flashSlider.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="slider">
<ul style="background-color:#F66">
<li>
<img src="images/01.jpg" alt="" /></li>
<li>
<img src="images/02.jpg" alt="" /></li>
<li>
<img src="images/03.jpg" alt="" /></li>
<li>
<img src="images/04.jpg" alt="" /></li>
<li>
<img src="images/05.jpg" alt="" /></li>
</ul>
</div>
</body>
</html>
http://xinwenmm.co.cc
667
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
