图片轮播

Posted 她的睫毛

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图片轮播相关的知识,希望对你有一定的参考价值。

向左轮播可以,再向右的话就需要重新定义距离了,不知道除了marginleft还有没有其他表示距离的代码 ,再试试!

 

<style>
* {
margin: 0px;
padding: 0px;
}

.kuang{
margin: 150px;
width: 620px;
height: 380px;
/*border: 5px solid black;*/
position: relative;
}

.p{
width: 620px;
height: 380px;
background-color: red;
float: left;
color: white;
font-size: 100px;
text-align: center;
line-height: 380px;
}

.da{
width: 2480px;
height: 380px;
}

.left,.right {
width: 20px;
height: 380px;
font-size: 30px;
line-height: 380px;
text-align: center;
background-color: black;
color: white;
opacity: 0.5;
position: absolute;
top: 0px;
}

.left{
left: 0px;
}

.right{
right: 0px;
}

.left:hover,.right:hover {
cursor: pointer;
opacity: 0.3;
}

</style>
</head>
<body>
<div class="kuang">
<div class="left"><</div>
<div class="right">></div>
<div class="da">
<div class="p" style="background-color: blueviolet;"></div>
<div class="p" style="background-color: darkturquoise;"></div>
<div class="p" style="background-color: yellow;"></div>
<div class="p" style="background-color: green;"></div>
</div>
</div>
</body>
</html>
<script>
left=document.getElementsByClassName("left")[0];
right=document.getElementsByClassName("right")[0];
da=document.getElementsByClassName("da")[0];

arr=[];
s=1;

left.onclick=function(){
arr.push(window.setInterval("moveleft()",5));
}
function moveleft(){

if(da.offsetLeft==-620*s){
clearall();
s++;
}else{
da.style.marginLeft=da.offsetLeft-20+"px";
}
}
function clearall(){
for(i in arr){
window.clearInterval(arr[i])
}
}


arr2=[];
a=1;

right.onclick=function(){
arr2.push(window.setInterval("moveright()",5));
}
function moveright(){

if(da.offsetLeft==620*a){
clearal();
a++;
}else{
da.style.marginLeft=da.offsetLeft+20+"px";
}
}
function clearaal(){
for(x in arr2){
window.clearInterval(arr2[x])
}
}

</script>

代码不是很完美,日后好了之后再发一遍把

以上是关于图片轮播的主要内容,如果未能解决你的问题,请参考以下文章

轮播图片 高效图片轮播,两个imageView实现

js图片轮播点击

jquery图片轮播思路

bootstrap图片轮播插件carousel

为啥我的轮播图片不是一张一张的在图框轮播,而是四张图片排成一列?有图

实现图片轮播功能