Jquery 在html中调整图像大小的问题
我在我的phonegap项目中添加了照片滑动代码，应该是全屏滑动，但是我能够在一张幻灯片上获得所有图像，即使它的演示是全屏的 屏幕截图输出 这是密码Jquery 在html中调整图像大小的问题,jquery,html,css,cordova,Jquery,Html,Css,Cordova,我在我的phonegap项目中添加了照片滑动代码，应该是全屏滑动，但是我能够在一张幻灯片上获得所有图像，即使它的演示是全屏的 屏幕截图输出 这是密码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> <link rel="stylesheet" href="css/idangerous.s
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link rel="stylesheet" href="css/idangerous.swiper.css">
<style>
/* Demo Styles */
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 1.5;
}
.swiper-container {
width: 660px;
height: 250px;
color: #fff;
text-align: center;
}
.swiper-slide {
width: 500px;
height: 100%;
}
.red-slide {
background: #ca4040;
}
.blue-slide {
background: #4390ee;
}
.orange-slide {
background: #ff8604;
}
.green-slide {
background: #49a430;
}
.pink-slide {
background: #973e76;
}
.swiper-slide .title {
font-style: italic;
font-size: 42px;
margin-top: 80px;
margin-bottom: 0;
line-height: 45px;
}
.pagination {
position: absolute;
z-index: 20;
left: 10px;
bottom: 10px;
}
.swiper-pagination-switch {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 8px;
background: #222;
margin-right: 5px;
opacity: 0.8;
border: 1px solid #fff;
cursor: pointer;
}
.swiper-visible-switch {
background: #aaa;
}
.swiper-active-switch {
background: #fff;
}
</style
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide red-slide">
<div class="title">Slide 1</div>
</div>
<div class="swiper-slide blue-slide">
<div class="title">Slide 2</div>
</div>
<div class="swiper-slide orange-slide">
<div class="title">Slide 3</div>
</div>
</div>
<div class="pagination"></div>
</div>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/idangerous.swiper-2.1.min.js"></script>
<script>
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
paginationClickable: true,
moveStartThreshold: 100
})
</script>
演示
/*演示样式*/
身体{
保证金：0；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：13px；
线高：1.5；
}
.swiper容器{
宽度：660px；
高度：250px；
颜色：#fff；
文本对齐：居中；
}
.滑梯{
宽度：500px；
身高：100%；
}
.红色幻灯片{
背景：#ca4040；
}
.蓝色幻灯片{
背景：#4390ee；
}
.橙色幻灯片{
背景:#ff8604；
}
.绿色幻灯片{
背景#49a430；
}
.粉红幻灯片{
背景#973e76；
}
.swiper幻灯片.标题{
字体：斜体；
字体大小：42px；
边缘顶部：80px；
页边距底部：0；
线高：45px；
}
.分页{
位置：绝对位置；
z指数：20；
左：10px；
底部：10px；
}
.swiper分页开关{
显示：内联块；
宽度：8px；
高度：8px；
边界半径：8px；
背景：#222；
右边距：5px；
不透明度：0.8；
边框：1px实心#fff；
光标：指针；
}
.swiper可视开关{
背景：#aaa；
}
.swiper主动开关{
背景：#fff；
}
你忘了把
放在你的头上，创建一个你想做什么的演示，然后问一个大多数人至少能理解的问题。嘿，谢谢你的链接，这可能对我有用。我已经测试了上面的演示，我在一个单独的演示中正确地运行了输出，但是当我将它添加到当前正在运行的项目中时，我得到了这种类型的输出@SunnyRGuptaMaybe您的新项目无法访问您在代码中引用的.css文件，或者出现了这样的问题？似乎在style
结束标记中有一个输入错误。检查一下<代码>我已更正，问题仍保持不变@Mr_Green