Question

我想在页面上实现滑块，但我想我会首先尝试自己的示例。什么都没有显示出来。我搜索了表格并做了一些细微的修改，但仍无济于事。以下是代码：

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">     </script>
<script src="jquerySlider/js/bjqs-1.3.js"></script>
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<link type="text/css" rel="Stylesheet" href="jquerySlider/bjqs.css" />

<style TYPE="text/css">
<!--
#my-slideshow {
background-color:#A3CF2E;
}
-->
</style>
</head>

<body>
<div id="my-slideshow">
    <ul class="bjqs">
        <li>first time for me</li>
        <li>second round of the game</li>
    </ul>
</div>
<script>
jQuery(document).ready(function($) {
$('#banner-fade').bjqs({
    'height' : 320,
    'width' : 620,
    'responsive' : true,
    'animtype' : 'fade', // accepts 'fade' or 'slide'
    'animduration' : 450, 
    'animspeed' : 4000, 
    'automatic' : true, 


        'showcontrols' : true, 
    'centercontrols' : true, 
    'nexttext' : 'Next', 
    'prevtext' : 'Prev', 
    'showmarkers' : true, 
    'centermarkers' : true, 


        'keyboardnav' : true, 
    'hoverpause' : true,


        'usecaptions' : true, 
    'randomstart' : true, 
});
});
</script>
</body>
</html>

Answer 1

你的div id应该是banner-fade而不是my-slideshow。或者将$('#banner-fade').bjqs({更改为$('#my-slideshow').bjqs({

'height'和'width'以及所有其他人不应该'周围'。只有淡出，下一个和上一个应该。添加'基本上注释掉那些行。

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">            </script>
<script src="jquerySlider/js/bjqs-1.3.js"></script>
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<link type="text/css" rel="Stylesheet" href="jquerySlider/bjqs.css" />

<style TYPE="text/css">
<!--
#my-slideshow {
background-color:#A3CF2E;
}
-->
</style>
</head>

<body>
<div id="my-slideshow">
    <ul class="bjqs">
        <li>first time for me</li>
        <li>second round of the game</li>
    </ul>
</div>
<script>
jQuery(document).ready(function($) {
$('#my-slideshow').bjqs({
    height : 320,
    width : 620,
    responsive : true,
    animtype : 'fade', // accepts 'fade' or 'slide'
    animduration : 450, 
    animspeed : 4000, 
    automatic : true, 


    showcontrols : true, 
    centercontrols : true, 
    nexttext : 'Next', 
    prevtext : 'Prev', 
    showmarkers : true, 
    centermarkers : true, 


    keyboardnav : true, 
    hoverpause : true,


    usecaptions : true, 
    randomstart : true, 
});
});
</script>
</body>
</html>

基本的jQuery Slider根本不显示

1 个答案: