html+css+js实现轮播图效果

2024-04-28 09:02•html•阅读 2018

html和css样式这里就不再展示了，根据自己的需要设置即可。

通过js实现轮播图效果，其中真正应用的是jQuery，jQuery属于js的一个库

首先要在<head>内导入这一行代码

<script src="http://api.asilu.com/cdn/jquery.js,jquery.backstretch.min.js" type="text/javascript"></script>

然后使用一个函数即可

$.backstretch([
        \'../image/1.jpg\',//在这里定义图片的路径
        \'../image/2.jpg\',
        \'../image/3.jpg\',
        \'../image/4.jpg\',
        \'../image/5.jpg\'
    ], {
        fade : 1000, // 动画时长
        duration : 2000 // 切换延时
});
        }