轮播图

最新推荐文章于 2022-06-07 12:50:19 发布

MonkeyCodeHoward

最新推荐文章于 2022-06-07 12:50:19 发布

阅读量301

点赞数

本文链接：https://blog.csdn.net/MonkeyCodeHoward/article/details/53896914

版权

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>轮播图</title>
   <style>
   .red{
       color:red;
       font-size: 18px;
   }
   </style>
</head>
<body>
<center>
   <h2>轮播图</h2>
   <a><img id="photo" src="imgages/1.jpg" width='400' height="300"></a>
   <div>
   <span class="num red">1</span>    
   <span class="num">2</span>    
   <span class="num">3</span>    
   <span class="num">4</span>    
   <span class="num">5</span>    
   </div>

</center>
</body>
<script src ="js/jquery.js"></script>
<script>
       var img =['imgages/1.jpg','imgages/2.jpg','imgages/3.jpg','imgages/4.jpg','imgages/5.jpg'];
       var isblank=[1,0,0,1,1];
       var href=['www.baidu.com','www.jd.com','www.sina.com','www.tmall.com','www.google.com'];
       var currentid =1;
   $(function(){
       //点数字
       $(".num").click(function(){
       var num=$(this).html();
       $(this).addClass('red').siblings().removeClass('red');
       var currentPhoto =img[num-1];
       $('#photo').attr('src',currentPhoto);
       var link=href[num-1];
       var blank=isblank[num-1];
       if(blank){
           isnewopen ="_blank"
       }
       $('#photo').parent().attr('href',link).attr('target',isnewopen);
       })
       //两秒自动走

       inter=setInterval(autoplay,2000);//这里有没有var都行
       function autoplay(){
           var currentPhoto=img[currentid-1];
           $('#photo').attr('src',currentPhoto);
           $('.num').eq(currentid-1).addClass('red').siblings().removeClass('red');
           var link=href[currentid-1];
       var blank=isblank[currentid-1];
       if(blank==1){
           isnewopen ="_blank"
       }else{
           isnewopen ="";
       }
       $('#photo').parent().attr('href',link).attr('target',isnewopen);
           if(currentid>4){
               currentid=1;
           }else{
               currentid++;
           }


       }
       //设置鼠标滑过时间
       $('#photo').hover(function(){
           clearInterval(inter);
           // alert(234);
       },function(){
           inter=setInterval(autoplay,2000);//有的话应用于作用域,没有的话默认为全局变量

       })
   })
</script>

</html>