码迷，mamicode.com
首页 > 其他好文 > 详细

轮播特效

时间：2016-11-11 17:22:20      阅读：187      评论：0      收藏：0      [点我收藏+]

标签：文件   mouse   span   round   poi   src   pad   document   padding   

实现效果：下面的图标随轮播图片一起滚动，点击下面图标可以换图。

head里，样式表：

<style type="text/css">
*{ margin:0px; padding:0px;}
#tu{ width:800px; height:500px; position:relative; overflow:hidden; margin:30px auto;}
#ta{ width:4000px; height:500px; margin-left:0px;}
.lie{width:800px; height:500px; background-size:contain;}
#tu2{ width:612px; height:79px; position:relative; margin:20px auto;}
#lie1{width:90px; height:80px; position:relative; float:left; cursor:pointer; background-image:url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_01.png); background-repeat:no-repeat;}
#lie2{width:90px; height:80px; position:relative; float:left;  cursor:pointer; background-image:url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_02.png); background-repeat:no-repeat;}
#lie3{width:90px; height:80px; position:relative; float:left;  cursor:pointer; background-image:url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_03.png); background-repeat:no-repeat;}
#lie4{width:90px; height:80px; position:relative; float:left;  cursor:pointer; background-image:url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_04.png); background-repeat:no-repeat;}
#lie5{width:90px; height:80px; position:relative; float:left;  cursor:pointer; background-image:url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_05.png); background-repeat:no-repeat;}

</style>

body里：

<div id="tu" onmouseover="pause()" onmouseout="contin()">
     <table id="ta" cellpadding="0" cellspacing="0">
        <tr height="500px">
        <td class="lie"><img src="新建文件夹/Images/tr_img_1.jpg" width="800px" /></td>
        <td class="lie"><img src="新建文件夹/Images/tr_img_2.jpg" width="800" /></td>
        <td class="lie"><img src="新建文件夹/Images/tr_img_3.jpg" width="800px"/></td>
        <td class="lie"><img src="新建文件夹/Images/tr_img_4.jpg" width="800" /></td>
        <td class="lie"><img src="新建文件夹/Images/tr_img_5.jpg" width="800" /></td>
        </tr>
     </table>
     
</div>
<div id="tu2">        
     <div id="lie1" onclick="dianji(1)"></div>
     <div id="lie2" onclick="dianji(2)"></div>
     <div id="lie3" onclick="dianji(3)"></div>
     <div id="lie4" onclick="dianji(4)"></div>
     <div id="lie5" onclick="dianji(5)"></div>
</div>

js里：

<script language="javascript">

document.getElementById("ta").style.marginLeft="0px";
function huan()
{
    var tp=document.getElementById("ta");
    var a=parseInt(tp.style.marginLeft);
    if(a<=-3200)
    {
        tp.style.marginLeft="0px";
        dj[0].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_01_y.png)";
        dj[2].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_03.png)";
        dj[3].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_04.png)";
        dj[4].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_05.png)";
        dj[1].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_02.png)";
    }
    else
    {
        tp.style.marginLeft=(a-800)+"px";
        if(a==-800)
        {dj[0].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_01.png)";
        dj[2].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_03_y.png)";
        dj[3].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_04.png)";
        dj[4].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_05.png)";
        dj[1].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_02.png)";}
        if(a==-1600)
        {dj[0].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_01.png)";
        dj[2].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_03.png)";
        dj[3].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_04_y.png)";
        dj[4].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_05.png)";
        dj[1].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_02.png)";}
        if(a==-2400)
        {dj[0].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_01.png)";
        dj[2].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_03.png)";
        dj[3].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_04.png)";
        dj[4].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_05_y.png)";
        dj[1].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_02.png)";}
        if(a==0)
        {dj[0].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_01.png)";
        dj[2].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_03.png)";
        dj[3].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_04.png)";
        dj[4].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_05.png)";
        dj[1].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_02_y.png)";}
    
    }
    id=window.setTimeout("huan()",3000);
}
var id=window.setTimeout("huan()",3000);

function pause()
{
    window.clearTimeout(id);
}
function contin()
{
    id = window.setTimeout("huan()",3000);    
}

var tp=document.getElementById("ta");
var dj=new Array;
dj[0]=document.getElementById("lie1");
dj[1]=document.getElementById("lie2");
dj[2]=document.getElementById("lie3");
dj[3]=document.getElementById("lie4");
dj[4]=document.getElementById("lie5");
dj[0].style.borderColor="red";
function dianji(i)
{
    if(i==1)
    {
        dj[0].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_01_y.png)";
        dj[2].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_03.png)";
        dj[3].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_04.png)";
        dj[4].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_05.png)";
        dj[1].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_02.png)";
        tp.style.marginLeft="0px";
    }
    else if(i==2)
    {
        dj[0].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_01.png)";
        dj[2].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_03.png)";
        dj[3].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_04.png)";
        dj[4].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_05.png)";
        dj[1].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_02_y.png)";
        tp.style.marginLeft="-800px";
    }
    else if(i==3)
    {
        dj[0].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_01.png)";
        dj[2].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_03_y.png)";
        dj[3].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_04.png)";
        dj[4].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_05.png)";
        dj[1].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_02.png)";
        tp.style.marginLeft="-1600px";
    }
    else if(i==4)
    {
        dj[0].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_01.png)";
        dj[2].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_03.png)";
        dj[3].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_04_y.png)";
        dj[4].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_05.png)";
        dj[1].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_02.png)";
        tp.style.marginLeft="-2400px";
    }
    else if(i==5)
    {
        dj[0].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_01.png)";
        dj[2].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_03.png)";
        dj[3].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_04.png)";
        dj[4].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_05_y.png)";
        dj[1].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_02.png)";
        tp.style.marginLeft="-3200px";
    }
}




</script>

 

轮播特效

标签：文件   mouse   span   round   poi   src   pad   document   padding   

原文地址：http://www.cnblogs.com/wy1992/p/6054874.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！