我正在尝试从 http://tympanus.net/codrops/2010/04/28/pretty-simple-content-slider-with-jquery-and-css3/实现非常简单的内容滑块 但是当我尝试把第二个模块两次相同的代码不起作用。
有任何想法吗？谢谢
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Pretty Simple Content Slider with jQuery and CSS3</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Pretty Simple Content Slider with jQuery and CSS3" />
<meta name="keywords" content="jquery,css3, content slider, slide, auto-play"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<style>
*{
margin:0;
padding:0;
}
body{
font-family:Arial;
background:#C1C7D5 url(title.png) no-repeat top center;
}
a.back{
background:transparent url(back.png) no-repeat top left;
position:fixed;
width:150px;
height:27px;
outline:none;
bottom:0px;
left:0px;
}
#content{
margin:150px auto 10px auto;
}
.reference{
clear:both;
width:800px;
margin:30px auto;
}
.reference p a{
text-transform:uppercase;
text-shadow:1px 1px 1px #fff;
color:#666;
text-decoration:none;
font-size:10px;
}
.reference p a:hover{
color:#333;
}
</style>
</head>
<body>
<div id="content">
<a class="back" href=""></a>
<div class="rotator">
<ul id="rotmenu">
<li>
<a href="rot1">Portfolio</a>
<div style="display:none;">
<div class="info_image">1.jpg</div>
<div class="info_heading">Our Works</div>
<div class="info_description">
At vero eos et accusamus et iusto odio
dignissimos ducimus qui blanditiis praesentium
voluptatum deleniti atque corrupti quos dolores et
quas molestias excepturi sint occaecati cupiditate
non provident...
<a href="#" class="more">Read more</a>
</div>
</div>
</li>
<li>
<a href="rot2">Services</a>
<div style="display:none;">
<div class="info_image">2.jpg</div>
<div class="info_heading">We serve</div>
<div class="info_description">
At vero eos et accusamus et iusto odio
dignissimos ducimus qui blanditiis praesentium
voluptatum deleniti atque corrupti quos dolores et
quas molestias excepturi sint occaecati cupiditate
non provident...
<a href="#" class="more">Read more</a>
</div>
</div>
</li>
<li>
<a href="rot3">Contact</a>
<div style="display:none;">
<div class="info_image">3.jpg</div>
<div class="info_heading">Get in touch</div>
<div class="info_description">
At vero eos et accusamus et iusto odio
dignissimos ducimus qui blanditiis praesentium
voluptatum deleniti atque corrupti quos dolores et
quas molestias excepturi sint occaecati cupiditate
non provident...
<a href="#" class="more">Read more</a>
</div>
</div>
</li>
<li>
<a href="rot4">Experiments</a>
<div style="display:none;">
<div class="info_image">4.jpg</div>
<div class="info_heading">We do crazy stuff</div>
<div class="info_description">
At vero eos et accusamus et iusto odio
dignissimos ducimus qui blanditiis praesentium
voluptatum deleniti atque corrupti quos dolores et
quas molestias excepturi sint occaecati cupiditate
non provident...
<a href="#" class="more">Read more</a>
</div>
</div>
</li>
<li>
<a href="rot5">Applications</a>
<div style="display:none;">
<div class="info_image">5.jpg</div>
<div class="info_heading">Working things</div>
<div class="info_description">
At vero eos et accusamus et iusto odio
dignissimos ducimus qui blanditiis praesentium
voluptatum deleniti atque corrupti quos dolores et
quas molestias excepturi sint occaecati cupiditate
non provident...
<a href="#" class="more">Read more</a>
</div>
</div>
</li>
</ul>
<div id="rot1">
<img src="" width="800" height="300" class="bg" alt=""/>
<div class="heading">
<h1></h1>
</div>
<div class="description">
<p></p>
</div>
</div>
</div>
</div>
<div class="reference">
<p><a href="http://www.flickr.com/photos/jrparis/106493273/">1 http://www.flickr.com/photos/jrparis/106493273/</a></p>
<p><a href="http://www.flickr.com/photos/aussiegall/2104652119/">2 http://www.flickr.com/photos/aussiegall/2104652119/</a></p>
<p><a href="http://www.flickr.com/photos/intherough/4396089594/">3 http://www.flickr.com/photos/intherough/4396089594/</a></p>
<p><a href="http://www.flickr.com/photos/lightknight/628680053/">4 http://www.flickr.com/photos/lightknight/628680053/</a></p>
<p><a href="http://www.flickr.com/photos/nguyendai/404631197/">5 http://www.flickr.com/photos/nguyendai/404631197/</a></p>
</div>
<div id="content">
<a class="back" href=""></a>
<div class="rotator">
<ul id="rotmenu">
<li>
<a href="rot1">Portfolio</a>
<div style="display:none;">
<div class="info_image">1.jpg</div>
<div class="info_heading">Our Works</div>
<div class="info_description">
At vero eos et accusamus et iusto odio
dignissimos ducimus qui blanditiis praesentium
voluptatum deleniti atque corrupti quos dolores et
quas molestias excepturi sint occaecati cupiditate
non provident...
<a href="#" class="more">Read more</a>
</div>
</div>
</li>
<li>
<a href="rot2">Services</a>
<div style="display:none;">
<div class="info_image">2.jpg</div>
<div class="info_heading">We serve</div>
<div class="info_description">
At vero eos et accusamus et iusto odio
dignissimos ducimus qui blanditiis praesentium
voluptatum deleniti atque corrupti quos dolores et
quas molestias excepturi sint occaecati cupiditate
non provident...
<a href="#" class="more">Read more</a>
</div>
</div>
</li>
<li>
<a href="rot3">Contact</a>
<div style="display:none;">
<div class="info_image">3.jpg</div>
<div class="info_heading">Get in touch</div>
<div class="info_description">
At vero eos et accusamus et iusto odio
dignissimos ducimus qui blanditiis praesentium
voluptatum deleniti atque corrupti quos dolores et
quas molestias excepturi sint occaecati cupiditate
non provident...
<a href="#" class="more">Read more</a>
</div>
</div>
</li>
<li>
<a href="rot4">Experiments</a>
<div style="display:none;">
<div class="info_image">4.jpg</div>
<div class="info_heading">We do crazy stuff</div>
<div class="info_description">
At vero eos et accusamus et iusto odio
dignissimos ducimus qui blanditiis praesentium
voluptatum deleniti atque corrupti quos dolores et
quas molestias excepturi sint occaecati cupiditate
non provident...
<a href="#" class="more">Read more</a>
</div>
</div>
</li>
<li>
<a href="rot5">Applications</a>
<div style="display:none;">
<div class="info_image">5.jpg</div>
<div class="info_heading">Working things</div>
<div class="info_description">
At vero eos et accusamus et iusto odio
dignissimos ducimus qui blanditiis praesentium
voluptatum deleniti atque corrupti quos dolores et
quas molestias excepturi sint occaecati cupiditate
non provident...
<a href="#" class="more">Read more</a>
</div>
</div>
</li>
</ul>
<div id="rot1">
<img src="" width="800" height="300" class="bg" alt="" style="left: 0px; top: 0px"/>
<div class="heading">
<h1></h1>
</div>
<div class="description">
<p></p>
</div>
</div>
</div>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
var current = 1;
var iterate = function(){
var i = parseInt(current+1);
var lis = $('#rotmenu').children('li').size();
if(i>lis) i = 1;
display($('#rotmenu li:nth-child('+i+')'));
}
display($('#rotmenu li:first'));
var slidetime = setInterval(iterate,3000);
$('#rotmenu li').bind('click',function(e){
clearTimeout(slidetime);
display($(this));
e.preventDefault();
});
function display(elem){
var $this = elem;
var repeat = false;
if(current == parseInt($this.index() + 1))
repeat = true;
if(!repeat)
$this.parent().find('li:nth-child('+current+') a').stop(true,true).animate({'marginRight':'-20px'},300,function(){
$(this).animate({'opacity':'0.7'},700);
});
current = parseInt($this.index() + 2);
var elem = $('a',$this);
elem.stop(true,true).animate({'marginRight':'0px','opacity':'1.0'},300);
var info_elem = elem.next();
$('#rot1 .heading').animate({'left':'-420px'}, 500,'easeOutCirc',function(){
$('h1',$(this)).html(info_elem.find('.info_heading').html());
$(this).animate({'left':'0px'},400,'easeInOutQuad');
});
$('#rot1 .description').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
$('p',$(this)).html(info_elem.find('.info_description').html());
$(this).animate({'bottom':'0px'},400,'easeInOutQuad');
})
$('#rot1').prepend(
$('<img/>',{
style : 'opacity:0',
className : 'bg'
}).load(
function(){
$(this).animate({'opacity':'1'},600);
$('#rot1 img:first').next().animate({'opacity':'0'},700,function(){
$(this).remove();
});
}
).attr('src','images/'+info_elem.find('.info_image').html()).attr('width','800').attr('height','300')
);
}
});
</script>
</body>