全屏左右切换轮播

墨蓝 2022-03-25 01:38 274阅读 0赞

全屏左右切换轮播

开发工具与关键技术：Adobe Dreamweaver CC 2017  CSS   JavaScript
    
    作者：廖亚星
    
    撰写时间：2019年1月17日

首先我们先设置几张图片，作为多屏之间的切换，同时在第一屏上方采用固定定位放置几个按钮作为各屏之间的切换。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDY4MQ_size_16_color_FFFFFF_t_70]  
接下来我们设置样式  
![在这里插入图片描述][20190118092024303.PNG]  
下面是JavaScript部分  
全局变量  
![在这里插入图片描述][20190118092058118.PNG]  
先为按钮组设置点击事件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDY4MQ_size_16_color_FFFFFF_t_70 1]  
然后设置高亮效果  
![在这里插入图片描述][20190118092227638.PNG]  
下面添加轮播动画函数  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDY4MQ_size_16_color_FFFFFF_t_70 2]  
光是通过点击来切换屏数是很乏味的，但是我们如果通过鼠标滚轮来切换屏数是不是会显得十分惬意呢  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDY4MQ_size_16_color_FFFFFF_t_70 3]  
这样，一个简单的全屏切换轮播图就大功告成啦(づ￣3￣)づ╭❤～

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDY4MQ_size_16_color_FFFFFF_t_70]: /images/20220325/ed29a63c92cc43f685927f23949d38f6.png
[20190118092024303.PNG]: /images/20220325/04d0b487af4b460b9085089e1be59b0a.png
[20190118092058118.PNG]: /images/20220325/f52ffe5901ad408ca17d7aec12a853c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDY4MQ_size_16_color_FFFFFF_t_70 1]: /images/20220325/9b59dd9fbebc4d0a9a4b1043cb2a24a2.png
[20190118092227638.PNG]: /images/20220325/aa80b38541ab47028625053cccbe362f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDY4MQ_size_16_color_FFFFFF_t_70 2]: /images/20220325/e12a0170e712420d98f9a1ddbd80d053.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDY4MQ_size_16_color_FFFFFF_t_70 3]: /images/20220325/6ea759a22fdf430191150adb28180b26.png