我正在研究一个小jQuery小部件,以添加到我的投资组合/知识库中.小部件工作,并循环通过5个幻灯片,但是,它不会循环回到幻灯片1,因为它应该.它只会前进到空白幻灯片,页面需要刷新才能再次向后或向前移动.我是一个Javascript/jQuery初学者,所以我确定我错过了一些简单的东西,但我无法理解我的生活.非常感谢任何帮助.
//(document).ready(); makes sure that all elements on the page are
//loaded before loading the script
$(document).ready(function() {
//alert('Doc is loaded');
//specifies speed to change from image to image, in ms
var speed = 500;
//specifies auto slider option
var autoswitch = true;
//Autoslider speed
var autoswitch_speed = 4000;
//Add initial active class
$('.slide').first().addClass('active');
//Hide all slides
$('.slide').hide();
//Show first slide
$('.active').show();
$('#next').on('click', function() {
$('.active').removeClass('active').addClass('oldActive');
if ($('.oldactive').is('slider:last-child')) {
//alert('true');
$('.slide').first().addClass('active');
} else {
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.slide').fadeOut(speed);
$('.active').fadeIn(speed);
});
$('#prev').on('click', function() {
$('.active').removeClass('active').addClass('oldActive');
if ($('.oldactive').is(':first-child')) {
$('.slide').last().addClass('active');
} else {
$('.oldActive').prev().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.slide').fadeOut(speed);
$('.active').fadeIn(speed);
});
});* {
margin: 0;
padding: 0;
}
body {
font-family: 'Arial', sans-serif;
font-size: 14px;
color: #fff;
background: #333;
line-height: 1.6em;
}
a {
color: #fff;
text-decoration: none;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
#container {
width: 980px;
margin: 40px auto;
overflow: hidden;
}
#slider {
width: 940px;
height: 350px;
position: relative;
overflow: hidden;
float: left;
padding: 3px;
border: #666 solid 2px;
border-radius: 5px;
}
#slider img {
width: 940px;
height: 350px;
}
.slide {
position: absolute;
}
.slide-copy {
position: absolute;
bottom: 0;
left: 0;
padding: 20px;
background: 7f7f7f;
background: rgba(0, 0, 0, 0.5);
}
#prev,
#next {
float: left;
margin-top: 130px;
cursor: pointer;
position: relative;
z-index: 100;
}
#prev {
margin-right: -45px;
}
#next {
margin-left: -45px;
}
jQuery Content Slider
Tags | 热门标签
RankList | 热门文章
-
1如何在没有大量IF的情况下控制执行？
-
2打开新的浏览器窗口（谷歌地图），而不是在navigator.geolocation.getCurrentPosition回调中作为弹出窗口
-
3在Windows应用商店应用中编辑XML文件
-
4我可以做些什么来解决"1提交背后的主人"？
-
5React native:触摸时更改ListView项的样式
-
6flink - 使用匕首注射 - 不可序列化？
-
7数组初始化的短期和长期形式之间的有效差异
-
8如果所有的iPad都具有相同的768x1024屏幕尺寸,那么"规模"是多少？
-
9使用Ajax时清除select2下拉列表的正确方法是什么？
-
10如何在CodeIgniter控制器上运行所有URL所执行的cron作业是从API运行查询,更新数据库并发送电子邮件(从CI内部)？
-
11为什么在"使用"(在clojure中)使用围绕向量的单引号？
-
12为什么address-of operator('&')可以与在C++中使用寄存器存储类说明符声明的对象一起使用？
-
13Siri远程陀螺仪是否可以在tvOS模拟器上运行？
-
14:: class和get_class之间的差异
-
15将命令行字符串解析为Golang中的标志和参数
-
16json用jq重新映射
-
17读取事件查看器条目
-
18AIORedis和PUB / SUB不是asnyc
-
19无法从匿名类访问外部类
-
20强制https时,在symfony2中重定向循环
京公网安备 11010802040832号 | 京ICP备19059560号-6 