可左右控制带缩略图自动滚动焦点图

 

======================================

html部分

======================================

<div id="picslide">
    <ul id="picslidelist">
      <li class="picfirst"><a href="#" target="_blank"><img width="800" height="300" alt="" src="#"></a>
        <div class="picslidedetail">
          <h2>标题一</h2>
          <p>描述文本</p>
        </div>
      </li>
      <li class="picfirst"><a href="#" target="_blank"><img width="800" height="300" alt="" src="#"></a>
        <div class="picslidedetail">
          <h2>标题二</h2>
          <p>描述文本</p>
        </div>
      </li>

      <li class="picfirst"><a href="#" target="_blank"><img width="800" height="300" alt="" src="#"></a>
        <div class="picslidedetail">
          <h2>标题三</h2>
          <p>描述文本</p>
        </div>
      </li>

     <li class="picfirst"><a href="#" target="_blank"><img width="800" height="300" alt="" src="#"></a>
        <div class="picslidedetail">
          <h2>标题四</h2>
          <p>描述文本</p>
        </div>
      </li>
    </ul>
    <div id="picslideNav">
      <ul class="clearfix">
        <li class="picslideprev">上一个</li>
                <li class="trigger"><a href="javascript:void(0)"><img width="58" height="58" src="#"></a></li>
                <li class="trigger"><a href="javascript:void(0)"><img width="58" height="58" src="#"></a></li>

<li class="trigger"><a href="javascript:void(0)"><img width="58" height="58" src="#"></a></li>

<li class="trigger"><a href="javascript:void(0)"><img width="58" height="58" src="#"></a></li>
                <li class="picslidenext">下一个</li>
      </ul>
    </div>
    <div id="picslidebg"></div>
  </div>

======================================

js部分

======================================

<script type="text/javascript">
//首页焦点图
$(function(){
    (function(){
        var curr = 0;
        $("#picslideNav .trigger").each(function(i){
            $(this).click(function(){
                curr = i;
                $("#picslidelist li").eq(i).fadeIn("slow").siblings("li").hide();
                $(this).siblings(".trigger").removeClass("imgSelected").end().addClass("imgSelected");
                return false;
            });
        });

        var pg = function(flag){
            //flag:true表示前翻， false表示后翻
            if (flag) {
                if (curr == 0) {
                    todo = 4;
                } else {
                    todo = (curr - 1) % 5;
                }
            } else {
                todo = (curr + 1) % 5;
            }
            $("#picslideNav .trigger").eq(todo).click();
        };

        //前翻
        $(".picslideprev").click(function(){
            pg(true);
            return false;
        });

        //后翻
        $(".picslidenext").click(function(){
            pg(false);
            return false;
        });

        //自动翻
        var timer = setInterval(function(){
            todo = (curr + 1) % 5;
            $("#picslideNav .trigger").eq(todo).click();
        },5000);

        //鼠标悬停在触发器上时停止自动翻
        $("#picslide").hover(function(){
                clearInterval(timer);
            },
            function(){
                timer = setInterval(function(){
                    todo = (curr + 1) % 5;
                    $("#picslideNav .trigger").eq(todo).click();
                },5000);
            }
        );
    })();
});
</script>

转载于:https://blog.51cto.com/uedteam/1033547