首页 > 代码库 > html图片滚动效果

html图片滚动效果

分享一个手动控制图片左右滚动的代码

先说html部分,建立一个层,写出他的样式,层中在建立一个小一点的层用来存放需要滚动的图片,小层两边再建两个小层用来存放控制图片左右滚动的按钮。代码如下:

样式表:

<style>

.a

{ width:1100px; height:215px; position:absolute; top:280px; left:9%;  overflow:hidden; border-radius:10px}

.a1

{ width:2640px; height:165px; position:absolute; top:25px;background:#666; transition:1s }

.i1

{ width:35px; height:60px; position:absolute; top:77.5px; left:25px;}

.i2

{ width:35px; height:60px; position:absolute; top:77.5px; right:25px;}

</style>

 

 

Body部分;

<body>

<div class="a">

   <div id="yidong" class="a1" style="background:url(../web/picture/ts/35.jpg); left:0px;"></div>

   <div class="i1"><img src="http://www.mamicode.com/web/picture/ts/37.png" width="35" style="opacity:0.3" onclick="zuoyi()"/></div>

   <div class="i2"><img src="http://www.mamicode.com/web/picture/ts/36.png" width="35" style="opacity:0.3" onclick="youyi()"/></div>

</div>

</body>

 

最后我们写他的javascri部分:

<script>

var nb=7

function zuoyi()

{

   var arr=new Array()

   arr[0]="-1540px"

   arr[1]="-1320px"

   arr[2]="-1100px"

   arr[3]="-880px"

   arr[4]="-660px"

   arr[5]="-440px"

   arr[6]="-220px"

   arr[7]="0px"

   var left=document.getElementById("yidong")

   nb--

   if(nb>=0)

   {

   left.style.left=arr[nb]

   }

   else

   {

  nb=7

  left.style.left=arr[nb]  

   }

}

function youyi()

{

   var arr=new Array()

   arr[0]="-1540px"

   arr[1]="-1320px"

   arr[2]="-1100px"

   arr[3]="-880px"

   arr[4]="-660px"

   arr[5]="-440px"

   arr[6]="-220px"

   arr[7]="0px"

   var right=document.getElementById("yidong")

   nb++

   if(nb<=7)

   {

   right.style.left=arr[nb]

   }

   else

   {

  nb=0

  right.style.left=arr[nb]  

   }

}

</script>

好啦,完活,小伙伴们可以去尝试一下了。

 

html图片滚动效果