轮播
开发工具与关键技术:DW、VS HTML(css)、JavaScript
作者:木林森
撰写时间:2019年5 月 1日
很多网站在展示商品的时候都需要用到图片,但是如果将图片一张张展示出来,那就需要用到很大的篇幅,而且消费者也容易产生审美疲劳,不利于商品的销售。如果能够让图片变成电视那样播放起来,这不仅能够减少图片占据的空间,还能产生一种神秘感,让消费者看到后有一种想要了解的欲望,然后主动进店购买商品。在这里能让图片像电视剧那样播放的效果叫做轮播。轮播效果的实现可以在DW中HTML写,也可以在VS中写,两者都能达到同样的效果,也都各有各的优势和不足。
在HTML中我们可以先设置一个大盒子放图片和按钮组,再在盒子里面分别放一个大盒子和一盒小盒子,分别放置图片和按钮组。再创建一个css设置轮播图需要的样式。例子一如下:
图1为HTML代码部分,图二为效果图(点击左右或小按钮都可以切换图片,也可以自动切换):
图1
图2
在VS中也是先创建一个大盒子,优势在于它不需要设置按钮组,但需要注意下面两点ÿ