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


Posted in Javascript onMay 20, 2015

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

如图

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

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>

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

Javascript 相关文章推荐
两个DIV等高的JS的实现代码
Dec 23 Javascript
JQuery 学习笔记 选择器之一
Jul 23 Javascript
JavaScript 异步调用框架 (Part 2 - 用例设计)
Aug 03 Javascript
五段实用的js高级技巧
Dec 20 Javascript
SuperSlide2实现图片滚动特效
Jun 20 Javascript
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 Javascript
jQuery源码解读之removeAttr()方法分析
Feb 20 Javascript
js表单中选择框值的获取及表单的序列化
Dec 17 Javascript
浅谈js键盘事件全面控制
Dec 01 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
Apr 20 Javascript
基于对象合并功能的实现示例
Oct 10 Javascript
JavaScript实现秒杀时钟倒计时
Sep 29 Javascript
手机端页面rem宽度自适应脚本
May 20 #Javascript
jquery实现弹出层效果实例
May 19 #Javascript
jQuery结合ajax实现动态加载文本内容
May 19 #Javascript
jQuery实现在列表的首行添加数据
May 19 #Javascript
jQuery中 prop() attr()使用详解
May 19 #Javascript
javascript实现获取服务器时间
May 19 #Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
May 19 #Javascript
You might like
php学习之数据类型之间的转换介绍
2011/06/09 PHP
php编写简单的文章发布程序
2015/06/18 PHP
php+js实现百度地图多点标注的方法
2016/11/30 PHP
php实现留言板功能
2017/03/05 PHP
php如何修改SESSION的生存存储时间的实例代码
2017/07/05 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
tp5实现微信小程序多图片上传到服务器功能
2018/07/16 PHP
php实例化一个类的具体方法
2019/09/19 PHP
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
2008/08/14 Javascript
关于html+ashx开发中几个问题的解决方法
2011/07/18 Javascript
js特殊字符转义介绍
2013/11/05 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
2015/03/27 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
Bootstarp风格的toggle效果分享
2016/02/23 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
node.js中实现kindEditor图片上传功能的方法教程
2017/04/26 Javascript
js实现水平滚动菜单导航
2017/07/21 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
Python中用Decorator来简化元编程的教程
2015/04/13 Python
Python中用max()方法求最大值的介绍
2015/05/15 Python
python 调用HBase的简单实例
2016/12/18 Python
python itchat实现调用微信接口的第三方模块方法
2019/06/11 Python
用scikit-learn和pandas学习线性回归的方法
2019/06/21 Python
python3实现mysql导出excel的方法
2019/07/31 Python
Python3如何判断三角形的类型
2020/04/12 Python
CSS3的文字阴影—text-shadow的使用方法
2012/12/25 HTML / CSS
HTML5微信播放全屏问题的解决方法
2017/03/09 HTML / CSS
乌克兰最大的家用电器和电子产品连锁店:Eldorado
2019/10/02 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
理发店策划方案
2014/06/05 职场文书
大学毕业生个人自荐书
2014/07/02 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
2015年教务工作总结
2015/05/23 职场文书
Django分页器的用法你都了解吗
2021/05/26 Python
MyBatis在注解上使用动态SQL方式(@select使用if)
2022/07/07 Java/Android