我正在研究一个小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结合多个Linq Where语句
-
2Google Map:InvalidValueError:setLabel:不是字符串; 没有文字属性
-
3在列表对象中排序
-
4PHP:如何解析JSON字符串并获取变量？
-
5Django-自定义装饰器，仅允许ajax请求
-
6使用PHP 7和WAMP
-
7如何从Linux内核维护者的开发分支下载最新的Linux内核代码？
-
8Mongodb多文档插入忽略自定义重复字段错误
-
9Laravel 5.1:将数据传递给View Composer
-
10快速r连续匹配(基于位置相似性)
-
11开源Redis集群和Redis labs企业集群之间有什么区别？
-
12Google Compute Engine：直接从gcloud控制台在vm中执行shell命令
-
13数组索引打印错误值
-
14Laravel 5 PHPUnit - 路由返回了无效的JSON
-
15MKMapView内存管理
-
16字体很棒,没有使用webpack和cordova
-
17如果由jQuery添加,Google会看到rel = nofollow吗？
-
18Android布局xml中的最大视图限制
-
19使用ggplot2绘制SpatialLinesDataFrame
-
20为什么这个Clojure程序在可变数组上工作这么慢？
京公网安备 11010802040832号 | 京ICP备19059560号-6 