【免费】jquery轮播图，jquery响应式自适应屏幕尺寸轮播图插件

共38个文件

png：11个

js：6个

jpg：6个

jquery轮播图

响应式自适应

需积分: 0 145 浏览量 2022-12-07 15:58:27 上传评论收藏 2.22MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jquery响应式自适应屏幕尺寸轮播图插件.zip （38个子文件）

css

bootstrap.min.css 111KB

bootstrap-select.min.css 6KB

styles.css 4KB

flexible-bootstrap-carousel.css 221B

font-awesome.min.css 21KB

images

item6.jpg 73KB

jeans-girls

dark-blue-women.png 42KB

light-blue-women.png 63KB

shirt-women.png 173KB

item5.jpg 68KB

good1

yellow.png 102KB

blue.png 517KB

black.png 18KB

good6

grey.png 93KB

dark-blue.png 41KB

item1.jpg 89KB

item2.jpg 41KB

good3.png 50KB

womens-bag.png 158KB

item4.jpg 62KB

item3.jpg 65KB

jeans.png 98KB

fonts

fontawesome-webfont.eot 55KB

glyphicons-halflings-regular.woff 23KB

fontawesome-webfont.woff 64KB

FontAwesome.otf 84KB

glyphicons-halflings-regular.ttf 40KB

glyphicons-halflings-regular.eot 20KB

glyphicons-halflings-regular.svg 61KB

fontawesome-webfont.svg 280KB

fontawesome-webfont.ttf 110KB

index.html 8KB

flexible-bootstrap-carousel.js 3KB

bootstrap.min.js 36KB

jquery-1.11.0.min.js 94KB

jquery-2.1.1.min.js 82KB

script.js 2KB

bootstrap-select.min.js 33KB

<!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>响应式自适应屏幕尺寸Carousel轮播图插件</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/flexible-bootstrap-carousel.css" /> <link rel="stylesheet" href="css/bootstrap-select.min.css"> <link rel="stylesheet" type="text/css" href="css/styles.css" /> </head> <body><script src="/demos/googlegg.js"></script> <section class="examples"> <div class="container"> <div class="carousel-example">  <div id="simple-content-carousel" class="carousel flexible slide" data-ride="carousel" data-interval="5000" data-wrap="true"> <div class="items"> <div class="flex-item"> <img class="img-responsive" src="images/item1.jpg"/> </div> <div class="flex-item"> <img class="img-responsive" src="images/item2.jpg"/> </div> <div class="flex-item"> <img class="img-responsive" src="images/item3.jpg"/> </div> <div class="flex-item"> <img class="img-responsive" src="images/item4.jpg"/> </div> <div class="flex-item"> <img class="img-responsive" src="images/item5.jpg"/> </div> <div class="flex-item"> <img class="img-responsive" src="images/item6.jpg"/> </div> </div> <div class="carousel-inner" role="listbox"> </div> <a class="left carousel-control" href="#simple-content-carousel" role="button" data-slide="prev"> <span class="fa fa-angle-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#simple-content-carousel" role="button" data-slide="next"> <span class="fa fa-angle-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> <div class="carousel-example">  <div id="complicated-content-carousel" class="carousel flexible slide" data-ride="carousel" data-interval="false" data-wrap="false"> <div class="items"> <div class="flex-item"> <div class="good-top"> <div class="good-top-left"> <div class="size"> <div class="header"><span class="number">Size</span> <span class="fa fa-angle-down"></span></div> <div class="options"> <div class="option">S</div> <div class="option">M</div> <div class="option">L</div> <div class="option">XL</div> </div> </div> </div> <div class="good-top-right"> <div class="choose-color"> <div class="blue"></div> <div class="yellow"></div> <div class="black"></div> </div> </div> </div> <div class="good-image"> <img src="images/good1/black.png"> </div> <div class="good-bottom"> <div class="good-bottom-left"> <a href="#"><h4>T-shirt</h4></a> </div> <div class="good-bottom-right"> <p class="price">5,00$</p> </div> </div> </div> <div class="flex-item"> <div class="good-top"> <div class="good-top-left"> <div class="size"> <div class="header"><span class="number">Size</span> <span class="fa fa-angle-down"></span></div> <div class="options"> <div class="option">S</div> <div class="option">M</div> <div class="option">L</div> <div class="option">XL</div> </div> </div> </div> <div class="good-top-right"> </div> </div> <div class="good-image"> <img src="images/jeans.png"> </div> <div class="good-bottom"> <div class="good-bottom-left"> <a href="#"><h4>Jeans for men</h4></a> </div> <div class="good-bottom-right"> <p class="price">30,00$</p> </div> </div> </div> <div class="flex-item"> <div class="good-top"> <div class="good-top-left"> 10 litres </div> <div class="good-top-right"> </div> </div> <div class="good-image"> <img src="images/good3.png"> </div> <div class="good-bottom"> <div class="good-bottom-left"> <a href="#"><h4>Backpack</h4></a> </div> <div class="good-bottom-right"> <p class="price">60,00$</p> </div> </div> </div> <div class="flex-item"> <div class="good-top"> <div class="good-top-left"> <div class="size"> <div class="header"><span class="number">Size</span> <span class="fa fa-angle-down"></span></div> <div class="options"> <div class="option">S</div> <div class="option">M</div> <div class="option">L</div> <div class="option">XL</div> </div> </div> </div> <div class="good-top-right"> <div class="choose-color"> <div class="dark-blue-women"></div> <div class="light-blue-women"></div> </div> </div> </div> <div class="good-image"> <img src="images/jeans-girls/dark-blue-women.png"> </div> <div class="good-bottom"> <div class="good-bottom-left"> <a href="#"><h4>Jeans for women</h4></a> </div> <div class="good-bottom-right"> <p class="price">50,00$</p> </div> </div> </div> <div class="flex-item"> <div class="good-top"> <div class="good-top-left"> <div class="size"> <div class="header"><span class="number">Size</span> <span class="fa fa-angle-down"></span></div> <div class="options"> <div class="option">S</div> <div class="option">M</div> <div class="option">L</div> <div class="option">XL</div> </div> </div> </div> <div class="good-top-right"> </div> </div> <div class="good-image"> <img src="images/shirt-women.png"> </div> <div class="good-bottom"> <div class="good-bottom-left"> <a href="#"><h4>Women's shirt</h4></a> </div> <div class="good-bottom-right"> <p class="price">30,00$</p> </div> </div> </div> <div class="flex-item"> <div class="good-top"> <div class="good-top-left"> 2 litres </div> <div class="good-top-right"> </div> </div> <div class="good-image"> <img src="images/womens-bag.png"> </div> <div class="good-bottom"> <div class="good-bottom-left"> <a href="#"><h4>Shoulder bag</h4></a> </div> <div class="good-bottom-right"> <p class="price">60,00$</p> </div> </div> </div> </div> <div class="carousel-inner" role="listbox"> </div> <div class="index"></div> <a class="left carousel-control" href="#complicated-content-carousel" role="button" data-slide="prev"> <span class="fa fa-angle-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#complicated-content-carousel" role="button" data-slide="next"> <span class="fa fa-angle-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </div> </section

评论收藏

内容反馈