简单实用的 js首页幻灯【js特效吧】

js特效吧关注：230贴子：2,226

3回复贴，共1页

简单实用的 js首页幻灯

我也是刚接触php 做第一个网站要做个幻灯在网上查的都看不懂所以自己写了个简单的希望可以帮到一些新手自己加图片进去就可以用的
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>picsGlide</title>
<style type="text/css">
.clear:after{
content:".";
visibility:hidden;
display:block;
height:0px;
clear:both;
overflow:hidden;
}
a{
text-decoration:none;
}
.lh{
width:630px;
position:relative;
margin-top:-70px;:
z-index:5px;
padding-top:5px;
padding-bottom:5px;
background-color:#6D7953;
}
.lh1{
width:40px;
float:left;
}
.lh2{
width:550px;
float:left;
}
.lh3{
width:40px;
float:right;
}
#a1 a:hover
{
color:red;
}
#picBox{width:630px; height:370px; margin:0px auto auto auto; overflow:hidden; position:relative;}
#picBox ul#show_pic{ margin:0; padding:0; list-style:none; height:370px; width:3150px; position:absolute;}
#picBox ul#show_pic li{ float:left; margin:0; padding:0; height:370px;}
#picBox ul#show_pic li img{ display:block;}
#icon_num{ padding:0; margin:0; }
#icon_num li{ float:left; list-style:none;width:110px; color:#39F; text-align:center; cursor:pointer; padding:0; margin:0;}
#icon_num li:hover,#icon_num li.active{ background-color:red;}
</style>
</head>
<body>
<div style="width:630px;margin:0px auto auto auto;">
<div id="picBox">
<ul id="show_pic" style="left:0px;">
<li><a href=""><img src="img/01.jpg" width="630" height="370" alt="" title="" /></a></li>
<li><a href=""><img src="img/02.jpg" width="630" height="370" alt="" title="" /></a></li>
<li><a href=""><img src="img/03.jpg" width="630" height="370" alt="" title="" /></a></li>
<li><a href=""><img src="img/04.jpg" width="630" height="370" alt="" title="" /></a></li>
<li><a href=""><img src="img/05.jpg" width="630" height="370" alt="" title="" /></a></li>
</ul>
</div>
<div class="lh clear">
<div class="lh1" id="1h1"><img src="img/zuo.jpg" width="40" height="60" alt="" title="" /></div>
<div class="lh2">
<ul id="icon_num" style="num clear">
<li class="active"><a href=""><img src="img/011.jpg" width="100" height="60" alt="" title="" /></a></li>
<li><a href=""><img src="img/022.jpg" width="100" height="60" alt="" title="" /></a></li>
<li><a href=""><img src="img/033.jpg" width="100" height="60" alt="" title="" /></a></li>
<li><a href=""><img src="img/044.jpg" width="100" height="60" alt="" title="" /></a></li>
<li><a href=""><img src="img/055.jpg" width="100" height="60" alt="" title="" /></a></li>
</ul>
</div>
<div class="lh3" id="1h3"><img src="img/you.jpg" width="40" height="60" alt="" title="" /></div>
</div>
</div>
<script type="text/javascript">
/**
*glide.layerGlide((oEventCont,oSlider,sSingleSize,sec,fSpeed,point);
*@param auto type:bolean 是否自动滑动当值是true的时候为自动滑动
*@param oEventCont type:object 包含事件点击对象的容器
*@param oSlider type:object 滑动对象
*@param sSingleSize type:number 滑动对象里单个元素的尺寸（width或者height）尺寸是有point 决定
*@param second type:number 自动滑动的延迟时间单位/秒
*@param fSpeed type:float 速率取值在0.05--1之间当取值是1时没有滑动效果
*@param point type:string left or top
*/
var glide =new function(){
function $id(id){return document.getElementById(id);};
this.layerGlide=function(auto,left,right,oEventCont,oSlider,sSingleSize,second,fSpeed,point){
var oSubLi = $id(oEventCont).getElementsByTagName('li');
var right=$id(right);
var left=$id(left);
var interval,timeout,oslideRange;
var time=1;
var speed = fSpeed
var sum = oSubLi.length;
var a=0;
var delay=second * 1000;
var setValLeft=function(s){
return function(){
oslideRange = Math.abs(parseInt($id(oSlider).style[point]));
$id(oSlider).style[point] =-Math.floor(oslideRange+(parseInt(s*sSingleSize) - oslideRange)*speed) +'px';
if(oslideRange==[(sSingleSize * s)]){
clearInterval(interval);
a=s;
}
}
};
var setValRight=function(s){
return function(){
oslideRange = Math.abs(parseInt($id(oSlider).style[point]));
$id(oSlider).style[point] =-Math.ceil(oslideRange+(parseInt(s*sSingleSize) - oslideRange)*speed) +'px';
if(oslideRange==[(sSingleSize * s)]){
clearInterval(interval);
a=s;
}
}
}
right.onclick=function(){
for(var c=0;c<sum;c++){oSubLi[c].className='';};
clearTimeout(timeout);
clearInterval(interval);
if(a==(parseInt(sum)-1)){
for(var c=0;c<sum;c++){oSubLi[c].className='';};
a=0;
oSubLi[a].className="active";
interval = setInterval(setValLeft(a),time);
//timeout = setTimeout(autoGlide,delay);
}else{
a++;
oSubLi[a].className="active";
interval = setInterval(setValRight(a),time);
timeout = setTimeout(autoGlide,delay);
}
//if(auto){timeout = setTimeout(autoGlide,delay);};
};
left.onclick=function(){
for(var c=4;c>=0;c--){oSubLi[c].className='';};
clearTimeout(timeout);
clearInterval(interval);
if(a==0){
for(var c=4;c>=0;c--){oSubLi[c].className='';};
a=4;
oSubLi[a].className="active";
interval = setInterval(setValRight(a),time);
timeout = setTimeout(autoGlide,delay);
}else{
a--;
oSubLi[a].className="active";
interval = setInterval(setValLeft(a),time);
timeout = setTimeout(autoGlide,delay);
}
};
function autoGlide(){
for(var c=0;c<sum;c++){oSubLi[c].className='';};
clearTimeout(interval);
if(a==(parseInt(sum)-1)){
for(var c=0;c<sum;c++){oSubLi[c].className='';};
a=0;
oSubLi[a].className="active";
interval = setInterval(setValLeft(a),time);
timeout = setTimeout(autoGlide,delay);
}else{
a++;
oSubLi[a].className="active";
interval = setInterval(setValRight(a),time);
timeout = setTimeout(autoGlide,delay);
}
}
if(auto){timeout = setTimeout(autoGlide,delay);};
for(var i=0;i<sum;i++){
oSubLi[i].onmouseover = (function(i){
return function(){
for(var c=0;c<sum;c++){oSubLi[c].className='';};
clearTimeout(timeout);
clearInterval(interval);
oSubLi[i].className="active";
if(Math.abs(parseInt($id(oSlider).style[point]))>[(sSingleSize * i)]){
interval = setInterval(setValLeft(i),time);
this.onmouseout=function(){if(auto){timeout = setTimeout(autoGlide,delay);};};
}else if(Math.abs(parseInt($id(oSlider).style[point]))<[(sSingleSize * i)]){
interval = setInterval(setValRight(i),time);
this.onmouseout=function(){if(auto){timeout = setTimeout(autoGlide,delay);};};
}
}
})(i)
}
}
}
glide.layerGlide(true,'1h1','1h3','icon_num','show_pic',630,2,0.1,'left');
</script>
</body>
</html>

送TA礼物