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

图片轮播

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

标签:top   pre   轮播   .com   ima   div   back   element   pyc   

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>
技术分享

图片轮播

标签:top   pre   轮播   .com   ima   div   back   element   pyc   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!