可左右控制带缩略图自动滚动焦点图-创新互联

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

创新互联主营乌兰网站建设的网络公司,主营网站建设方案,重庆APP开发公司,乌兰h5成都小程序开发搭建,乌兰网站营销推广欢迎乌兰等地区企业咨询

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>

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

文章标题：可左右控制带缩略图自动滚动焦点图-创新互联
分享URL：https://www.cdcxhl.com/article20/ppjjo.html

成都网站建设公司_创新互联，为您提供网站改版、云服务器、小程序开发、外贸网站建设、域名注册、网站维护

广告

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