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

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 // 切换延时
});
        }

 

posted on 2022-03-28 19:08  跨越&尘世  阅读(248)  评论(0编辑  收藏  举报