谁能帮忙做一份DIV+CSS的和有JS特效的网页啊，急
4个回答
展开全部
网上找模板，很多模板，我这有个简单点的，给你贴出来吧，图片自己弄两个换上吧
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>图片轮换</title>
<script type="text/javascript" src="../js/plugins/move.js"></script>
<style type="text/css">
ul,li{margin:0;padding:0;list-style:none;}
a{outline:none;}
img{border:none;}
.picWrap{margin:0 auto;width:800px;overflow:hidden;}
.picPlay{height:600px;overflow:hidden;position:relative;border-bottom:1px solid #fff;}
.picPlay li{position:absolute;overflow:hidden;}
.smallPic{position:relative;width:800px;height:210px;overflow:hidden;}
.picList{padding:10px 0 10px 11px;background:#ddd;height:190px;position:absolute;left:0;}
.picList li{width:253px;padding:0 10px 0 0;float:left;filter:alpha(opacity:50);opacity:0.5;}
.picList li img{width:253px;height:190px;}
.prev,.next{width:84px;height:84px;position:absolute;top:45%;filter:alpha(opacity:0);opacity:0;z-index:10001;}
.markLeft,.markRight{width:50%;height:100%;position:absolute;top:0;z-index:10000;background:red;filter:alpha(opacity:0);opacity:0;}
.markRight{right:0;background:green;}
.prev{background:url(../images/pic/iconLeft.png) no-repeat;left:5px;}
.next{background:url(../images/pic/iconRight.png) no-repeat;right:5px;}
.picList li.currentPic{filter:alpha(opacity:100);opacity:1;}
</style>
<script type="text/javascript">
function getByClass(oParent,sName){
var aElement=oParent.getElementsByTagName("*");
var aResult=[];
for(var i=0;i<aElement.length;i++){
if(aElement[i].className==sName){
aResult.push(aElement[i]);
}
}
return aResult;
}
window.onload=function(){
var nIndex=1;
var now=0;
var oPicWrap=document.getElementById("picWrap");
var oPlay=document.getElementById("picPlay");
var oList=document.getElementById("picList");
var oPrev=getByClass(oPlay,"prev")[0];
var oNext=getByClass(oPlay,"next")[0];
var oMarkLeft=getByClass(oPlay,"markLeft")[0];
var oMarkRight=getByClass(oPlay,"markRight")[0];
var aLiPlay=oPlay.getElementsByTagName("li");
var aLiSmall=oList.getElementsByTagName("li");
oList.style.width=aLiSmall.length*aLiSmall[0].offsetWidth+"px";
/*左右按钮*/
oPrev.onmouseover=oMarkLeft.onmouseover=function(){
startMove(oPrev,'opacity',100);
}
oPrev.onmouseout=oMarkLeft.onmouseout=function(){
startMove(oPrev,'opacity',0);
}
oNext.onmouseover=oMarkRight.onmouseover=function(){
startMove(oNext,'opacity',100);
}
oNext.onmouseout=oMarkRight.onmouseout=function(){
startMove(oNext,'opacity',0);
}
oNext.onclick=function(){
now++;
if(now==aLiPlay.length){
now=0;
}
picTab();
}
oPrev.onclick=function(){
now--;
if(now==-1){
now=aLiPlay.length-1;
}
picTab();
}
/*点击下方列表*/
for(var i=0;i<aLiSmall.length;i++){
aLiSmall[i].index=i;
aLiSmall[i].onclick=function(){
if(this.index!=now){
now=this.index;
picTab();
}
}
aLiSmall[i].onmouseover=function(){
startMove(this,"opacity",100);
}
aLiSmall[i].onmouseout=function(){
if(this.index!=now){
startMove(this,"opacity",50);
}
}
}
/*自动播放*/
var timer=setInterval(oNext.onclick,2000);
oPicWrap.onmouseover=function(){
clearInterval(timer);
}
oPicWrap.onmouseout=function(){
timer=setInterval(oNext.onclick,2000);
}
function picTab(){
aLiPlay[now].style.zIndex=nIndex++;
aLiPlay[now].style.height=0;
startMove(aLiPlay[now],'height',604);
for(var j=0;j<aLiSmall.length;j++){
startMove(aLiSmall[j],"opacity",50);
}
startMove(aLiSmall[now],"opacity",100);
var nRuler=now;
if(now==0){
nRuler=1;
}else if(now==aLiSmall.length-1){
nRuler=aLiSmall.length-2;
}
startMove(oList,'left',parseFloat(-(nRuler-1)*aLiSmall[0].offsetWidth));
}
}
</script>
</head>
<body>
<div id="picWrap" class="picWrap">
<ul id="picPlay" class="picPlay">
<div class="prev"></div>
<div class="next"></div>
<div class="markLeft"></div>
<div class="markRight"></div>
<li style="z-index:1;"><img src="../images/pic/01.jpg" alt="" /></li>
<li><img src="../images/pic/02.jpg" alt="" /></li>
<li><img src="../images/pic/03.jpg" alt="" /></li>
<li><img src="../images/pic/04.jpg" alt="" /></li>
<li><img src="../images/pic/03.jpg" alt="" /></li>
<li><img src="../images/pic/04.jpg" alt="" /></li>
</ul>
<div class="smallPic">
<ul id="picList" class="picList">
<li class="currentPic"><img src="../images/pic/01.jpg" alt="" /></li>
<li><img src="../images/pic/02.jpg" alt="" /></li>
<li><img src="../images/pic/03.jpg" alt="" /></li>
<li><img src="../images/pic/04.jpg" alt="" /></li>
<li><img src="../images/pic/03.jpg" alt="" /></li>
<li><img src="../images/pic/04.jpg" alt="" /></li>
</ul>
</div>
</div>
</body>
</html>
move.js代码如下：
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}
function startMove(obj,attr,iTarget){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var cur=0;
var speed=0;
if(attr=="opacity"){
cur=Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
cur=parseInt(getStyle(obj,attr));
}
if(cur==iTarget){
clearInterval(obj.timer);
}else{
speed=(iTarget-cur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(attr=="opacity"){
obj.style.filter="alpha(opacity:"+(cur+speed)+")";
obj.style.opacity=(cur+speed)/100;
}else{
obj.style[attr]=cur+speed+"px";
}
}
},30);
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
很简单事，5分钟给你搞定
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
怎么联系你呢，留个QQ
追问
5199136228
追答
加不上，你加我吧 82471537 备注消息网站
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
