<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="智能社 - zhinengshe.com" />
<meta name="copyright" content="智能社 - zhinengshe.com" />
<title>智能社 - www.zhinengshe.com</title>
<style>
#div1{width:200px; height:200px; background:#ccc;}
</style>
<script src="jquery-1.7.2.js"></script>
<script>

$.fn.toRed = function(){
    //插件里面的this 是jquery对象
    this.css("background","red");
};

$.fn.toGreen = function(){
    //插件里面的this 是jquery对象
    this.css("background","green");
};

$(function(){
    $("#div1").toggle(function(){
        $(this).toRed();
    },function(){
        $(this).toGreen();
    });    
});
</script>
</head>

<body>

<div id="div1"></div>

</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="智能社 - zhinengshe.com" />
<meta name="copyright" content="智能社 - zhinengshe.com" />
<title>智能社 - www.zhinengshe.com</title>
<style>
#div1{width:200px; height:200px; background:#ccc;}
</style>
<script src="jquery-1.7.2.js"></script>
<script>

$.fn.extend({
    toRed:function(){
        this.css("background","red");
    },
    toGreen:function(){
        this.css("background","green");
    }
});

$(function(){
    $("#div1").toggle(function(){
        $(this).toRed();
    },function(){
        $(this).toGreen();
    });    
});
</script>
</head>

<body>

<div id="div1"></div>

</body>
</html>
View Code
<!--
智能社© - http://www.zhinengshe.com/

微博:@北京智能社
微信:zhi_neng_she

最具深度的前端开发培训机构 HTML+CSS/JS/HTML5
-->


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>淘宝幻灯片上下滑动效果 —— www.zhinengshe.com —— 智能社</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<script src="../jquery-1.7.2.js"></script>
<script src="slide.js"></script>
<script>
$(function(){
    $("#play").slide();
    $("#play2").slide();
});
</script>
</head>

<body>

<div class="play" id="play">
    <ol>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
    <ul>
        <li><a href="http://www.zhinengshe.com/"><img src="images/1.jpg" alt="广告一" /></a></li>
        <li><a href="http://www.zhinengshe.com/"><img src="images/2.jpg" alt="广告二" /></a></li>
        <li><a href="http://www.zhinengshe.com/"><img src="images/3.jpg" alt="广告三" /></a></li>
        <li><a href="http://www.zhinengshe.com/"><img src="images/4.jpg" alt="广告四" /></a></li>
        <li><a href="http://www.zhinengshe.com/"><img src="images/5.jpg" alt="广告五" /></a></li>
    </ul>
</div>

<div class="play" id="play2">
    <ol>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
    <ul>
        <li><a href="http://www.zhinengshe.com/"><img src="images/1.jpg" alt="广告一" /></a></li>
        <li><a href="http://www.zhinengshe.com/"><img src="images/2.jpg" alt="广告二" /></a></li>
        <li><a href="http://www.zhinengshe.com/"><img src="images/3.jpg" alt="广告三" /></a></li>
        <li><a href="http://www.zhinengshe.com/"><img src="images/4.jpg" alt="广告四" /></a></li>
        <li><a href="http://www.zhinengshe.com/"><img src="images/5.jpg" alt="广告五" /></a></li>
    </ul>
</div>
</body>
</html>
View Code
//版权 北京智能社©, 保留所有权利

$.fn.slide = function (){
    var $aBtn =this.find("ol li");
    var $oUl = this.find("ul");
    var $aLi = this.find("ul li");
    
    var iNow = 0;
    
    var timer = setInterval(next,1000);
    
    this.hover(function(){
        clearInterval(timer);
    },function(){
        timer = setInterval(next,1000);
    });
    
    function next(){
        iNow++;
        
        if(iNow == $aLi.length){
            iNow = 0;
        }
        tab();
    }
    
    
    $aBtn.mouseover(function(){
        
        iNow = $(this).index();
        tab();
    });
    
    
    function tab(){
        $aBtn.removeClass("active");
        $aBtn.eq(iNow).addClass("active");
        
        $oUl.stop().animate({top:-$aLi.height()*iNow});    
    }
};
View Code

posted on 2015-03-15 13:51  高尔础础  阅读(186)  评论(0编辑  收藏  举报