未显示 Jssor 图像滑块箭头
Jssor Image Slider arrows not showing
我无法显示图像滑块上的箭头...我尝试更改位置和显示，但没有奏效。自从将代码放在我的索引页面上以来，我唯一更改的是：删除div id "jssor_1"上的"溢出：隐藏";滑块的实际大小（宽度：500px;高度：400px）;以及每张幻灯片的旋转速度...代码取自"no-jquery.html"文件。正如您在代码的"background： url"部分看到的，我已经将源代码设置为"a02.png"。
我还注意到左箭头虽然在滑块上不可见，但仍然有效（我可以将鼠标悬停在它上面并单击它）。
我觉得我在这里错过了一些简单的东西。.HTML：
<!DOCTYPE HTML>
<html>
<head>
<title>Nightfall Gaming</title>
<link href="C:'Users'Cam'Desktop'NightfallGaming'CSS'Stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body bgcolor="#FFFFFF">
<!--site navbar-->
<div id="navbar">
<nav>
<ul>
<li><a href="Index.html" class="active" id="active2">Home</a></li>
<li><a href="#">Game News</a></li>
<li><a href="#">Game Reviews</a>
<ul>
<li><a href="#">Xbox 360</a></li>
<li><a href="#">Xbox One</a></li>
<li><a href="#">PS3</a></li>
<li><a href="#">PS4</a></li>
<li><a href="#">PC</a></li>
<li><a href="#">Wii</a></li>
</ul>
</li>
<li><a href="ContactUs.html">Contact Us/About Us</a></li>
</ul>
</nav>
</div>
<!--site logo-->
<div id="logo">
<a href="Index.html"><img src="C:'Users'Cam'Desktop'NightfallGaming'Images'Logo.png" alt="Home"></a>
</div>
<!--mainbody div-->
<div id="mainbody">
<div id="slider">
<script type="text/javascript" src="C:'Users'Cam'Desktop'NightfallGaming'js'jssor.slider.min.js" async></script>
<script>
jssor_1_slider_init = function() {
var jssor_1_SlideoTransitions = [
[{b:0.0,d:600.0,y:-290.0,e:{y:27.0}}],
[{b:0.0,d:1000.0,y:185.0},{b:1000.0,d:500.0,o:-1.0},{b:1500.0,d:500.0,o:1.0},{b:2000.0,d:1500.0,r:360.0},{b:3500.0,d:1000.0,rX:30.0},{b:4500.0,d:500.0,rX:-30.0},{b:5000.0,d:1000.0,rY:30.0},{b:6000.0,d:500.0,rY:-30.0},{b:6500.0,d:500.0,sX:1.0},{b:7000.0,d:500.0,sX:-1.0},{b:7500.0,d:500.0,sY:1.0},{b:8000.0,d:500.0,sY:-1.0},{b:8500.0,d:500.0,kX:30.0},{b:9000.0,d:500.0,kX:-30.0},{b:9500.0,d:500.0,kY:30.0},{b:10000.0,d:500.0,kY:-30.0},{b:10500.0,d:500.0,c:{x:87.50,t:-87.50}},{b:11000.0,d:500.0,c:{x:-87.50,t:87.50}}],
[{b:0.0,d:600.0,x:410.0,e:{x:27.0}}],
[{b:-1.0,d:1.0,o:-1.0},{b:0.0,d:600.0,o:1.0,e:{o:5.0}}],
[{b:-1.0,d:1.0,c:{x:175.0,t:-175.0}},{b:0.0,d:800.0,c:{x:-175.0,t:175.0},e:{c:{x:7.0,t:7.0}}}],
[{b:-1.0,d:1.0,o:-1.0},{b:0.0,d:600.0,x:-570.0,o:1.0,e:{x:6.0}}],
[{b:-1.0,d:1.0,o:-1.0,r:-180.0},{b:0.0,d:800.0,o:1.0,r:180.0,e:{r:7.0}}],
[{b:0.0,d:1000.0,y:80.0,e:{y:24.0}},{b:1000.0,d:1100.0,x:570.0,y:170.0,o:-1.0,r:30.0,sX:9.0,sY:9.0,e:{x:2.0,y:6.0,r:1.0,sX:5.0,sY:5.0}}],
[{b:2000.0,d:600.0,rY:30.0}],
[{b:0.0,d:500.0,x:-105.0},{b:500.0,d:500.0,x:230.0},{b:1000.0,d:500.0,y:-120.0},{b:1500.0,d:500.0,x:-70.0,y:120.0},{b:2600.0,d:500.0,y:-80.0},{b:3100.0,d:900.0,y:160.0,e:{y:24.0}}],
[{b:0.0,d:1000.0,o:-0.4,rX:2.0,rY:1.0},{b:1000.0,d:1000.0,rY:1.0},{b:2000.0,d:1000.0,rX:-1.0},{b:3000.0,d:1000.0,rY:-1.0},{b:4000.0,d:1000.0,o:0.4,rX:-1.0,rY:-1.0}]
];
var jssor_1_options = {
$AutoPlay: true,
$Idle: 4000,
$CaptionSliderOptions: {
$Class: $JssorCaptionSlideo$,
$Transitions: jssor_1_SlideoTransitions,
$Breaks: [
[{d:2000,b:1000}]
]
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizes
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 600);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", $Jssor$.$WindowResizeFilter(window, ScaleSlider));
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
//responsive code end
};
</script>
<style>
/* jssor slider bullet navigator skin 01 css */
/*
.jssorb01 div (normal)
.jssorb01 div:hover (normal mouseover)
.jssorb01 .av (active)
.jssorb01 .av:hover (active mouseover)
.jssorb01 .dn (mousedown)
*/
.jssorb01 {
position: absolute;
}
.jssorb01 div, .jssorb01 div:hover, .jssorb01 .av {
position: absolute;
/* size of bullet elment */
width: 12px;
height: 12px;
filter: alpha(opacity=70);
opacity: .7;
overflow: hidden;
cursor: pointer;
border: #000 1px solid;
}
.jssorb01 div { background-color: gray; }
.jssorb01 div:hover, .jssorb01 .av:hover { background-color: #d3d3d3; }
.jssorb01 .av { background-color: #fff; }
.jssorb01 .dn, .jssorb01 .dn:hover { background-color: #555555; }
/* jssor slider arrow navigator skin 02 css */
/*
.jssora02l (normal)
.jssora02r (normal)
.jssora02l:hover (normal mouseover)
.jssora02r:hover (normal mouseover)
.jssora02l.jssora02ldn (mousedown)
.jssora02r.jssora02rdn (mousedown)
*/
.jssora02l, .jssora02r {
display: block;
position: absolute;
/* size of arrow element */
width: 55px;
height: 55px;
cursor: pointer;
background: url('C:'Users'Cam'Desktop'NightfallGaming'img'a02.png') no-repeat;
overflow: hidden;
}
.jssora02l { background-position: -3px -33px; }
.jssora02r { background-position: -63px -33px; }
.jssora02l:hover { background-position: -123px -33px; }
.jssora02r:hover { background-position: -183px -33px; }
.jssora02l.jssora02ldn { background-position: -3px -33px; }
.jssora02r.jssora02rdn { background-position: -63px -33px; }
</style>
<div id="jssor_1" style="position: relative; margin: 0 auto; top: 228px; left: -180px; width: 500px; height: 400px;">
<!-- Loading Screen -->
<div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
<div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
</div>
<div data-u="slides" style="cursor: default; position: relative;
: 0px; left: 0px; width: 800px; height: 400px; overflow: hidden;">
<div data-p="112.50" style="display: none;">
<img data-u="image" src="C:'Users'Cam'Desktop'NightfallGaming'img'001.jpg" />
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/007.jpg" />
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="C:'Users'Cam'Desktop'NightfallGaming'img'003.jpg" />
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/004.jpg" />
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/005.jpg" />
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/006.jpg" />
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/009.jpg" />
</div>
<div data-b="0" data-p="112.50" style="display: none;">
<img data-u="image" src="img/008.jpg" />
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/011.jpg" />
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/010.jpg" />
</div>
</div>
<!-- Bullet Navigator -->
<div data-u="navigator" class="jssorb01" style="bottom:16px;right:-8px;">
<div data-u="prototype" style="width:12px;height:12px;"></div>
</div>
<!-- Arrow Navigator -->
<span data-u="arrowleft" class="jssora02l" style="top:0px;left:8px;width:55px;height:55px;" data-autocenter="2"></span>
<span data-u="arrowright" class="jssora02r" style="top:0px;right:8px;width:55px;height:55px;" data-autocenter="2"></span>
</div>
<script>
jssor_1_slider_init();
</script>
</div>
</div>
</body>
</html>
您是否不必将两个箭头跨度放在主slider_container标签内，然后再进行包装图像的最后一个关闭div ...
相关文章：
- 非常大的图像显示渐进
- CSS Html使图像显示在单选按钮的选项上(单选按钮被CSS隐藏）
- JS照片库.使大图像显示和缩略图可单击
- 多个图像显示带有动态创建的画布的最后一个图像并分配给图像
- 当我在jquery/javascript中单击按钮时加载图像显示
- React图像显示
- 随机图像显示，无重复，使用Javascript
- 将跨度内容(图像url）转换为图像(显示）
- 随机图像显示不止一次
- 节点.js 使用 Multer 上传图像显示未定义
- 范围滑块，用于更改轨道上方对齐圆的直径并使对齐的图像显示在下方
- 使用图像显示和隐藏
- 使用 JavaScript 将文件夹中的图库图像显示到网页中
- 画布到图像显示为无图像(空白）
- 传单不会将本地图像显示为叠加
- 切换此元素时，如何使不同的图像显示，而不是文本
- 在页面加载时将图像显示为弹出窗口
- 如何在模糊浏览器主窗口时将图像显示为叠加层
- iOS在画布上绘制图像显示:无会导致内存泄漏
- JavaScript 图像显示不起作用
