Javascript实现旋转图片的效果(1)让图片跳动

照片旋转的效果在各大网站首页都能看到，相当常见。跟大家分享一下这个效果的简单实现。

1.画面跳动。

2.图像序列控制的实现。

3.前后按钮控制的实现。

在这篇文章中，图片是间隔切换的。

先把结构代码说完，我就不详细解释了。让我们先给你看效果图：

代码：如下。

！DOCTYPE html htmlheartheta charset=' UTF-8 ' title/title style * { box-sizing : border-box；} a { text-decoration : none；}ul、ol、Li { list-style : none；margin : 0；padd : 0；} #滑块{ width: 800pxheight: 300px飞越：隐藏；相对位置：margin: 0 auto} #滑块ul { width: 2400px相对位置：} #滑块ul :在{ content : }之后；宽度： 0；高度： 0；display:块；} #滑块ul li {左侧浮动：宽度： 800 px；height: 300px飞越：隐藏；} #滑块ul Li img { width : 100%；} #滑块ol { position: absolutebottom: 10px左： 46%；} #滑块ol Li { display : inline-block；} #阿利滑块{display:内嵌块；padding:4px 8pxborder-radius :15 px；背景色： # 000；color: # fff} #滑块。上一页，#滑块。next { display : inline-block；绝对位置：top : 49%；背景色： # 000；opacity: 0.6color: # fffpadding: 3px} #滑块。prev { left: 10px} #滑块。next { right: 10px}/style/head dydiv id=' Slider ' ulli img src=' http :3358 www . Bates-hew TT.com/images/Slider/Slider-1 . jpg '/Lili img src=' http :http://www . Bates-hew TT.com/images/Slider/Slider-2 . jpg '/Lili img src=' http :3358 www . Bates-hew TT.com/images/Slider/Slider-3。

首先，我们需要找到图片的位置。在这里，我们是通过ul布局的，所以首先要找到UL手下的LI数量。

然后让图片一张一张地显示出来。我们使用窗口模式，也就是蒙版图层模式。#slider是窗口，ul是窗外的风景，ul的风景是水平排版的。

然后让外面的风景显示成窗户的大小，也就是让每一张图片每次都是窗户的风景。这里是控制图片的大小与窗口的大小相同。

以上解释是一个概念，即布局处理。现在我们用JS控制它，需要使用JS的setInterval或者setTimeout。这里我们使用setInterval(因为它使用起来很方便。).

每次跳跃的时候，我们都会控制ul位置的左边，这样每次UL下的风景就可以有不同的展现，这个左边是根据窗户的宽度来决定的。左边第一个当然是-800 * 0，第二个是-800*1，第三个是-800*2，以此类推。然后我们可以得到下面的代码。

script(function(){ var slider=document . getelementbyid(' slider ')；var imgul=slider . getelementsbytagname(' ul ')[0]；var imglis=imgul . getelementsbytagname(' Li ')；var len=imglis.lengthvar索引=0；setInterval(function(){ if(index=len){ index=0；} imgul . style . left=-(800 * index)' px '；指数；},2000);})();/scriptJS代码看起来很简单。我在这里设置了2秒的跳转顺序，然后让它在跳转次数大于等于图片数后返回到第一张图片。

以上内容都是边肖给大家介绍的关于Javascript在实现图片旋转(1)让图片跳转的效果的内容，希望对大家有所帮助。