无法在我的360度滑块

时间:2017-06-19 09:12:46

标签: jquery css

我是java脚本的新手,所以我完全复制并粘贴代码,我认为它没有正确加载图像。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="CSS.css">
<link rel="shortcut icon" type="image/ico" 
href="../../CONTENT/Images/Logo/ICO.ico" />
<link rel="stylesheet" href="src/styles/threesixty.css">
<title>pappu-lighting</title>
<script src="jquery-3.2.1.js"></script>
</head>

<body>

<div class="threesixty" id="mythreesixty">
    <div class="spinner">
        <span>0%</span>
    </div>
   <ol class="threesixty_images"></ol>
</div>

<script type="text/javascript" src="src/threesixty.js"></script>    
<script>
window.onload = init;

var product;
function init(){

my360 = $('#mythreesixty').ThreeSixty({
    totalFrames: 72, // Total no. of image you have for 360 slider
    endFrame: 72, // end frame for the auto spin animation
    currentFrame: 1, // This the start frame for auto spin
    imgList: '.threesixty_images', // selector for image list
    progress: '.spinner', // selector to show the loading progress
    imagePath:'assets/product1', // path of the image assets
    filePrefix: 'ipod-', // file prefix if any
    ext: '.jpg', // extention for the assets
    height: 265,
    width: 400,
    navigation: true,
    disableSpin: true // Default false
    });

}
</script>
</body>
</html>

所以我的Images源位于目录中的同一个文件夹中:/ assets / product1 /

我真的不知道什么是错的,但所有插件和CSS文件都已正确加载。

2 个答案:

答案 0 :(得分:0)

您尚未正确指定目录 在'/'之后添加product1,以便可以正确读取内部图片

 imagePath:'assets/product1/', // path of the image assets

答案 1 :(得分:0)

Three Sixty Image滑块的示例

<div class="threesixty product1">
    <div class="spinner">
        <span>0%</span>
    </div>
    <ol class="threesixty_images"></ol>
</div>    
<script type="text/javascript">
    window.onload = init;

    var product;
    function init(){

        product1 = $('.product1').ThreeSixty({
            totalFrames: 72, // Total no. of image you have for 360 slider
            endFrame: 72, // end frame for the auto spin animation
            currentFrame: 1, // This the start frame for auto spin
            imgList: '.threesixty_images', // selector for image list
            progress: '.spinner', // selector to show the loading progress
            imagePath:'assets/product1/', // path of the image assets
            filePrefix: 'ipod-', // file prefix if any
            ext: '.jpg', // extention for the assets
            height: 265,
            width: 400,
            navigation: true,
            disableSpin: true // Default false
        });

    }
    </script>