JS更改css属性

用户名

因此,我将一些东西放在一起进行工作,除了一件小事,我已经按照我想要的方式工作了。在页面底部,我有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();

是该网页的临时链接。

haxtbh

您将只需要加载一个SimplySliderTest.js文件。

元素是在执行javascript之后加载的,因此没有任何绑定。

您有两种选择:

  1. 页面加载后,将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();
    });
    
  2. 将您移至<script type="text/javascript" src="SimplySliderTest.js"></script>页面底部,以便在元素之后加载

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章