因此,我将一些东西放在一起进行工作,除了一件小事,我已经按照我想要的方式工作了。在页面底部,我有3个圆圈,它们用作更改滑块上的幻灯片的链接,但是,当我单击一个圆圈时,并不能完全改变css属性来更改单击的圆圈的颜色。这可能没有意义,所以我将链接我的小提琴(http://jsfiddle.net/AMN6N/1/)我认为这与以下代码行特别相关:
handleNavClick: function(event, el)
{
event.preventDefault();
var position = $(el).attr("href").split("-").pop();
this.el.slider.animate(
{
scrollLeft: position * this.slideWidth
},
this.timing);
this.changeActiveNav(el);
},
changeActiveNav: function(el)
{
this.el.allNavButtons.removeClass("active");
$(el).addClass("active");
}
};
slider.init();
这是该网页的临时链接。
您将只需要加载一个SimplySliderTest.js文件。
元素是在执行javascript之后加载的,因此没有任何绑定。
您有两种选择:
页面加载后,将JS加载到SimplySliderTest.js中。IE
$(function(){
var slider =
{
el:
{
slider: $("#slider"),
allSlides: $(".slide"),
sliderNav: $(".slider-nav"),
allNavButtons: $(".slider-nav > a")
},
timing: 800,
slideWidth: 300,
init: function()
{
this.bindUIEvents();
},
bindUIEvents: function()
{
this.el.slider.on("scroll", function(event)
{
slider.moveSlidePosition(event);
});
this.el.sliderNav.on("click", "a", function(event)
{
slider.handleNavClick(event, this);
});
},
moveSlidePosition: function(event)
{
this.el.allSlides.css(
{
"background-position": $(event.target).scrollLeft()/6-100+ "px 0"
});
},
handleNavClick: function(event, el)
{
event.preventDefault();
var position = $(el).attr("href").split("-").pop();
this.el.slider.animate(
{
scrollLeft: position * this.slideWidth
},
this.timing);
this.changeActiveNav(el);
},
changeActiveNav: function(el)
{
this.el.allNavButtons.removeClass("active");
$(el).addClass("active");
}
};
slider.init();
});
将您移至<script type="text/javascript" src="SimplySliderTest.js"></script>
页面底部,以便在元素之后加载
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句