带侧边栏缩略图的jQuery ui酷炫全屏图片幻灯片特效

一款带侧边栏缩略图的jQuery ui酷炫全屏图片幻灯片特效，支持鼠标向左移动显示侧边栏，也可点击左侧箭头显示侧边栏缩略图，有两种方式切换大图：一是点击左侧的任意缩略图切换大图，另一种是直接点击大图自动切换到下一张图片，图片查看模式也有三种可供选择：全屏、自适应和原始大小。

分类：图片代码 > 缩略图难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，先设置好页面元素的样式，接着引入jQuery库和其他JS文件，代码如下：

html,body{height:100%}
body {margin:0; padding:0; background:#333 url(sw_page_bg.png); overflow:hidden; font-family:Helvetica, Arial, sans-serif; font-size:16px;}
/* custom fonts */
.clear{clear:both;}
a:link,a:visited,a:hover{color:#ddd;}
a:hover{color:#fff; text-decoration:none;}
#bg{position:fixed; left:585px; top:0; width:100%; height:100%;}
#bgimg{display:none; cursor:pointer; -ms-interpolation-mode: bicubic;} /* special IE fix for resized images */
#preloader{position:absolute; z-index:2; width:140px; padding:20px; top:20px; left:50px; background:#000; color:#666; font-family:'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif; font-size:16px; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
#preloader img{margin-right:20px;}
#toolbar{display:inline-block; padding:4px 15px; margin:20px 15px; background:#262626 url(sw_btn_bg.png) repeat-x; -moz-border-radius:8px; -khtml-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; font-family:'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif; font-size:12px; color:#fff; cursor:pointer;}
#outer_container{position:relative; margin:0; width:700px; padding:0 100px 0 0; z-index:2; background:url(empty.gif);} /* fucking IE needs a background value to understand hover area */
#customScrollBox{position:relative; overflow:hidden; background:url(sw_l_bg.png) repeat-y;}
#customScrollBox .container{position:relative; width:585px; top:0; float:left;}
#customScrollBox .content{clear:both;}
#customScrollBox .content h1{padding:5px; margin:10px; color:#fff; font-family:'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif; font-size:28px;}
#customScrollBox .content h2{padding:5px; margin:10px 10px 0 10px; color:#fff; font-family:'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif; font-size:24px;}
#customScrollBox .content p{padding:5px; margin:0 10px 10px 10px; color:#ddd; font-family:'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif; line-height:26px;}
.light{font-family:'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;}
.grey{color:#999;}
.lightgrey{color:#ddd;}
.s36{font-size:24px;}
.s24{font-size:24px;}
#customScrollBox a.thumb_link{position:relative; margin:0 0 1px 1px; display:block; float:left;}
#customScrollBox img{border:none;}
#customScrollBox a.thumb_link .selected{position:absolute; top:0; left:0; width:145px; height:91px; background:url(sw_thumb_selected.png) no-repeat; display:none;}
#dragger_container{position:relative; width:30px; height:580px; float:left; margin:10px 0 0 0; background:url(sw_dragger_bg.png) repeat-y center;}
#dragger{position:absolute; width:30px; height:59px; background:url(round_custom_scrollbar_bg.png) no-repeat center center; cursor:pointer;}
#arrow_indicator{position:absolute; z-index:1; width:50px; padding:10px; top:50%; margin-top:-25px; left:20px; background:url(sw_transparent_black_bg.png); -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; display:none;}
#nextimage_tip{position:fixed; z-index:1; padding:0 20px; line-height:40px; color:#fff; height:40px; top:50%; margin-top:-20px; right:20px; background:url(sw_transparent_black_bg.png); -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; display:none; font-family:'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;}
.with_border{border:1px solid #000;}
.with_shadow{-moz-box-shadow:0 0 40px #000; -webkit-box-shadow:0 0 40px #000; box-shadow:0 0 40px #000;}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>

页面的body部分，采用了多个div的嵌套结构，多个a标签用来放置缩略图，代码如下：

<div id="outer_container">
  <div id="customScrollBox">
    <div class="container">
      <div class="content">
        <h1>jQuery ui酷炫全屏图片幻灯片特效
          <br />
          <span class="light">
            <span class="grey">
              <span class="s36">带侧边栏缩略图列表</span>
            </span>
          </span>
        </h1>
        <p>支持鼠标向左移动显示侧边栏</p>
        <div id="toolbar"></div>
        <div class="clear"></div>
        <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_lucernarium.jpg" class="thumb_link">
          <span class="selected"></span>
          <img src="imgs/space/Universe_and_planets_digital_art_wallpaper_lucernarium_thumb.jpg" title="Supremus Lucernarium" alt="Supremus Lucernarium" class="thumb" /></a>
        <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_denebola.jpg" class="thumb_link">
          <span class="selected"></span>
          <img src="imgs/space/Universe_and_planets_digital_art_wallpaper_denebola_thumb.jpg" title="Denebola" alt="Denebola" class="thumb" /></a>
        <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_lux.jpg" class="thumb_link">
          <span class="selected"></span>
          <img src="imgs/space/Universe_and_planets_digital_art_wallpaper_lux_thumb.jpg" title="Lux Aeterna" alt="Lux Aeterna" class="thumb" /></a>
<!-- 省略部分演示代码 -->
        <a href="imgs/space/Universe_and_planets_digital_art_wallpaper_victimofgravity.jpg" class="thumb_link">
          <span class="selected"></span>
          <img src="imgs/space/Universe_and_planets_digital_art_wallpaper_victimofgravity_thumb.jpg" title="Victim of Gravity" alt="Victim of Gravity" class="thumb" /></a>
        <p class="clear"></p>
        <p>&nbsp;</p>
      </div>
    </div>
    <div id="dragger_container">
      <div id="dragger"></div>
    </div>
  </div>
</div>
<div id="bg">
  <img src="imgs/space/Universe_and_planets_digital_art_wallpaper_lucernarium.jpg" title="Supremus Lucernarium" id="bgimg" />
  <div id="preloader">
    <img src="ajax-loader_dark.gif" width="32" height="32" align="absmiddle" />加载中...</div>
  <div id="arrow_indicator">
    <img src="sw_arrow_indicator.png" width="50" height="50" /></div>
  <div id="nextimage_tip">点击加载下一张</div>
</div>

页面的底部，需设置好图片点击和切换等的事件相应，部分代码如下：

$defaultViewMode = "full";
$bg = $("#bg");
$bgimg = $("#bg #bgimg");
$preloader = $("#preloader");
$outer_container = $("#outer_container");
$outer_container_a = $("#outer_container a.thumb_link");
$toolbar = $("#toolbar");
$nextimage_tip = $("#nextimage_tip");
$(window).load(function() {
    $toolbar.data("imageViewMode", $defaultViewMode);
    ImageViewMode($toolbar.data("imageViewMode"));
    $customScrollBox = $("#customScrollBox");
    $customScrollBox_container = $("#customScrollBox .container");
    $customScrollBox_content = $("#customScrollBox .content");
    $dragger_container = $("#dragger_container");
    $dragger = $("#dragger");
    CustomScroller();
    function CustomScroller() {
        outerMargin = 0;
        innerMargin = 20;
        $customScrollBox.height($(window).height() - outerMargin);
        $dragger_container.height($(window).height() - innerMargin);
        visibleHeight = $(window).height() - outerMargin;
        if ($customScrollBox_container.height() > visibleHeight) {
            $dragger_container,
            $dragger.css("display", "block");
            totalContent = $customScrollBox_content.height();
            draggerContainerHeight = $(window).height() - innerMargin;
            animSpeed = 400;
            easeType = "easeOutCirc";
            bottomSpace = 1.05;
            targY = 0;
            draggerHeight = $dragger.height();
            $dragger.draggable({
                axis: "y",
                containment: "parent",
                drag: function(event, ui) {
                    Scroll()
                },
                stop: function(event, ui) {
                    DraggerOut()
                }
            });
            $dragger_container.click(function(e) {
                var mouseCoord = (e.pageY - $(this).offset().top);
                var targetPos = mouseCoord + $dragger.height();
                if (targetPos < draggerContainerHeight) {
                    $dragger.css("top", mouseCoord);
                    Scroll()
                } else {
                    $dragger.css("top", draggerContainerHeight - $dragger.height());
                    Scroll()
                }
            });
            $(function($) {
                $customScrollBox.bind("mousewheel",
                function(event, delta) {
                    vel = Math.abs(delta * 10);
                    $dragger.css("top", $dragger.position().top - (delta * vel));
                    Scroll();
                    if ($dragger.position().top < 0) {
                        $dragger.css("top", 0);
                        $customScrollBox_container.stop();
                        Scroll()
                    }
                    if ($dragger.position().top > draggerContainerHeight - $dragger.height()) {
                        $dragger.css("top", draggerContainerHeight - $dragger.height());
                        $customScrollBox_container.stop();
                        Scroll()
                    }
                    return false
                })
            });
            function Scroll() {
                var scrollAmount = (totalContent - (visibleHeight / bottomSpace)) / (draggerContainerHeight - draggerHeight);
                var draggerY = $dragger.position().top;
                targY = -draggerY * scrollAmount;
                var thePos = $customScrollBox_container.position().top - targY;
                $customScrollBox_container.stop().animate({
                    top: "-=" + thePos
                },
                animSpeed, easeType)
            }
            $dragger.mouseup(function() {
                DraggerOut()
            }).mousedown(function() {
                DraggerOver()
            });
            function DraggerOver() {
                $dragger.css("background", "url(round_custom_scrollbar_bg_over.png)")
            }
            function DraggerOut() {
                $dragger.css("background", "url(round_custom_scrollbar_bg.png)")
            }
        } else {
            $dragger,
            $dragger_container.css("display", "none")
        }
    }
    $(window).resize(function() {
        FullScreenBackground("#bgimg");
        $dragger.css("top", 0);
        $customScrollBox_container.css("top", 0);
        $customScrollBox.unbind("mousewheel");
        CustomScroller()
    });
    LargeImageLoad($bgimg)
});