仿淘宝详情页轮播图效果实现

图片路径记得修改、js源文件记得导入！

<!doctype html>
<head>
<meta charset="UTF-8">
<title>jQuery图片轮换效果</title>
<style type="text/css">
*{
   margin:0px;
   padding:0px;
   text-align:center;
}

#banner{
   width:730px;
   height:454px;
   margin:50px auto;
   position:relative;/*相对定位,相对于.btn按钮*/
   text-align:left;
}
.pic image {
   display:block;/*默认有图片不显示*/
   position:absolute;/*绝对定位.对应的是.pic这个div*/
   top:0px;
   left:0px;
}
.pic a{
   display:none;
}
.pic{        /*专门显现图片区*/
   position:relative;/*相对定位.对应.pic img*/

}
.btn{
   position:absolute;/*绝对定位相对于banner div*/
   bottom:5px;
   right:290px;
}
.btn ul li{
   list-style-type:none;
   width:18px;
   height:18px;
   float:left;
   text-align:center;
   cursor:pointer;/*鼠标移动变手指状态*/
   margin-left:65px;
}
.btn ul li.one{
   background-color:#ff9966;
}
.btn ul li img{
   width: 70px;
   height: 70px;
}
</style>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
       $(function(){
           $("#all li").mouseover(function(){//鼠标进入离开事件
               $(this).css("background-color","#ff00ff").siblings().css("background-color","white");
               $(this).css({"background-color":"red","font-size":"9px"}).siblings().hide();
           });

           $(window).scroll(function(){//鼠标滚动事件
               var _top=$(window).scrollTop();//获得鼠标滚动的距离
           });

           //手动播放图片
           $(".btn ul li").hover(function(){

               $(this).addClass("one").siblings().removeClass("one");
               index=$(this).index();
               i=index;
                $(".pic a").eq(index).stop().fadeIn(500).show().siblings().stop().fadeIn(500).hide();
               });

           //自动播放图片
           var i=0;
           var t=setInterval(autoplay,1000);
           function autoplay(){
               i++;
               if(i>5)i=0;
               $(".btn ul li").eq(i).addClass("one").siblings().removeClass("one");
               $(".pic a").eq(i).stop().fadeIn(500).show().siblings().stop().fadeIn(500).hide();
           }

               $("#banner").hover(function(){
                   clearInterval(t);
               },function(){
                   t=setInterval(autoplay,1000);
               });
           });
</script>
</head>
<body>
   
   <div id="banner">
       <div class="pic">
           <a href="#" style="display:block"><img src="img/portfolio-image-2.jpg"/></a>
           <a href="#"><img src="img/portfolio-image-3.jpg"/></a>
           <a href="#"><img src="img/portfolio-image-4.jpg"/></a>
       </div>
       <div class="btn">
           <ul>
               <li class="one"><img src="img/portfolio-image-2.jpg"/></li>
               <li><img src="img/portfolio-image-3.jpg"/></li>
               <li><img src="img/portfolio-image-4.jpg"/></li>
           </ul>
       </div>

   </div>
</body>
</html>

仿淘宝详情页轮播图效果实现

相关推荐