轮播图简单实现

最新推荐文章于 2024-06-18 11:56:32 发布

lfy1114

最新推荐文章于 2024-06-18 11:56:32 发布

阅读量388

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/lfy1114/article/details/51567228

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

二 图片的滚动
<!-- 每一行轮播图片站位一个DIV-->
        <div id="rollImage3" style="display: block;">
        <a href="$!shopRenovationMap.get('44').chainUrl" target="_blank">
         <img src="$!imageServerAddr$!shopRenovationMap.get('44').pictureUrl" id="proHot1_pictureUrlName" width="978" height="260">
        </a>
     </div>
    <!-- 每一行轮播图片站位一个END -->
        <div id="rollImage3" style="display: none;">
     <a href="$!shopRenovationMap.get('44').chainUrl" target="_blank">
         <img src="$!imageServerAddr$!shopRenovationMap.get('44').pictureUrl" id="proHot1_pictureUrlName" width="978" height="260">
        </a>
        </div>
  <div id="rollImage3" style="display: none;">
     <a href="$!shopRenovationMap.get('44').chainUrl" target="_blank">
         <img src="$!imageServerAddr$!shopRenovationMap.get('44').pictureUrl" id="proHot1_pictureUrlName" width="978" height="260">
        </a>
  </div>

 //第三个图片的滚动
   var len = $("#rollImage3).length;
        var index = 0;
         setInterval(function(){
              myInterval(index)
              index++;
              if (index == len) {      
                  index = 0;
              }
         },2500);//1000为1秒钟
          function myInterval(index)
          {
            $("#rollImage3).eq(index).css("display","block");
            $("#rollImage3).eq(index).siblings().css("display","none");
          }
  });