js图片轮播
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js图片轮播相关的知识，希望对你有一定的参考价值。
<style>
li{list-style-type:none ;
display:inline;
width:90px;
height:160px;
float:left;
}
.pic-all{ width:100px;
height:180px;
position:relative;
overflow:hidden;
margin-left:200px;
}
ul{ position:absolute;
left:0;
top:0;
width:310px;
}
</style>
<script>
var imgindex=0;
var imgindex1=0;
/*$(document).ready(function(){
$("#pic").click(function(){
changeimg();
});
});*/
setInterval("changeimg()", 1000);
setInterval("changeimg1()", 2000);
function changeimg()
{
imgindex++;
if(imgindex==0)
{
$("ul").stop().animate({left:"0px"});
}
if(imgindex==1)
{
$("ul").stop().animate({left:"-150px"});
}
if(imgindex==2)
{
$("ul").stop().animate({left:"-300px"});
}
if(imgindex==2)
{
imgindex=-1;
}
}
function changeimg1()
{
imgindex1++;
if(imgindex1==0)
{
$("#imga").attr("src", "images/$F2[P67(QAUOCZ810C)YHRX.png");
}
if(imgindex1==1)
{
$("#imga").attr("src", "images/T1_8YvBKJT1RXrhCrK.jpg");
}
if(imgindex1==2)
{
$("#imga").attr("src", "images/T1a3DvB7hv1RXrhCrK!150x150.jpg");
}
if(imgindex1==2)
{
imgindex1=-1;
}
}
</script>
<body>
<div class="pic-all">
<ul>
<li ><img src="images/$F2[P67(QAUOCZ810C)YHRX.png"/></li>
<li ><img src="images/T1_8YvBKJT1RXrhCrK.jpg"/></li>
<li ><img src="images/T1a3DvB7hv1RXrhCrK!150x150.jpg"/></li>
</ul>
</div>
<br />
<!--<button id="pic" style="width:100px; height:100px;">按钮</button>-->
<img id="imga" src="images/$F2[P67(QAUOCZ810C)YHRX.png" />
</body>
以上是关于js图片轮播的主要内容，如果未能解决你的问题，请参考以下文章