为什么我的javascript代码不执行幻灯片放映

时间:2014-07-17 01:20:04

标签: javascript jquery html slider

//我想让我的所有图像都滑动,它们都是一样的(它们都是相同的,但位置不同)所以当幻灯片播放时它会看起来像是在移动

//脚本和功能

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.css"></script>
<script type="text/javascript">

    function slideShow(){
        $(".interactiveContent#1").show("fade",500);
        $(".interactiveContent#1").delay(5500).hide("slide",{direction:'left'},500);

        var sc = $(".interactiveContent img").size();
        var count=2;

        setInterval(function(){
            $(".interactiveContent #"+count).show("slide",{direction:'right'},500);
            $(".interactiveContent #"+count).delay(5500).hide("slide",{direction:'left'},500);

            if(count==sc){
                count = 1;
            }else{
                count = count + 1;
            }
        },6500);
    }

</script>

//使用div标签//

中的图像进行身体处理
<body onLoad="slideShow";>
    <div class="interactiveContent">
        <img id="1" src="pics/diagram1.png" alt="Diagram Displaying the Marketing Genius Process of Producing Digital Print Marketing Design and Ideas" />
        <img id="2" src="pics/diagram2.png" alt="Diagram Displaying the Marketing Genius Process of Producing Digital Print Marketing Design and Ideas" />
        <img id="3" src="pics/diagram3.png" alt="Diagram Displaying the Marketing Genius Process of Producing Digital Print Marketing Design and Ideas" />
        <img id="4" src="pics/diagram4.png" alt="Diagram Displaying the Marketing Genius Process of Producing Digital Print Marketing Design and Ideas" />
        <img id="5" src="pics/diagram5.png" alt="Diagram Displaying the Marketing Genius Process of Producing Digital Print Marketing Design and Ideas" />
        <img id="6" src="pics/diagram6.png" alt="Diagram Displaying the Marketing Genius Process of Producing Digital Print Marketing Design and Ideas" />
        <img id="7" src="pics/diagram7.png" alt="Diagram Displaying the Marketing Genius Process of Producing Digital Print Marketing Design and Ideas" />
        <img id="8" src="pics/diagram8.png" alt="Diagram Displaying the Marketing Genius Process of Producing Digital Print Marketing Design and Ideas" />
        <img id="9" src="pics/diagram9.png" alt="Diagram Displaying the Marketing Genius Process of Producing Digital Print Marketing Design and Ideas" />
        <img id="10" src="pics/diagram10.png" alt="Diagram Displaying the Marketing Genius Process of Producing Digital Print Marketing Design and Ideas" />
    </div>
</body>

2 个答案:

答案 0 :(得分:1)

看起来你没有开始代码。一个简单的<body onload="slideShow()">或同等版本将解决您的问题,。

答案 1 :(得分:0)

$的document.ready(函数(){

(function slideShow(){
        $(".interactiveContent#1").show("fade",500);
        $(".interactiveContent#1").delay(5500).hide("slide",{direction:'left'},500);

        var sc = $(".interactiveContent img").size();
        var count=2;

        setInterval(function(){

            $(".interactiveContent #"+count).show("slide",{direction:'right'},500);
            $(".interactiveContent #"+count).delay(5500).hide("slide",{direction:'left'},500);

            if(count==sc){
                count = 1;
            }else{
                count = count + 1;
            }
        },6500);
})();

});