问题描述:

okay guys, I found a small piece of code on stackoverflow which is for a slidehsow using javascript. But for some reason it doesn't work on my PC. This is the original Post:

Looking for a fullwidth slider

it works there but for some reason it doesn't work for me!!

what am I doing wrong?

Here is my code:

<!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>

网友答案:

You seem to reference a javascript library (maybe jquery) in your code, but no trace of the library inclusion.

网友答案:

You are using jQuery code but where is your reference to the jQuery library?

相关阅读:
Top