jQuery轮播图插件，背景图实现轮播图，轮播图可增加文字

共11个文件

js：4个

jpg：4个

css：1个

jQuery轮播图

5星 · 超过95%的资源需积分: 19 49 浏览量 2023-02-27 14:51:26 上传评论 1 收藏 4.19MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery轮播图插件.zip （11个子文件）

jQuery轮播图插件

src

pageSwitch.js 8KB

pageSwitch.scss 649B

jquery-1.11.0.min.js 94KB

jquery-2.1.1.min.js 82KB

dist

pageSwitch.min.css 567B

pageSwitch.min.js 4KB

index.html 2KB

images

2.jpg 760KB

1.jpg 2.71MB

3.jpg 136KB

4.jpg 591KB

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>愛芳芳-兼容IE8的jQuery轮播图插件</title> <link rel="stylesheet" href="dist/pageSwitch.min.css"> <style type="text/css"> *{ padding: 0; margin: 0; } html,body{ height: 100%; } #container { width: 100%; height: 800px; overflow: hidden; } .sections,.section { height:100%; } #container,.sections { position: relative; } .section { background-color: #000; background-size: cover; background-position: 50% 50%; text-align: center; color: white; } #section0 { background-image: url('images/1.jpg'); } #section1 { background-image: url('images/2.jpg'); } #section2 { background-image: url('images/3.jpg'); } #section3 { background-image: url('images/4.jpg'); } </style> </head> <body> <div id="container"> <div class="sections"> <div class="section" id="section0"><h3>this is the page1</h3></div> <div class="section" id="section1"><h3>this is the page2</h3></div> <div class="section" id="section2"><h3>this is the page3</h3></div> <div class="section" id="section3"><h3>this is the page4</h3></div> </div> </div> <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script> <script src="dist/pageSwitch.min.js"></script> <script> $("#container").PageSwitch({ direction:'horizontal', easing:'ease-in', duration:2000, autoPlay:true, loop:'false' }); </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>来源：<a href="http://124.223.118.176/" target="_blank">愛芳芳</a></p> </div> </body> </html>

评论收藏

内容反馈