嗨朋友们正在尝试使用jquery在单页中创建两个图像滑块,但在浏览器中运行此文件时会感觉到一些问题。 这是我的代码
HTML
<div id="projects">
<div id="completed">
<div class="button-previous">prev</div>
<div class="button-next">next</div>
<div class="slider-wrapper">
<div class="slider">
<div class="sp" style="background: blue;">akjdfalfkdj</div>
<div class="sp" style="background: yellow;">akjdfautlfkdkjkhkj</div>
<div class="sp" style="background: green;" >akjdfalfkdiyukjkhkj</div>
<div class="sp" style="background: red;">akjdfalfkdkkljjkhkj</div>
</div>
</div>
</div>
<div id="notcompleted">
<div class="button-previous-notcmpt">prev</div>
<div class="button-next-notcmpt">next</div>
<div class="slider-wrapper">
<div class="slider">
<div class="sp-notcmpt" style="background: blue;">akjdfalfkdj</div>
<div class="sp-notcmpt" style="background: yellow;">akjdfautlfkdkjkhkj</div>
<div class="sp-notcmpt" style="background: green;" >akjdfalfkdiyukjkhkj</div>
<div class="sp-notcmpt" style="background: red;">akjdfalfkdkkljjkhkj</div>
</div>
</div>
</div>
.................................................. .........................................
CSS
.slider-wrapper
{width:300px; height:250px;margin:15px;margin-left:25px }
.slider
{width:225px; height:225px; position:relative;}
.sp
{width:250px; height:250px; position:absolute;}
.button-previous
{margin-top:120px;float:left;}
.button-next
{margin-top:120px;float:right;}
.button-previous-notcmpt
{margin-top:120px;float:left}
.button-next-notcmpt
{margin-top:120px;float:right;}
.sp-notcmpt
{width:250px; height:250px; position:absolute;}
div#completed{
width: 300px;
height: 300px;
float: left;
border: solid black 1px;
overflow: hidden;
}
div#notcompleted{
width: 300px;
height: 300px;
float: right;
border: solid black 1px;
}
div#recentprojects{
height: 35px;
border: dotted green 0px;
text-align: center;
background-color: #0e3e6e;
color: #ffffff;
font-family: arial,normal;
line-height: 33px;
}
脚本
$(document).ready(function(){
if($('#completed')){
$('.sp').first().addClass('active');
$('.sp').hide();
$('.active').show();
$('.button-next').click(function(){
$('.active').removeClass('active').addClass('oldActive');
if ( $('.oldActive').is(':last-child')) {
$('.sp').first().addClass('active');
}
else{
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.sp').fadeOut();
$('.active').fadeIn();
});
$('.button-previous').click(function(){
$('.active').removeClass('active').addClass('oldActive');
if ( $('.oldActive').is(':first-child')) {
$('.sp').last().addClass('active');
}
else{
$('.oldActive').prev().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.sp').fadeOut();
$('.active').fadeIn();
});
}
if($('#notcompleted')){
$('.sp-notcmpt').first().addClass('active');
$('.sp-notcmpt').hide();
$('.active').show();
$('.button-next-notcmpt').click(function(){
$('.active').removeClass('active').addClass('oldActive');
if ( $('.oldActive').is(':last-child')) {
$('.sp-notcmpt').first().addClass('active');
}
else{
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.sp-notcmpt').fadeOut();
$('.active').fadeIn();
});
$('.button-previous-notcmpt').click(function(){
$('.active').removeClass('active').addClass('oldActive');
if ( $('.oldActive').is(':first-child')) {
$('.sp-notcmpt').last().addClass('active');
}
else{
$('.oldActive').prev().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.sp-notcmpt').fadeOut();
$('.active').fadeIn();
});
}
});
答案 0 :(得分:0)
尝试脚本。
$(document).ready(function(){
if($('#completed')){
$('#completed .sp').first().addClass('active');
$('#completed .sp').hide();
$('#completed .active').show();
$('#completed .button-next').click(function(){
$('#completed .active').removeClass('active').addClass('oldActive');
if ( $('#completed .oldActive').is(':last-child')) {
$('#completed .sp').first().addClass('active');
}
else{
$('#completed .oldActive').next().addClass('active');
}
$('#completed .oldActive').removeClass('oldActive');
$('#completed .sp').fadeOut();
$('#completed .active').fadeIn();
});
$('#completed .button-previous').click(function(){
$('#completed .active').removeClass('active').addClass('oldActive');
if ( $('#completed .oldActive').is(':first-child')) {
$('#completed .sp').last().addClass('active');
}
else{
$('#completed .oldActive').prev().addClass('active');
}
$('#completed .oldActive').removeClass('oldActive');
$('#completed .sp').fadeOut();
$('#completed .active').fadeIn();
});
}
if($('#notcompleted')){
$('#notcompleted .sp-notcmpt').first().addClass('active');
$('#notcompleted .sp-notcmpt').hide();
$('#notcompleted .active').show();
$('#notcompleted .button-next-notcmpt').click(function(){
$('#notcompleted .active').removeClass('active').addClass('oldActive');
if ( $('#notcompleted .oldActive').is(':last-child')) {
$('#notcompleted .sp-notcmpt').first().addClass('active');
}
else{
$('#notcompleted .oldActive').next().addClass('active');
}
$('#notcompleted .oldActive').removeClass('oldActive');
$('#notcompleted .sp-notcmpt').fadeOut();
$('#notcompleted .active').fadeIn();
});
$('#notcompleted .button-previous-notcmpt').click(function(){
$('#notcompleted .active').removeClass('active').addClass('oldActive');
if ( $('#notcompleted .oldActive').is(':first-child')) {
$('#notcompleted .sp-notcmpt').last().addClass('active');
}
else{
$('#notcompleted .oldActive').prev().addClass('active');
}
$('#notcompleted .oldActive').removeClass('oldActive');
$('#notcompleted .sp-notcmpt').fadeOut();
$('#notcompleted .active').fadeIn();
});
}
});
另外,检查一下,你已经包含了jquery库
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>