Question

好的伙计们，我在stackoverflow上找到了一小段代码，用于使用javascript进行幻灯片放映。但由于某种原因，它无法在我的电脑上运行。这是原帖： Looking for a fullwidth slider

它在那里工作，但由于某种原因它不适合我！

我做错了什么？

这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.clear { clear:both; }
.wrapper { width:980px; margin:0 auto; }
.slider { margin:20px 0; height:100px; position:relative;  }
.slider .slide { display:none; background:red; position:absolute; height:100px; width:100%; text-align:center; color:#fff; font-size:24pt; }
.header { background:#eee; font-size:18pt; }
.content { }
.footer { background:#eee; text-align:center; }

.slider-nav { margin: 0 auto; width:100px; clear:both; } 
.slider-nav li { float:left; margin:0 5px; }
-->
</style>
<script type="text/javascript">
$('.slider .slide:first').addClass('active').fadeIn(200);

function rotate(index) {
     $('.slider .slide.active').removeClass('active').fadeOut(200, function() { 
         $('.slider .slide:eq(' + index + ')').addClass('active').fadeIn(200);
     });   
}

$('.slider-nav li a').click(function() {    
    var index = $(this).parent().index('li');
    rotate(index);
    return false;
});

setInterval(function() {
    var $next = $('.slider .slide.active').next();

    if ($next.length == 0)
        $next = $('.slider .slide:first');

    rotate($next.index());
}, 2000);
</script>
</head>

<body>
<div class="header wrapper">
    <h1>Site header</h1>
</div>
<div class="slider">
    <div class="slide">1</div>
    <div class="slide">2</div>
    <div class="slide">3</div>
    <div class="slide">4</div>
</div>
<ul class="slider-nav">
    <li><a href="#" >1</a></li>
    <li><a href="#" >2</a></li>
    <li><a href="#" >3</a></li>
    <li><a href="#" >4</a></li>
</ul>
<div class="clear"></div>
<div class="content">
    <div class="wrapper">
        <p>Some site content will be here</p>
        <p>Some site content will be here</p>
        <p>Some site content will be here</p>
        <p>Some site content will be here</p>
        <p>Some site content will be here</p>
    </div>
</div>
<div class="footer">
    <div class="wrapper">&copy; www.mysite.com    </div>
</div>
</body>
</html>

Answer 1

您似乎在代码中引用了一个javascript库（可能是jquery），但没有包含库的痕迹。

Answer 2

您正在使用jQuery代码，但您对jQuery库的引用在哪里？

Javascript滑块在本地不起作用？

2 个答案: