Jquery制作图片展示轮播组建

来源：互联网发布：大连淘宝美工培训学校编辑：程序博客网时间：2024/04/28 15:10

发觉现在做前端越来越重要了,用户体验要求越来越高了,很多人应该更多的是找些现成的JS特效代码或者jquery UI插件用,但很多时候我们还是得按我们自已的需求做,花点时间搞通这些功能还是有必要的.

首先，要想自己做出这种效果的门槛是，CSS HTML布局过硬，了解相对定位绝对定位原理，了解透明度CSS原理，了解JS基础的DOM知识，还有JS操作CSS的基础知识，最后是一些小的JS常用编程技巧。

如果上面你都符合，又想自己做出组合在一起的实际应用，那么往下读吧。

首先，上面2个例子，一个是左右滚动，下部指针控制且切换样式。一个是透明度渐隐，下部指针控制切切换样式。鼠标经过都停止切换，移开之后按照当前顺序继续切换。小图都可操作。

好了，以上就是这个功能的基本需求。小爝不推荐现在开始打开站酷，68，蓝色理想开始找代码。。。那样做你永远接触不到前端“开发”这个东西了，个人感觉领会了JS之后的开发才有真的乐趣。当然，现在我说的也只是皮毛。正文开始：

从需求开始想代码：
作为HTML+CSS+JS一起完成的东西，根本上是先理顺基本的思路，可能很多人会写CSS，布局完全靠想，写JS也是。我分享的完全是经验（实际代码自己去看网页源文件），那么继续，首先，布局：

根据效果图分析，快速形成布局。图片切换和JS这种特效做法很多，讲下基本的几种和优缺点：1，我目前用的，图片全部加载，代码直接铺上，快速实现功能，动画过度稳，图片无缓冲，但是开始加载时间会过长。2，XML,JSON,ARRAY数组切换，图片开始加载速度快，切换时延迟，代码稍复杂，实现功能速度比前者慢，要多写几个监听函数。3，结合PHP后端语言实现了，和前端开发没啥关系。

以上是原理，而不是直接叫你去找什么插件，什么特效代码，你要记住，所有这些都是以上原理。

下面：实现动画，首先：上下左右斜着的各种动画吧。原理：CSS随时间的变化而变化，绝对相对定位后的TOP,LEFT值变化而已。根据不同算法，加速度，减速，缓冲等均可实现。然后：透明度渐变，CSS中的透明度属性，随时间变化而变化，同理不解释。

根据不同需要，完成不同布局：
上面的2个需求不同，因为一个是左右移动，所以我选择绝对定位大容器后相对定位里面小图片，然后控制图片移动来实现切换，大容器OVERFLOW：HIDDEN；第2个因为是透明度切换，所以没必要移动的话，全部绝对定位5张图一个位置，根据时间来做不同的透明度变化，实现切换效果。

好，说到这里原理和实现方法还有代码你应该都弄好了，至于下部的指针，也就是小图片，随便你怎么去写吧。都做出HTML代码即可。

下面来说JQUERY里的封装好的几个JS事件句柄，也就是HOVER事件和CLICK事件了，JQ可以完成，JS也可以。通过DOM选择或者JQ的 $()来实现节点选择，这些是根本知识了。可以参考JS手册和JQ手册。时间函数，JS自带的SetTimeout还有清除延迟clearTimeout的用法，希望你仔细看下W3Cschool里的解释。我也不多说，了解完上面的知识，可以进行编码了。

设置标志位,JS常用小技巧。设置个全局变量保存当前图片指针状态，也就是说，当前图片切换到哪里了，我们需要记录。默认当然开始是第一个了，所以默认赋值为1。写一个切换函数function move(){},里面包含什么呢，节点的选择，你写的HTML的容器，用JS选择吧，然后做你需要做的动画效果，比如，第一个图，向左移动自己的宽度，结束。

开始封装，第一个图，用标识符代替，向左移动自己的宽度，自己的宽度，封装，向左移动的距离有了，第一次移动1*单位宽度；OK，然后标识符+1；结束。

这个函数差不多OK了。第一个操作结束，标识符移到2，嗯，时间函数,settimeout完成重复和延迟，settimeout(move,3000),函数的最后加这个代码，3秒后再次执行这个代码。哈哈，看，切换效果完成，因为标识符自增，下次执行的就是第2张图了，最后加入控制结束回归的判断，if(flg==5){flg=1}；OK不用解释了吧，里面的5可以封装的。。。

完成切换的JS了，原理就这么简单。透明度同理自己思考吧。下面是HOVER和CLICK事件了登场了，鼠标移到大容器上，我们的切换要停止，嗯，JS里是mouseover，道理一个意思，我们cleartimeout（）就可以了，里面的参数跟你上面设置的settimeout参数即可。例子：T=settimeout（move，3000）；cleartimeout（t）；嗯哼，移动上，动画切换停止了，移动走呢？我们重新运行move函数即可了么~嗯，记得一点，移动走会立刻触发move函数，我们还是依然需要settimeout延迟出发move函数，然后一切OK！移走，移上的就都制作完毕了。封装你的代码吧，上面的例子我没有封装，只是快速实现了而已。

最后，click事件，用在改变指针，这个好办，下面的图的顺序和上面的大图肯定是对应的。那么下面的图是1，点1的时候指针赋值为1，点2赋值为2，即可。得到这些1啊2啊什么的，你需要了解FOR循环这个编程基础知识了，其实就是有5个图，我就循环5次，每次+1.值就是你要的1 2 3 4了。。。具体实现可以看我的代码，jquery里用的each函数完成的，手册里有具体例子和解释。

嗯，到这里就应该结束我们的展示图片JS的编写了。什么什么你还没有JS和jquery的CHM手册？如果每天不看几次小爝都会觉得不舒服，所以我推荐，没有的自己google搜下DOWN了开始看吧。

希望大家js越来越NB~！

源码---------------------------------------------------------------------------

示例:http://www.designsor.com/demo/jquey/jquerypic.html

<!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>Jquery图片轮播</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>

<body>
   <div class="showpic">
   <style>
   *{margin:0;padding:0}
   img{border:0 none; vertical-align:middle}
   .showpic{width:620px;height:330px;margin-bottom:10px;position:relative;}
   div.full{width:620px; height:238px;position:relative;overflow:hidden;}
   div.full img{width:620px; height:238px; position: absolute; top:0px; left:0px; display:none;}
   div.picbg{ position:absolute; width:620px; background:#000; height:70px; top:169px;left:0px;filter:alpha(opacity=80);
-moz-opacity:0.8;opacity: 0.8;}
   div.pictext{ position:absolute; width:600px;height:50px; color:#fff;top:169px; left:0px; font-size:12px;padding:10px; display:none;}
   div.pictext h2{ color:#fff; font-size:13px; font-weight:normal;}
   ul.small{list-style:none;width:610px; padding:4px 0px 0px 10px;height:85px; background:#C4C5C6; display:block;}
   ul.small li{float:left;width:116px; height:79px; margin-right:5px; _display:inline; position:relative; cursor:pointer;}
   ul.small li img{ position:absolute; top:5px; height:74px; left:0px; width:114px; border:#c4c5c6 solid 1px;}
   .picbj{background:url(images/pic_bg.gif) no-repeat left top; width:118px; height:79px;}
   </style>
   <script>
   $(function(){
    var flg=0;
    var flgr=0;
      function move(){
       $(".full img").eq(flg).fadeIn("slow");
       $(".full img").not($(".full img").eq(flg)).fadeOut("slow");
       $(".pictext").eq(flg).fadeIn("slow");
       $(".pictext").not($(".pictext").eq(flg)).fadeOut("slow");

       $(".picbg").fadeTo(300, 0.5);

       $(".small li").eq(flg).addClass("picbj");

       $(".small li").not($(".small li").eq(flg)).removeClass("picbj");

       $(".small li:eq("+flg+") img").css({"border":"#fff solid 1px"});
       $(".small li img").not($(".small li:eq("+flg+") img")).css({"border":"#c4c5c6 solid 1px"});

       flg=flg+1;
       t=setTimeout(move,3000);
       if(flg==5){flg=0;}
      }
      move();
      $(".showpic").hover(function(){
        flgr=0;
        clearTimeout(t);
      },function(){
        if(flgr==0){
        setTimeout(move,3000);
        }else{
        flg=flg+1;
        setTimeout(move,3000);
        }
        });
      $("ul.small li").each(function(i){

      $(this).click(function(){
      flgr=1;
         flg=i;
         $(".full img").eq(flg).fadeIn("slow");
       $(".full img").not($(".full img").eq(flg)).fadeOut("slow");
       $(".pictext").eq(flg).fadeIn("slow");
       $(".pictext").not($(".pictext").eq(flg)).fadeOut("slow");

       $(".picbg").fadeTo(300, 0.5);

       $(".small li").eq(flg).addClass("picbj");

       $(".small li").not($(".small li").eq(flg)).removeClass("picbj");

       $(".small li:eq("+flg+") img").css({"border":"#fff solid 1px"});
       $(".small li img").not($(".small li:eq("+flg+") img")).css({"border":"#c4c5c6 solid 1px"});

        });
       });



   });
   </script>
   <div class="full">
   <a href="http://www.baidu.com" target="_blank"><img src="images/full.gif" title="1" /></a>
   <a href="http://www.baidu.com" target="_blank"><img src="images/full2.gif" title="2" /></a>
   <a href="http://www.baidu.com" target="_blank"><img src="images/full.gif" title="3" /></a>
   <a href="http://www.baidu.com" target="_blank"><img src="images/full2.gif" title="4" /></a>
   <a href="http://www.baidu.com" target="_blank"><img src="images/full3.gif" title="5" /></a>
   </div>
   <div class="picbg"></div>
   <div class="pictext"><h2>BOBOCG JoB</h2>作为一21323123人员，阅读这样的书籍应该是每个人的必经过程。接触JQ虽然不长程之后，发现实际工...</div>
   <div class="pictext"><h2>BOBOCG JoB</h2>23人员，阅应该是每个人的必经过程。接触JQ虽然不长程之后，发现实际工...</div>
   <div class="pictext"><h2>BOBOCG JoB</h2>作为一人员，阅读这样的书籍应该是每个人的必经过程。接触JQ虽然不长程之后，发现实际工...</div>
   <div class="pictext"><h2>BOBOCG JoB</h2>作为一2123人员，阅读这样的书籍应该是每个人的必经过程。接触JQ虽然不长程之后，发现实际工...</div>
   <div class="pictext"><h2>BOBOCG JoB</h2>作为一2人员，阅读这样的书籍应该是每个人的必经过程。接触JQ虽然不长程之后，发现实际工...</div>
   <ul class="small">
    <li><img src="images/small1.gif" /></li>
    <li><img src="images/small2.gif" /></li>
    <li><img src="images/small1.gif" /></li>
    <li><img src="images/small2.gif" /></li>
    <li><img src="images/small1.gif" /></li>
   </ul>


   </div>