用jquery面向对象实现的简单的图片轮播，还能学习一下闭包哦

太过爱你忘了你带给我的痛 2022-08-09 00:50 9阅读 0赞

<!DOCTYPE html>  
<html>  
<head>  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  <title>图片自动轮播</title>  
    
  <link rel="stylesheet" type="text/css" href="css/showPictures-inTurn.css">  
  <script type="text/javascript" src="js/jquery-1.9.1.min.js">  
  </script>     
</head>  
<body id="show-pictures-in-turn">  
    <div class="banner">  
        <a href="javascript:;" class="banner\_title"></a>  
        <ul class="banner\_list">  
            <li>1</li>  
            <li>2</li>  
            <li>3</li>  
            <li>4</li>  
        </ul>  
        <div class="banner\_pic">  
            <a href="javascript:;">  
              <img src="imges/mypicture1.png" title="我的图片1" />  
            </a>  
            <a href="javascript:;">  
              <img src="imges/mypicture2.png" title="我的图片2"/>  
            </a>  
            <a href="javascript:;">  
              <img src="imges/mypicture3.png" title="我的图片3"/>  
            </a>  
            <a href="javascript:;">  
              <img src="imges/mypicture4.png" title="我的图片4"/>  
            </a>  
        </div>  
    </div>  
    <script type="text/javascript" src="js/showPictures-inTurn.js"></script>  
</body>

</html>

css文件

body \*\{  
    margin:0;  
    padding:0;  
 \}  
 \#show-pictures-in-turn .banner\{  
        width:500px;  
        height:400px;  
        position:relative;  
        border:1px solid \#000;  
    \}  
    \#show-pictures-in-turn a.banner\_title\{  
        position:absolute;  
        top:370px;  
        left:20px;  
        color:\#fff;  
        font-size:17px;  
        text-decoration:none;  
        z-index:2;  
    \}  
    \#show-pictures-in-turn ul\{  
        width:104px;  
        height:20px;  
        position:absolute;  
        top:350px;  
        right:20px;  
        z-index:2;  
        list-style: none;  
    \}  
    \#show-pictures-in-turn ul li\{  
        float:left;  
        width:10px;  
        \_width:5px;  
        height:20px;  
        line-height:20px;  
        display: inline;  
        margin:1px;  
        font-size: 14px;  
        text-align: center;  
        background-color:\#6f4f67;  
        color:\#fff;  
        padding:0px 6px;  
        border:1px solid \#fff;  
        cursor:pointer;  
    \}  
    \#show-pictures-in-turn ul li.active\{  
        background-color:\#900;  
    \}  
    \#show-pictures-in-turn .banner\_pic a\{  
        position:absolute;  
        top:0;  
        left:0;  
    \}

js文件

$(function()\{  
        //页面初始化  
        $('.banner\_pic img:eq(0)').css('opacity', '1');  
        $('.banner\_pic img:gt(0)').css('opacity', '0');  
        $('.banner\_list li:eq(0)').addClass('active');  
        var title=$('.banner\_pic img:eq(0)').attr('title');  
        $('.banner\_title').text(title);  
        //图片逐渐消失  
        var disappear=function(elem)\{  
          var opacity=100;  
          for(var i=0;i<=10;i++)\{  
            opacity=100-i\*10;  
            elem.css('opacity', opacity);  
          \}  
          return false;  
        \};  
        //图片逐渐显现  
        var appear=function(elem)\{  
          var opacity=0;  
          for(var i=0;i<=10;i++)\{  
            opacity+=i\*10;  
            elem.css('opacity', opacity);  
          \}  
          return false;  
        \};  
        var flag=false;  
        //自动轮播  
        function auto\_play(pic\_num\_current,pic\_num\_last)\{  
          function process()\{  
            if(pic\_num\_current==0&&!flag)\{  
              pic\_num\_current=1;  
              return;  
            \}  
            flag=true;  
            disappear($('.banner\_pic img:eq('+pic\_num\_last+')'));    
            appear($('.banner\_pic img:eq('+pic\_num\_current+')'));  
            $('.banner\_list li').removeClass('active');  
            $('.banner\_list li:eq('+(pic\_num\_current)+')').addClass('active');  
            var title=$('.banner\_pic img:eq('+(pic\_num\_current)+')').attr('title');  
            $('.banner\_title').text(title);  
            if(pic\_num\_current!=3)\{  
              pic\_num\_last=pic\_num\_current;  
              pic\_num\_current=pic\_num\_current+1;  
            \}  
            else\{  
              pic\_num\_last=pic\_num\_current;  
              pic\_num\_current=0;  
            \}  
          \}  
          return process;  
        \}   
        var result=auto\_play(0,0);  
        var circulate=setInterval(result,3000);  
        $('ul.banner\_list li').click(function() \{  
          clearInterval(circulate);  
          flag=true;  
          var currrent\_num=$(this).text()-1;  
          var last\_num=$('li.active').text()-1;  
          result=auto\_play(currrent\_num,last\_num);  
          result();  
          circulate=setInterval(result,3000);  
        \});  
    \});