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

 更新时间:2015年05月20日 08:50:15   投稿:hebedich  
这里给大家分享的是4屏带标题和文字描述的js图片轮播代码,完美兼容IE6。图片滚动切换,鼠标放到数字选项卡即可切换图片。点击图片跳转到指定页面,有需要的小伙伴可以参考下。

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

如图

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>

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

相关文章

  • javascript的23种设计模式示例总结大全

    javascript的23种设计模式示例总结大全

    这篇文章主要为大家介绍了javascript的23种设计模式的总结大全,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • 封装了一个自动生成渐变字的JS类(clip)

    封装了一个自动生成渐变字的JS类(clip)

    之前做过一个生成渐变字体的简单演示今天闲着没事就把这个功能完善了,把JS代码封装成一个类,载入页面就可以使相应的HTML元素内部的字体产生渐变色。
    2008-11-11
  • GWT中复制到剪贴板 js+flash实现复制 兼容性比较好

    GWT中复制到剪贴板 js+flash实现复制 兼容性比较好

    今天看到有个Google Code的项目,叫ZeroClipboard,大意是使用flash作为媒介,将内容复制到剪贴板。这比用纯javascript好,因为不同浏览器会出于安全的原因,有不同反应,例如IE会给出提示,有的浏览器不支持复制到剪贴板。
    2010-03-03
  • Js参数RSA加密传输之jsencrypt.js的使用

    Js参数RSA加密传输之jsencrypt.js的使用

    这篇文章主要介绍了Js参数RSA加密传输之jsencrypt.js的使用,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • window.open()详解及浏览器兼容性问题示例探讨

    window.open()详解及浏览器兼容性问题示例探讨

    这篇文章主要介绍了window.open()的使用及浏览器兼容性问题方面的知识,感兴趣的朋友可以参考下
    2014-05-05
  • Bootstrap面板使用方法

    Bootstrap面板使用方法

    面板样式除了内容之外,还有一个面板头部可以添加标题,让我们通过这篇文章看看Bootstrap面板样式的使用方法
    2017-01-01
  • javascript事件冒泡详解和捕获、阻止方法

    javascript事件冒泡详解和捕获、阻止方法

    虽然精通jquery,但对它的原型javascript却不是很了解,最近在学习javascript中遇到了一些困难,比如冒泡和捕获,很多次被提到,但又不知究竟应用在何处。找到了一些好文章解惑,在这里分享给大家
    2014-04-04
  • JavaScript中的函数重载深入理解

    JavaScript中的函数重载深入理解

    将函数名作为指向函数的指针,有助于理解为什么ECMAScript中没有函数重载的概念,需要的朋友可以参考下
    2014-08-08
  • CSS(js)限制页面显示的文本字符长度

    CSS(js)限制页面显示的文本字符长度

    限制页面显示的字符长度,一直被众多网友倾睬,本人也是一fans利用闲暇时间搜集整理了一些实用技巧,需要了解的朋友可以参考下
    2012-12-12
  • JS全局变量和局部变量最新解析

    JS全局变量和局部变量最新解析

    这篇文章主要介绍了JS全局变量和局部变量最新解析的相关知识,本文给给大家补充js删除局部变量的代码,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-06-06

最新评论