首页 > 代码库 > 图片轮换和长图片的左右移动
图片轮换和长图片的左右移动
图片轮换
<script>
#tuijian
{ width:428px;
height:250px;
position:absolute;
background-repeat:no-repeat;
}
.pages
{ top:110px;
background-color:#333
background-position:center;
background-repeat:no-repeat;
opacity:0.8;
width:30px;
height:45px;
}
#p1
{ background-image:url（图片路径）.png;
float:left;
margin:110px 0px 0px 10px;
}
#p2
{ background-image:url(%E3%80%8A%E8%AF%9B%E4%BB%993%E3%80%8B%E5%86%B3%E6%88%98%E9%9D%92%E4%BA%91-2016%E5%B9%B4%E8%B7%A8%E6%9C%8DPK%E4%BA%89%E9%9C%B8%E8%B5%9B%E7%81%AB%E7%88%86%E5%BC%80%E5%90%AF_files/www.png);
float:right;
margin:110px 10px 0px 0px;
}
</script>
<body>
<div id="tuijian" style="background-image:url(%E3%80%8A%E8%AF%9B%E4%BB%993%E3%80%8B%E5%86%B3%E6%88%98%E9%9D%92%E4%BA%91-2016%E5%B9%B4%E8%B7%A8%E6%9C%8DPK%E4%BA%89%E9%9C%B8%E8%B5%9B%E7%81%AB%E7%88%86%E5%BC%80%E5%90%AF_files/41463135466882.png)" >
<div class="pages" id="p1" onclick="dodo(-1)"></div>
<div class="pages" id="p2" onclick="dodo(1)"></div>
</div>
</body>
<script>
var jpg=new Array();
jpg[0]="url(%E3%80%8A%E8%AF%9B%E4%BB%993%E3%80%8B%E5%86%B3%E6%88%98%E9%9D%92%E4%BA%91-2016%E5%B9%B4%E8%B7%A8%E6%9C%8DPK%E4%BA%89%E9%9C%B8%E8%B5%9B%E7%81%AB%E7%88%86%E5%BC%80%E5%90%AF_files/1.png)"
jpg[1]="url(%E3%80%8A%E8%AF%9B%E4%BB%993%E3%80%8B%E5%86%B3%E6%88%98%E9%9D%92%E4%BA%91-2016%E5%B9%B4%E8%B7%A8%E6%9C%8DPK%E4%BA%89%E9%9C%B8%E8%B5%9B%E7%81%AB%E7%88%86%E5%BC%80%E5%90%AF_files/41463135466332.png)"
jpg[2]="url(%E3%80%8A%E8%AF%9B%E4%BB%993%E3%80%8B%E5%86%B3%E6%88%98%E9%9D%92%E4%BA%91-2016%E5%B9%B4%E8%B7%A8%E6%9C%8DPK%E4%BA%89%E9%9C%B8%E8%B5%9B%E7%81%AB%E7%88%86%E5%BC%80%E5%90%AF_files/41463135467289.png)"
var xb=0;
var n=0;
var tjimg= document.getElementById("tuijian");
function huan()
{ xb++;
if(xb == jpg.length)
{
xb=0;
}
tjimg.style.backgroundImage=jpg[xb];
if(n==0)
{
var id = window.setTimeout("huan()",3000);
}
}
function dodo(m)
{ n=1;
xb=xb+m;
if(xb<0)
{
xb=jpg.length-1;
}
else if(xb>=jpg.length)
{
xb=0;
}
tjimg.style.backgroundImage=jpg[xb];
}
window.setTimeout("huan()",3000);
</script>
效果图：
长图片在一个div里面左右移动
<style>
#y1
{ background-image:url(left.png);
float:left;
margin-left:10px;
margin-top:60px;
}
#y2
{ background-image:url(right.png);
float:right;
margin-left:960px;
margin-top:60px;
}
</style>
<body>
<p class="fan" id="y1" onclick="zuoyi()"></p>
<p class="fan" id="y2" onclick="youyi()"></p>
<div id="banner"><img src="http://www.mamicode.com/chang.jpg" style=" transition:1s;margin-left:0px;" id="s" /></div>
</body>
<script>
var nb=2;
function zuoyi()
{
var arr=new Array()
arr[0]="-466px"
arr[1]="-233px"
arr[2]="0px"
var left=document.getElementById("s")
nb--
if(nb>=0)
{
left.style.marginLeft=arr[nb]
}
else
{
nb=2
left.style.marginLeft=arr[nb]
}
}
function youyi()
{
var arr=new Array()
arr[0]="-466px"
arr[1]="-233px"
arr[2]="0px"
var right=document.getElementById("s")
nb++
if(nb<=2)
{
right.style.marginLeft=arr[nb]
}
else
{
nb=0
right.style.marginLeft=arr[nb]
}
}
</script>
效果图：
图片轮换和长图片的左右移动