Home > Web Front-end > JS Tutorial > JavaScript implements image carousel effects with titles_javascript skills

JavaScript implements image carousel effects with titles_javascript skills

WBOY
Release: 2016-05-16 15:58:14
Original
1448 people have browsed it

Image carousels are widely used on some shopping websites. Here is a brief introduction to the implementation of image carousels.

As shown in the picture

CSS code:

 <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>
Copy after login

HTML code:

 <div class="body"><img src="ad-01.jpg"    style="max-width:90%"  style="max-width:90%" border="0" alt="JavaScript implements image carousel effects with titles_javascript skills" 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>
Copy after login

JS code:

 <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>
Copy after login

The above is all the content shared with you in this article. I hope you will like it.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template