Javascript 单击后跳到下一张幻灯片
我已经创建了一个带有箭头的滑块，效果很好，但是我需要在内部幻灯片上添加一个链接，onclick会将其带到下一张幻灯片 我的代码如下Javascript 单击后跳到下一张幻灯片,javascript,jquery,Javascript,Jquery,我已经创建了一个带有箭头的滑块，效果很好，但是我需要在内部幻灯片上添加一个链接，onclick会将其带到下一张幻灯片 我的代码如下 <script type="text/javascript"> $(function () { var Page = (function () { var $navArrows = $('#nav-arrows'), $nav = $('#nav-dots > span'), slitslider
<script type="text/javascript">
$(function () {
var Page = (function () {
var $navArrows = $('#nav-arrows'),
$nav = $('#nav-dots > span'),
slitslider = $('#slider').slitslider({
onBeforeChange: function (slide, pos) {
$nav.removeClass('nav-dot-current');
$nav.eq(pos).addClass('nav-dot-current');
}
}),
init = function () {
initEvents();
},
initEvents = function () {
// add navigation events
$navArrows.children(':last').on('click', function () {
slitslider.next();
return false;
});
$navArrows.children(':first').on('click', function () {
slitslider.previous();
return false;
});
$nav.each(function (i) {
$(this).on('click', function (event) {
var $dot = $(this);
if (!slitslider.isActive()) {
$nav.removeClass('nav-dot-current');
$dot.addClass('nav-dot-current');
}
slitslider.jump(i + 1);
return false;
});
});
};
return { init: init };
})();
Page.init();
});
</script>
<div class="sl-slide" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5">
<div class="sl-slide-inner">
<div class="">
<a href="#" class="anhrClr custAnchr"><span class="splAncStl"><nav id="nav-arrows1">
<span>Click to next slide</span>
</nav></span></a>
</div>
</div>
</div>
$（函数（）{
变量页=（函数（）{
var$navArrows=$（“#nav arrows”），
$nav=$（“#nav dots>span”），
滑动滑块=$（“#滑块”）。滑动滑块({
onBeforeChange:功能（幻灯片、pos）{
$nav.removeClass（'nav-dot-current'）；
$nav.eq（pos.addClass）（“nav-dot-current”）；
}
}),
init=函数（）{
initEvents（）；
},
initEvents=函数（）{
//添加导航事件
$navArrows.children（':last'）。on（'click'，function（）{
slitslider.next（）；
返回false；
});
$navArrows.children（“：first”）.on（'click'，function（）{
slitslider.previous（）；
返回false；
});
$nav.每个（功能（i）{
$（此）.on（'click'，函数（事件）{
var$dot=$（此）；
如果（！slitslider.isActive（））{
$nav.removeClass（'nav-dot-current'）；
$dot.addClass（'nav-dot-current'）；
}
滑翔机跳跃（i+1）；
返回false；
});
});
};
返回{init:init}；
})();
Page.init（）；
});
<script type="text/javascript">
$(function () {
var Page = (function () {
var $navArrows = $('#nav-arrows'),
$nav = $('#nav-dots > span'),
slitslider = $('#slider').slitslider({
onBeforeChange: function (slide, pos) {
$nav.removeClass('nav-dot-current');
$nav.eq(pos).addClass('nav-dot-current');
}
}),
init = function () {
initEvents();
},
initEvents = function () {
// add navigation events
$navArrows.children(':last').on('click', function () {
slitslider.next();
return false;
});
$navArrows.children(':first').on('click', function () {
slitslider.previous();
return false;
});
$nav.each(function (i) {
$(this).on('click', function (event) {
var $dot = $(this);
if (!slitslider.isActive()) {
$nav.removeClass('nav-dot-current');
$dot.addClass('nav-dot-current');
}
slitslider.jump(i + 1);
return false;
});
});
};
return { init: init };
})();
Page.init();
});
</script>
<div class="sl-slide" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5">
<div class="sl-slide-inner">
<div class="">
<a href="#" class="anhrClr custAnchr"><span class="splAncStl"><nav id="nav-arrows1">
<span>Click to next slide</span>
</nav></span></a>
</div>
</div>
</div>
您可以使用$.trigger（'click'）模拟单击事件。尝试绑定您希望延迟事件的
$('a.anhrClr.custAnchr').on('click', function(e) {
$('.nav-arrow-next').trigger('click');
e.preventDefault();
return false;
});
e.preventDefault（）返回false用于防止浏览器处理对锚元素的单击。否则，您的浏览器可能会滚动到页面顶部并显示href=“#”
或执行其他不需要的操作
case arrow.right :
self._stopSlideshow();
self._navigate( 'next' );
break;
这是来自键盘导航的代码。所以你可以试试
$('.anhrClr').click(function(){
slitslider._navigate( 'next' );
return false;
});
请看例句-
更新
在示例中，我们可以找到_导航函数：
_navigate : function( dir, pos ) {
if( this.isAnimating || this.slidesCount < 2 ) {
return false;
}
this.isAnimating = true;
var self = this,
$currentSlide = this.$slides.eq( this.current );
// if position is passed
if( pos !== undefined ) {
this.current = pos;
}
// if not check the boundaries
else if( dir === 'next' ) {
this.current = this.current < this.slidesCount - 1 ? ++this.current : 0;
}
else if( dir === 'prev' ) {
this.current = this.current > 0 ? --this.current : this.slidesCount - 1;
}
this.options.onBeforeChange( $currentSlide, this.current );
// next slide to be shown
var $nextSlide = this.$slides.eq( this.current ),
// the slide we want to cut and animate
$movingSlide = ( dir === 'next' ) ? $currentSlide : $nextSlide,
// the following are the data attrs set for each slide
configData = $movingSlide.data(),
config = {};
config.orientation = configData.orientation || 'horizontal',
config.slice1angle = configData.slice1Rotation || 0,
config.slice1scale = configData.slice1Scale || 1,
config.slice2angle = configData.slice2Rotation || 0,
config.slice2scale = configData.slice2Scale || 1;
this._validateValues( config );
var cssStyle = config.orientation === 'horizontal' ? {
marginTop : -this.size.height / 2
} : {
marginLeft : -this.size.width / 2
},
// default slide's slices style
resetStyle = {
'transform' : 'translate(0%,0%) rotate(0deg) scale(1)',
opacity : 1
},
// slice1 style
slice1Style = config.orientation === 'horizontal' ? {
'transform' : 'translateY(-' + this.options.translateFactor + '%) rotate(' + config.slice1angle + 'deg) scale(' + config.slice1scale + ')'
} : {
'transform' : 'translateX(-' + this.options.translateFactor + '%) rotate(' + config.slice1angle + 'deg) scale(' + config.slice1scale + ')'
},
// slice2 style
slice2Style = config.orientation === 'horizontal' ? {
'transform' : 'translateY(' + this.options.translateFactor + '%) rotate(' + config.slice2angle + 'deg) scale(' + config.slice2scale + ')'
} : {
'transform' : 'translateX(' + this.options.translateFactor + '%) rotate(' + config.slice2angle + 'deg) scale(' + config.slice2scale + ')'
};
if( this.options.optOpacity ) {
slice1Style.opacity = 0;
slice2Style.opacity = 0;
}
// we are adding the classes sl-trans-elems and sl-trans-back-elems to the slide that is either coming "next"
// or going "prev" according to the direction.
// the idea is to make it more interesting by giving some animations to the respective slide's elements
//( dir === 'next' ) ? $nextSlide.addClass( 'sl-trans-elems' ) : $currentSlide.addClass( 'sl-trans-back-elems' );
$currentSlide.removeClass( 'sl-trans-elems' );
var transitionProp = {
'transition' : 'all ' + this.options.speed + 'ms ease-in-out'
};
// add the 2 slices and animate them
$movingSlide.css( 'z-index', this.slidesCount )
.find( 'div.sl-content-wrapper' )
.wrap( $( '<div class="sl-content-slice" />' ).css( transitionProp ) )
.parent()
.cond(
dir === 'prev',
function() {
var slice = this;
this.css( slice1Style );
setTimeout( function() {
slice.css( resetStyle );
}, 50 );
},
function() {
var slice = this;
setTimeout( function() {
slice.css( slice1Style );
}, 50 );
}
)
.clone()
.appendTo( $movingSlide )
.cond(
dir === 'prev',
function() {
var slice = this;
this.css( slice2Style );
setTimeout( function() {
$currentSlide.addClass( 'sl-trans-back-elems' );
if( self.support ) {
slice.css( resetStyle ).on( self.transEndEventName, function() {
self._onEndNavigate( slice, $currentSlide, dir );
} );
}
else {
self._onEndNavigate( slice, $currentSlide, dir );
}
}, 50 );
},
function() {
var slice = this;
setTimeout( function() {
$nextSlide.addClass( 'sl-trans-elems' );
if( self.support ) {
slice.css( slice2Style ).on( self.transEndEventName, function() {
self._onEndNavigate( slice, $currentSlide, dir );
} );
}
else {
self._onEndNavigate( slice, $currentSlide, dir );
}
}, 50 );
}
)
.find( 'div.sl-content-wrapper' )
.css( cssStyle );
$nextSlide.show();
}
\u导航：功能（方向、位置）{
if（this.isAnimating | | this.slideCount<2）{
返回false；
}
this.isAnimating=true；
var self=这个，
$currentSlide=this.$slides.eq（this.current）；
//如果职位通过
如果（位置！==未定义）{
这个。当前=位置；
}
//如果没有，请检查边界
else if（dir==='next'）{
this.current=this.current0？--this.current:this.slidescont-1；
}
this.options.onBeforeChange（$currentSlide，this.current）；
//下一张幻灯片将显示
var$nextSlide=this.$slides.eq（this.current），
//我们要剪切并设置动画的幻灯片
$movingSlide=（dir=='next'）？$currentSlide:$nextSlide，
//以下是为每张幻灯片设置的数据属性
configData=$movingSlide.data（），
config={}；
config.orientation=configData.orientation | |“水平”，
config.slice1angle=configData.slice1Rotation | | 0，
config.slice1scale=configData.slice1scale | | 1，
config.slice2angle=configData.slice2Rotation | | 0，
config.slice2scale=configData.slice2scale | | 1；
此._验证值（配置）；
var cssStyle=config.orientation==‘水平’{
边缘顶部：-this.size.height/2
} : {
边缘左侧：-this.size.width/2
},
//默认幻灯片的切片样式
重置样式={
“变换”：“平移（0%，0%）旋转（0度）比例（1）”，
不透明度：1
},
//切片1样式
slice1Style=config.orientation==‘水平’{
“transform”：“translateY（-”+this.options.translateFactor+”%）旋转（“+config.slice1angle+”度）缩放（“+config.slice1scale+”）”
} : {
“transform”：“translateX（-”+this.options.translateFactor+”%）旋转（“+config.slice1angle+”度）缩放（“+config.slice1scale+”）”
},
//切片2样式
slice2Style=config.orientation==‘水平’{
“transform”：“translateY（“+this.options.translateFactor+”%）旋转（“+config.slice2angle+”deg）比例（“+config.slice2scale+”）”
} : {
“transform”：“translateX（'+this.options.translateActor+'%）旋转（'+config.slice2angle+'deg）缩放（'+config.slice2scale+'）”
};
if（this.options.optOpacity）{
slice1Style.opacity=0；
slice2Style.opacity=0；
}
//我们正在将sl trans elems和sl trans back elems类添加到即将到来的“下一步”幻灯片中
//或者根据方向选择“上一个”。
//这样做的目的是通过为相应幻灯片的元素提供一些动画，使其更有趣
//（dir=='next'）？$nextSlide.addClass（'sl trans elems'）：$currentSlide.addClass（'sl trans back elems'）；
$currentSlide.removeClass（'sl trans elems'）；
var transitionProp={
“转换”：“所有”+this.options.speed+“ms轻松输入输出”
};
//添加两个切片并设置它们的动画
$movinglide.css（'z-index'，this.slidescont）
.find（'div.sl-content-wrapper'）
.wrap（$（''）.css（transitionProp））
.parent（）
.康德(
dir==='prev'，
函数（）{
var slice=这个；
this.css（slice1Style）；
setTimeout（函数（）{
css（resetStyle）；
}, 50 );
},
函数（）{
var slice=这个；
setTimeout（函数（）{
css（slice1Style）；
}, 50 );