首页 > 其他 > 详细

图片轮播

时间:2016-11-15 08:08:41      阅读:191      评论:0      收藏:0      [点我收藏+]

head里

技术分享
<style>
*{ margin:50px auto;}
#tuijian{ width:760px;
height:350px;
background-repeat:no-repeat;
background-position:center center;}
.pages{ top:200px;
background-color:black;
opacity:0.5;
width:30px;
height:60px;}
#p1{ float:left;
margin-left:10px;
margin-top:150px;}
#p2{ float:right;
margin-right:10px;
margin-top:150px;}

</style>
技术分享

body里

<div id="tuijian" style="background-image:url(1.jpg);">
<div class="pages" id="p1" onclick="dod(-1)"></div>
<div class="pages" id="p2" onclick="dod(1)"></div>
</div>

html外

技术分享
<script>
var jpg=new Array();
jpg[0]="url(1.jpg)";
jpg[1]="url(2.jpg)";
jpg[2]="url(3.jpg)";
var tjimg=document.getElementById("tuijian");
var xb=0;
var n=0;
function huan()
{
    xb++;
    if(xb==jpg.length)
    {
    xb=0;
    }    
    tjimg.style.backgroundImage=jpg[xb];
    if(n==0)
    {
    window.setTimeout("huan()",3000);    
    }
}
window.setTimeout("huan()",3000);
function dod(m)
{

    xb=xb+m;
    if(xb<0)
    {
    xb=jpg.length-1;    
    }
    else if(xb>=jpg.length)
    {
    xb=0;    
    }
    tjimg.style.backgroundImage=jpg[xb];
}



</script>
技术分享

图片轮播

原文:http://www.cnblogs.com/baimangguo/p/6064171.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!