JavaScript实现带标题的图片轮播特效

前端技术 2023/09/03 JavaScript

图片轮播，在一些购物网站上运用的不胜枚举，下面简单介绍一下图片轮播的实现。

如图

CSS代码：

 <style type=\"text/css\">
 
.body{
  width:524px;
  border:solid 1px #666;
  margin-left:auto;
  margin-right:auto;
  }
 .bg{
    background-color:#E0E0E0;
    height:20px;
    border-top:solid 1px #B4B4B4;
    }
  .number{
    font-size: 14px;
    font-weight: bold;
    color: #FFF;
    background-color: #9E2E07;
    display: block;
    border: 1px solid #FFF;
    width:18px;
    height:18px;
    text-align: center;
    margin-left:10px;
    cursor:pointer;
    float:left;
    }
  .numberOver{
    color:#8C2806;
    font-size:14px;
    width:280px;
    background-color:#FFF;
    text-align:center;
    float:left;
    display: block;
    margin-left:10px;
    }
.main{
  width:95%;
  margin-left:auto;
  margin-right:auto;
  }
  .left_indent{
    padding-left:20px;
    }
  .red{
    color:#F00;
    }
 </style>

HTML代码：

 <div class=\"body\"><img src=\"ad-01.jpg\" width=\"524\" height=\"190\" border=\"0\" alt=\"广告图片\" id=\"Rotator\">
 <div class=\"bg\">
 <div class=\"number\" id=\"fig_1\" onclick=\"show(1);\">1</div>
 <div class=\"number\" id=\"fig_2\" onclick=\"show(2);\">2</div>
 <div class=\"number\" id=\"fig_3\" onclick=\"show(3);\">3</div>
 <div class=\"number\" id=\"fig_4\" onclick=\"show(4);\">4</div>
 
 </div>
 </div>

JS代码：

 <script type=\"text/javascript\">
 // JavaScript Document
//定义全局变量
var title=new Array();
title[0]=\"1.店庆第一波 限时抢购 一日三疯！\";
title[1]=\"2.十年店庆均价场 39/99/169专场！\";
title[2]=\"3.全场69折封顶 享当当的超值低价！\";
title[3]=\"4.店庆钜献 海量图书69折封顶\";

var NowFrame = 1;  //最先显示第一张图片
var MaxFrame = 4;  //一共五张图片
function show(d1) {
  if(Number(d1)){
    clearTimeout(theTimer); //当触动按扭时，清除计时器
    NowFrame=d1;        //设当前显示图片
    }
  for(var i=1;i<(MaxFrame+1);i++){
    if(i==NowFrame){
      
      document.getElementById(\"Rotator\").src =\"ad-0\"+i+\".jpg\";  //显示当前图片
      document.getElementById(\"fig_\"+i).innerHTML=title[i-1];    //显示当前图片对应的标题
      document.getElementById(\"fig_\"+i).className=\"numberOver\";  //设置当前标题的CSS样式
     }
     else{
     document.getElementById(\"fig_\"+i).innerHTML=i;
     document.getElementById(\"fig_\"+i).className=\"number\";
     }
  }
  if(NowFrame == MaxFrame){  //设置下一个显示的图片
    NowFrame = 1;
    }
  else{
    NowFrame++;
    }
}
var theTimer=setInterval(\'show()\', 3000);  //设置定时器，显示下一张图片
window.onload=show;  //页面加载时运行函数show()

</script>

以上所述就是本文给大家分享的全部内容了，希望大家能够喜欢。

本文地址：https://www.stayed.cn/item/6479

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案