【发布时间】：2014-10-20 18:50:45
【问题描述】：
是否有我可以应用于媒体查询的代码来禁用具有 jQuery 的图像滑块？
我想禁用移动设备的滑块，因为滑块显示在屏幕外的某个位置，因此无法查看，所以我想禁用它。
这是代码：（草率，抱歉）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery.cycle.all.js"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
$('#slider').cycle({
fx: 'scrollHorz',
prev: '#prev',
next: '#next',
timeout: 0,
rev: false
});
</script>
<style type="text/css">
#wrapper {
display: block;
max-width: 660px;
max-height: 500px;
margin: auto;
position: fixed;
top: 0%;
bottom: 0%;
right: 10%;
}
#container {
display: block;
float: left;
height: auto;
width: 660px;
overflow: auto;
}
#prev {
background-image: url(left%20button.png);
background-position: center center;
display: block;
float: left;
height: 500px;
width: 80px;
position: relative;
z-index: 99;
cursor: pointer;
}
#prev:hover {
background-image: url(left%20button%20grey.png);
}
#next {
background-image: url(right%20button.png);
background-position: center center;
display: block;
float: right;
height: 500px;
width: 80px;
position: relative;
z-index: 99;
cursor: pointer;
}
#next:hover {
background-image: url(right%20button%20grey.png);
}
#slider {
display: block;
height: 500px;
width: 500px;
overflow: hidden;
float: left;
position: relative;
}
body {
background-color: #000;
}
/*background image*/
#fsbg {
width: 100%;
height: auto;
position: fixed;
z-index: -100;
left: 0px;
top: 0px;
min-height: 100%;
min-width: 1040px;
}
#shadow {
display: block;
height: 550px;
width: 550px;
margin: auto;
top: 0%;
bottom: 0%;
right: 15%;
position: fixed;
}
/*header nav bar*/
#table {
background-color: #000;
margin: 0;
padding: 0;
position: fixed;
left: 0px;
top: 0px;
height: 7%;
z-index: ;
}
/*footer nav bar*/
#table2 {
background-color: #000;
margin: 0;
padding: 10;
left: 0px;
bottom: 0px;
position: absolute ;
width: 100%;
height: 5%;
z-index: 0;
}
textem {
color: #FFF;
}
.textem2 {
color: #666;
text-align: right;
font-family: "Bebas Neue";
font-size: 16px;
}
@media screen and (max-width: 500px) {
#wrapper, #container, #slider {
width: 100%;
left: 0px;
bottom: 0px;
position: fixed;
}
#prev {
width: 80px;
height: 200px;
position: fixed;
left: 20%;
top: 65%;
}
#next {
width: 80px;
height: 200px;
position: fixed;
right: 20%;
top: 65%;
}
img {
width: 100%;
height: auto;
margin: auto;
}
#shadow {
opacity: 0;
}
}
</style>
</head>
<body>
/*header nav bar*/
<table width="100%" border="0" id="table">
<tr>
<td> </td>
</tr>
</table>
/*footer nav bar*/
<table width="100%" border="0" id="table2">
<tr>
<td class="textem2">Contact</td>
</tr>
</table>
/*background image*/
<img src="eminem.jpg" name="fsbg" width="1409" height="1059" id="fsbg">
<div id="wrapper">
<div id="container">>
<div class="controller" id="prev"></div>
<div id="slider">
<img src="500x500/Eminem - Marshall Mathers LP 2 HQ 500x500.png" width="500" height="500" alt="MMLP2">
<img src="500x500/Eminem - Bad Guy 2 500x500.png" width="500" height="500" alt="bad guy">
<img src="500x500/Eminem - Parking Lot 500x500.png" width="500" height="500" alt="parking lot">
<img src="500x500/Eminem - Rhyme Or Reason 500x500.png" width="500" height="500" alt="rhyme or reason">
<img src="500x500/Eminem - So Much Better 500x500.png" width="500" height="500" alt="so much better">
<img src="500x500/Eminem - Survival 500x500.png" width="500" height="500" alt="survival">
<img src="500x500/Eminem - Legacy 500x500.png" width="500" height="500" alt="legacy">
<img src="500x500/Eminem - Asshole.png" width="500" height="500" alt="asshole">
<img src="500x500/Eminem - Berzerk 500x500.png" width="500" height="500" alt="berserk">
<img src="500x500/Eminem - Rap God 500x500.png" width="500" height="500" alt="rap god">
<img src="500x500/Eminem - Brainless 2 500x500.png" width="500" height="500" alt="brainless">
<img src="500x500/Eminem - Stronger Than I Was 500x500.png" width="500" height="500" alt="stronger than i was">
<img src="500x500/Eminem - The Monster 500x500.png" width="500" height="500" alt="the monster">
<img src="500x500/Eminem - So Far 500x500.png" width="500" height="500" alt="so far">
<img src="500x500/Eminem - Love Game 500x500.png" width="500" height="500" alt="so far">
<img src="500x500/Eminem - Headlights 2 500x500.png" width="500" height="500" alt="headlights">
<img src="500x500/Eminem - Evil Twin 500x500.png" width="500" height="500" alt="evil twin">
</div>
<div class="controller" id="next"></div>
<div id="shadow">
<img src=shadow.png" width="550" height="550" alt="">
</div>
</div>
</div>
</body>
</html>
【问题讨论】：
-
是的 - 使用滑块隐藏 div 并可能显示其他内容。
-
给我们看一些代码。具体描述问题。
-
您可以在滑块上使用
display: none来获得移动分辨率。 -
@kxc：这不会阻止脚本执行。
-
我会检查宽度，不要在一定宽度下调用滑块。阅读：stackoverflow.com/questions/9720294/…
标签： jquery html css media-queries