var moveTo = function(index,dir){ if(clickable){ clickable = false; //位移距离 var offset = slider.width(); if(dir == 'prev'){ offset = -1*offset; } //当前滑块动画 sliderInder.children('.active').stop().animate({ left: -offset}, speed, function() { $(this).removeClass('active'); }); //下一个滑块动画 hwsliderLi.eq(index-1).css('left', offset + 'px').addClass('active').stop().animate({ left: 0}, speed, function(){ clickable = true; }); dots.removeClass('active'); dots.eq(index-1).addClass('active'); }else{ return false; } }
绑定左右箭头的点击事件，当点击箭头时，判断当前滑块是否是第一个滑块或最后一个滑块，并重新定义index，从而实现无线滚动效果，然后分别调用moveTo()函数，实现滑动动画效果。
next.on('click', function(event) { event.preventDefault(); if(clickable){ if(index >= hwsliderSize){ index = 1; }else{ index += 1; } moveTo(index,'next'); } }); prev.on('click', function(event) { event.preventDefault(); if(clickable){ if(index == 1){ index = hwsliderSize; }else{ index -= 1; } moveTo(index,'prev'); } });
接着，绑定圆点导航的点击事件，当点击小圆点时，获取当前点击的圆点序号，即点击的是第几个圆点，就对应的第几个滑块，然后调用moveTo()完成切换动画。
dots.on('click', function(event) { event.preventDefault(); if(clickable){ var dotIndex = $(this).data('index'); if(dotIndex > index){ dir = 'next'; }else{ dir = 'prev'; } if(dotIndex != index){ index = dotIndex; moveTo(index, dir); } } });
自动切换，首先我们要定义一个定时器，每隔一定的时间setInterval执行play()，play()每执行一次就会变化index参数，调用moveTo实现切换效果。最后当鼠标滑上滑块时清除定时器timer，鼠标移开滑块时又重新启动定时器自动切换。
if(autoPlay){ var timer; var play = function(){ index++; if(index > hwsliderSize){ index = 1; } moveTo(index, 'next'); } timer = setInterval(play, interval); //设置定时器 //鼠标滑上时暂停 slider.hover(function() { timer = clearInterval(timer); }, function() { timer = setInterval(play, interval); }); };
最后将代码整理后，你将可以看到一个基本的滑动切换效果，你也可以下载源码测试。
为了让我们的滑动切换效果应用到移动端，我们在下一篇文章中会具体介绍移动端的自适应屏幕以及手势滑动滑块效果，敬请关注。
以上所述是小编给大家介绍的基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载（一）的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: