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

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

为桐乡等地区用户提供了全套网页设计制作服务，及桐乡网站建设行业解决方案。主营业务为网站制作、做网站、桐乡网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

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">
          <h3>标题一</h3>
          <p>描述文本</p>
        </div>
      </li>
      <li class="picfirst"><a href="#" target="_blank"><img width="800" height="300" alt="" src="#"></a>
        <div class="picslidedetail">
          <h3>标题二</h3>
          <p>描述文本</p>
        </div>
      </li>

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

     <li class="picfirst"><a href="#" target="_blank"><img width="800" height="300" alt="" src="#"></a>
        <div class="picslidedetail">
          <h3>标题四</h3>
          <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://www.cdcxhl.com/article22/jddgcc.html

成都网站建设公司_创新互联，为您提供搜索引擎优化、静态网站、手机网站建设、用户体验、面包屑导航、定制开发

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联