图片轮播（可实现手动与自动的切换）

最新推荐文章于 2023-07-31 21:05:55 发布

a771454823

最新推荐文章于 2023-07-31 21:05:55 发布

阅读量977

点赞数 1

文章标签： javascript c/c++ ViewUI

原文链接：http://www.cnblogs.com/wenwen123/p/5465633.html

版权

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*
<!--图片轮播css样式表代码-->
{
    margin:0px auto;
    padding:0px;
}

#tuijian
{
    background-image:url(dasd/1.png);
    background-size:cover; 
    top:290px; height:325px; width:610px; left:27.5%;
     position:absolute;
}
.pages
{    
    background-position:center;    
    opacity:0.4;
    width:78px;
    height:110px;
}
#p1
{
    background-image:url(images/jiantou1.png);
    float:left;
    margin:130px 10px 0px 10px;
}
#p2
{
    background-image:url(images/jiantou2.png);
    float:right;
    margin:130px 10px 0px 0px;
}
</style>
</head>

<body>
<!--图片轮播网页显示部分代码-->
<div id="tuijian" >
<div class="pages" id="p1" onClick="dodo(-1)"></div>
<div class="pages" id="p2" onClick="dodo(1)"></div>
</div>



</body>

<!--图片手动与自动的切换-->
<script language="javascript">
var jpg =new Array();
jpg[0]= "url(dasd/1.png)" ;
jpg[1]=    "url(dasd/2.png)" ;   
jpg[2]=    "url(dasd/3.png)" ; 
jpg[3]=    "url(dasd/4.png)" ;
jpg[4]=    "url(dasd/5.png)" ;
var a=document.getElementById("tuijian");
var xb=0;var n=0;                

function huan()
{xb++;
if(xb>=jpg.length)
  {
      xb=0;
      }
    a.style.backgroundImage=jpg[xb];
    if(n==0)
    {
        var id=window.setInterval("huan()",3000);
        }
    }
function dodo(m)
{
    n=1;
    xb=xb+m;

    
if(xb<0)
{
    xb=jpg.length-1;
}

else if(xb>=jpg.length)
{
    xb=0;
}
a.style.backgroundImage=jpg[xb];
}

window.setTimeout("huan()",3000);
</script>

转载于:https://www.cnblogs.com/wenwen123/p/5465633.html

a771454823

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
图片轮播（可实现手动与自动的切换）

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>*{ margin:0px auto;...
复制链接

扫一扫