zoukankan      html  css  js  c++  java
  • banner定时器

    $(function(){
                
                var index = 1;
                var ul_li = $('.banner_ul li');
                var icon_li = $('.icon_ul li');
                var img_length = $('.banner_ul li').length;;
                var _width = img_length*20+"px";
                var new_left = (img_length*20)/2*-1 +"px";
                $('.icon_ul').css({"width":_width,"margin-left":new_left});
                $('.banner_ul li:eq(0)').css({"opacity":"1","z-index":"3"});
                $('.icon_ul li:eq(0)').addClass('li_on');
                
                //小点变色
                $('.icon_ul li').mouseover(function(){
                    $(this).addClass('li_on').siblings('li').removeClass('li_on');
                    var _index = $(this).index();
                    ul_li.eq(_index).stop(true,false).animate({opacity:'1'},1000).siblings('li').stop(true,false).animate({opacity:'0'},1000);
                    ul_li.eq(_index).css("z-index","3").siblings('li').css("z-index","2");    
                    index = _index;
                });    
                //自动切换
                $('.banner_ul').hover(function(){
                    clearInterval(picTimer);
                },function(){
                    picTimer = setInterval(function(){
                        ul_li.eq(index).stop(true,false).animate({opacity:'1'},1000).siblings().stop(true,false).animate({opacity:'0'},1000);
                        ul_li.eq(index).css("z-index","3").siblings('li').css("z-index","2");
                        icon_li.eq(index).addClass('li_on').siblings('li').removeClass('li_on');
                        index++;
                        if(index == img_length){
                            index = 0;
                        }
                    },3000);
                }).trigger("mouseout");
            });

  • 相关阅读:
    vue-amap地图组件的使用
    数据分析
    爬虫之scrapy框架
    爬虫之selenium
    记录一下最近的pwn
    内核提权姿势笔记
    CVE-2016-5343分析
    CVE-2015-8660分析
    Docker远程访问get(root)shell姿势
    Linux内核ROP学习
  • 原文地址:https://www.cnblogs.com/hlyin/p/6699639.html
Copyright © 2011-2022 走看看