zoukankan html css js c++ java
大图轮播以及手风琴轮播特效的练习

1、轮播效果
每3秒换图，并且当鼠标悬停时停止，在点击箭头或者下方小图时换对应的图，并使小图的边框线变为红色
2、手风琴特效
此处使用ul无序列表，用js获取并操作每个li中div的宽度从而实现
<!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>无标题文档</title>
<style>
*
{
    margin:0px;
    padding:0px;}
body
{
    min-width:900px;}
#datu
{
    width:800px;
    height:500px;
    position:relative;
    margin:30px auto;
    overflow:hidden;}
.datu
{
    width:1200px;
    height:500px;
    position:relative;
    margin:30px auto;
    overflow:hidden;}
#ta
{
    margin-left:0px;
    transition:0.7s;}
.lr
{
    position:absolute;
    top:230px;
    width:32px;
    height:32px;
    z-index:99;}
#left
{
    left:10px;
    }
#right
{
    right:10px;
}
.suolue
{
    height:60px;
    width:450px;
    position:relative;
    margin:auto;
    line-height:60px;}
.suolue1
{
    height:50px;
    width:80px;
    float:left;
    border: 4px solid #666;
    background-size:contain;
    background-position:center;}
.u1
{
    list-style-type:none;}
.u1 li
{
    float:left;
    margin-left:2px;}
.u2
{
    list-style-type:none;}
.u2 li
{
    float:left;}
.fengqin
{
    height:500px;
    width:100px;
    background-repeat:no-repeat;
    background-position:center;
    transition:0.7s;}
</style>
</head>

<body>
<div id="datu" onmouseover="pause()" onmouseout="conti()">
    <table id="ta" cellpadding="0" cellspacing="0">
        <tr height="500">
            <td width="800"><img src="Images/1.jpg" /></td>
            <td width="800"><img src="Images/2.jpg" /></td>
            <td width="800"><img src="Images/3.jpg" /></td>
            <td width="800"><img src="Images/4.jpg" /></td>
            <td width="800"><img src="Images/5.jpg" /></td>
        </tr>
    </table>
    <div class="lr" id="left" onclick="dong(-1)">
        <img src="Images/left.png" />
    </div>
    <div class="lr" id="right" onclick="dong(1)">
        <img src="Images/right.png" />
    </div>
</div>
<div class="suolue">
    <ul class="u1">
        <li><div class="suolue1" style="background-image:url(Images/1.jpg); border-color:red" id="tu1" onclick="xiaotu(1)"></div></li>
        <li><div class="suolue1" style="background-image:url(Images/2.jpg)" id="tu2" onclick="xiaotu(2)"></div></li>
        <li><div class="suolue1" style="background-image:url(Images/3.jpg)" id="tu3" onclick="xiaotu(3)"></div></li>
        <li><div class="suolue1" style="background-image:url(Images/4.jpg)" id="tu4" onclick="xiaotu(4)"></div></li>
        <li><div class="suolue1" style="background-image:url(Images/5.jpg)" id="tu5" onclick="xiaotu(5)"></div></li>
    </ul>
</div>
<div class="datu" onmouseover="stp()" onmouseout="goon()">
    <ul class="u2">
        <li><div class="fengqin" id="l1" onmouseover="fq(1)" style="800px; background-image:url(Images/1.jpg)"></div></li>
        <li><div class="fengqin" id="l2" onmouseover="fq(2)" style="background-image:url(Images/2.jpg)"></div></li>
        <li><div class="fengqin" id="l3" onmouseover="fq(3)" style="background-image:url(Images/3.jpg)"></div></li>
        <li><div class="fengqin" id="l4" onmouseover="fq(4)" style="background-image:url(Images/4.jpg)"></div></li>
        <li><div class="fengqin" id="l5" onmouseover="fq(5)" style="background-image:url(Images/5.jpg)"></div></li>
    </ul>
</div>
</body>
</html>
<script>
document.getElementById("ta").style.marginLeft="0px";
var biao=1;
function huan()
{
    var tu =document.getElementById("ta");
    var a=parseInt(tu.style.marginLeft);    
    if(a<=-3200)
    {
        tu.style.marginLeft="0px";
    }
    else
    {
        tu.style.marginLeft= (a-800)+"px";    
    }
    document.getElementById("tu1").style.borderColor="#666";
    document.getElementById("tu2").style.borderColor="#666";
    document.getElementById("tu3").style.borderColor="#666";
    document.getElementById("tu4").style.borderColor="#666";
    document.getElementById("tu5").style.borderColor="#666";
    var b = parseInt(document.getElementById("ta").style.marginLeft);
    if(b==0)
    {
        document.getElementById("tu1").style.borderColor="red";
    }
    else if(b==-800)
    {
        document.getElementById("tu2").style.borderColor="red";
    }
    else if(b==-1600)
    {
        document.getElementById("tu3").style.borderColor="red";
    }
    else if(b==-2400)
    {
        document.getElementById("tu4").style.borderColor="red";
    }
    else
    {
        document.getElementById("tu5").style.borderColor="red";
    }
    shi =window.setTimeout("huan()",3000);    
}
var shi =window.setTimeout("huan()",3000);

function pause()
{
    window.clearTimeout(shi);    
}

function conti()
{
    shi = window.setTimeout("huan()",3000);    
}

function dong(ad)
{
    var tu =document.getElementById("ta");
    var a=parseInt(tu.style.marginLeft);
    if(ad==-1)
    {
        if(a==0)
        {
            tu.style.marginLeft=-3200+"px";    
        }
        else
        {
            tu.style.marginLeft= (a+800)+"px";    
        }    
    }
    else
    {
        if(a==-3200)
        {
            tu.style.marginLeft=0+"px";    
        }
        else
        {
            tu.style.marginLeft= (a-800)+"px";    
        }        
    }
    document.getElementById("tu1").style.borderColor="#666";
    document.getElementById("tu2").style.borderColor="#666";
    document.getElementById("tu3").style.borderColor="#666";
    document.getElementById("tu4").style.borderColor="#666";
    document.getElementById("tu5").style.borderColor="#666";
    var b = parseInt(document.getElementById("ta").style.marginLeft);
    if(b==0)
    {
        document.getElementById("tu1").style.borderColor="red";
    }
    else if(b==-800)
    {
        document.getElementById("tu2").style.borderColor="red";
    }
    else if(b==-1600)
    {
        document.getElementById("tu3").style.borderColor="red";
    }
    else if(b==-2400)
    {
        document.getElementById("tu4").style.borderColor="red";
    }
    else
    {
        document.getElementById("tu5").style.borderColor="red";
    }
}
function xiaotu(x)
{
    document.getElementById("tu1").style.borderColor="#666";
    document.getElementById("tu2").style.borderColor="#666";
    document.getElementById("tu3").style.borderColor="#666";
    document.getElementById("tu4").style.borderColor="#666";
    document.getElementById("tu5").style.borderColor="#666";
    if(x==1)
    {
        document.getElementById("ta").style.marginLeft="0px";
        document.getElementById("tu1").style.borderColor="red";
    }
    else if(x==2)
    {
        document.getElementById("ta").style.marginLeft="-800px";
        document.getElementById("tu2").style.borderColor="red";
    }
    else if(x==3)
    {
        document.getElementById("ta").style.marginLeft="-1600px";
        document.getElementById("tu3").style.borderColor="red";
    }
    else if(x==4)
    {
        document.getElementById("ta").style.marginLeft="-2400px";
        document.getElementById("tu4").style.borderColor="red";
    }
    else
    {
        document.getElementById("ta").style.marginLeft="-3200px";
        document.getElementById("tu5").style.borderColor="red";
    }
}
function fengqin()
{
    var li1 =parseInt(document.getElementById("l1").style.width);
    var li2 =parseInt(document.getElementById("l2").style.width);
    var li3 =parseInt(document.getElementById("l3").style.width);
    var li4 =parseInt(document.getElementById("l4").style.width);
    var li5 =parseInt(document.getElementById("l5").style.width);    
    document.getElementById("l1").style.width="100px";
    document.getElementById("l2").style.width="100px";
    document.getElementById("l3").style.width="100px";
    document.getElementById("l4").style.width="100px";
    document.getElementById("l5").style.width="100px";
    if(li1==800)
    {
        document.getElementById("l2").style.width="800px";
    }
    else if(li2==800)
    {
        document.getElementById("l3").style.width="800px";
    }
    else if(li3==800)
    {
        document.getElementById("l4").style.width="800px";
    }
    else if(li4==800)
    {
        document.getElementById("l5").style.width="800px";
    }
    else
    {
        document.getElementById("l1").style.width="800px";
    }
    change=window.setTimeout("fengqin()",3000);
}
function fq(c)
{
        document.getElementById("l1").style.width="100px";
        document.getElementById("l2").style.width="100px";
        document.getElementById("l3").style.width="100px";
        document.getElementById("l4").style.width="100px";
        document.getElementById("l5").style.width="100px";
    if(c==1)
    {
        document.getElementById("l1").style.width="800px";
    }
    else if(c==2)
    {
        document.getElementById("l2").style.width="800px";
    }
    else if(c==3)
    {
        document.getElementById("l3").style.width="800px";
    }
    else if(c==4)
    {
        document.getElementById("l4").style.width="800px";
    }
    else if(c==5)
    {
        document.getElementById("l5").style.width="800px";
    }
}
var change=window.setTimeout("fengqin()",3000);
function stp()
{
    window.clearTimeout(change);    
}
function goon()
{
    change=window.setTimeout("fengqin()",3000);
}

</script>
查看全文
相关阅读:
Notepad++ 6.2.3 发布，开源文本编辑器
 Scrum项目如何获得管理层的支持和合作
 Concurrency Kit 0.2.13 发布，并发工具包
 Orubase：为Windows Phone、Android和iOS平台开发混合本地手机应用程序
 CyaSSL 2.4.6 发布，SSL 加密库
 谷歌移动应用强调设计元素：向极简风格转型
 Bitcoin 0.7.2 发布，匿名数字货币
 Netty 3.5.11 发布
 LDAP Account Manager 4.0 发布
 Apache Commons Math 3.1 发布
原文地址：https://www.cnblogs.com/wt627939556/p/6028066.html