简单的JS轮播

青旅半醒 2022-02-03 04:41 186阅读 0赞

1：做好事前准备：先创建几个文件夹来放一下文件，比如”css，images，js”之类的，在images文件夹里面放几张图片，然后再打开DW，在DW中创建一个css放到css文件夹里面，然后再引用就OK了，同样的创建一个js放到js文件夹里面，然后引用；  
2：把该准备的都准备好了以后，先在css样式里面的“body”里面设置一张全屏的背景图片，再去源代码里面写HTML的代码，放一个总的div盒子，去css里面设置它的样式：宽400px，高550px，然后用相对定位调整一下位置，让它保持居中的效果；再放一个ul标签，同样的给它一个类，以便设置css样式，还要给它一个ID，方便等下在js中获取到这个ul，先给这个ul设置宽度为2400px，然后设置一个绝对定位，等下也会用到，再到刚刚的div盒子里面设置一个超出部分隐藏；接下来就是在ul里面放一些li标签，li标签里面再放一张图片，因为我们是要让4张图片轮播，所以就需要放6张图片，因为等下js的时候还需要两张图片来过渡空白的地方，然后把ul里面的li里面的img图片的宽高都设为400px ，500px并且设置一个左浮动，然后还要隐藏ul里面的li的样式，不然排序就有点毛病了；再放一个ul，在ul里面放几个li，li里面放一些文字，然后再设置一些这些文字的大小，粗细，颜色就OK了，这个ul主要作用就是起到一个装饰的样式，整体完成以后，就能看到以下的效果了：  
浏览器css总效果截图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70]  
Css样式代码截图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70 1]  
3：设置完css以后就要去js里面写js的代码了，现在需要先完成的一个效果就是让它隔段时间就自动播放；先在js中写一个页面加载事件，然后先不管这个事件，再去写一个方法，方法里面传递一个参数，这个参数就是每次移动的距离；在方法里面先获取到装图片的ul，通过ID，然后再定义一个变量名称：“jsjl”来接收传递过来的参数除40，再定义一个名称：“newleft”来接收ul的left加上传递过来的参数，这时候还需要判断它是否在运行的，因为不判断的话等下就会出现一个bug，在方法里面再写一个方法，当“jgjl”小于0并且ul的left大于“newleft”或者反过来时，ul的left就等于ul的left加上“jgjl”，再通过一个“setTimeout”每0.01秒就触发这个方法，也就是让它有一个轮播的效果，而不是一闪而过；否则的话就直接把ul的left赋值等于“newleft”，再判断，当图片的left超过第4张的宽度时就跳回到第1张，同样第一张也是这样，当图片的left小于第一张时，就跳到第4张，最后再调用这个小方法；  
方法代码截图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70 2]  
4：方法写好以后就去页面加载事件里面去调用它，但是因为我们还需要一个效果，就是把鼠标放到图片上时就停止播放，移开时就再次播放的效果，所以就需要自动播放写成一个方法，然后再调用，先用刚开始就定义的名称“sj”赋值等于隔两秒自动播放的代码，然后再写一个停止自动播放的方法，很简单，就是“clearInterval”刚刚那个“sj”；通过ID获取到装图片的div盒子，给它一个鼠标进入事件和鼠标移出事件，当鼠标进入时就停止播放，鼠标移出时就再次播放，最后再去HTML页面上，因为刚开始显示的图片是最后一张的，所以要把ul的样式然后向右移动400px，也就是“-400px”；  
加载事件代码截图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70 3]  
5：写完代码以后就可以打开浏览器看一下效果了，隔两秒就会自动切换到下一张图片，然后到第4张切换第5张时，因为没有5张图片所以就会跳回第一张，当然你也可以让它从左边开始轮播，再设置一下js就OK了，比如再写一个自动播放的方法，只不过需要把方法里面的参数改为400就行了，然后再给盒子一个单击事件，当点击时触发刚刚写的那个方法，这样就完成了点击图片向左轮播的效果了；  
单击向左轮播代码截图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70 4]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70]: /images/20220203/16ffe5d72ee645019bd31da3e400f4dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70 1]: /images/20220203/5eaae5efc1824032af25699f9fba74a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70 2]: /images/20220203/e44dee38d261421f9aa330187f136e02.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70 3]: /images/20220203/d18b18c8a19b4cfaaa30c6b77a7ee73f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70 4]: /images/20220203/e6ecba3a4ab0468fb9ac2bad3948f8ff.png