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 相关文章推荐
javascript 四则运算精度修正函数代码
May 31 Javascript
javascript 主动派发事件总结
Aug 09 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
Jan 13 Javascript
Vue.js系列之vue-router(上)(3)
Jan 03 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
Jun 30 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
JavaScript调用模式与this关键字绑定的关系
Apr 21 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
Jan 06 Javascript
详解Puppeteer前端自动化测试实践
Feb 21 Javascript
JS重学系列之聊聊new操作符
Mar 04 Javascript
vue项目中使用vue-layer弹框插件的方法
Mar 11 Javascript
JS实现刷新网页后之前浏览位置保持不变示例详解
Aug 14 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中的字符串函数
2006/11/24 PHP
PHP与MySQL开发的8个技巧小结
2010/12/17 PHP
php利用cookie实现访问次数统计代码
2011/05/19 PHP
9个实用的PHP代码片段分享
2015/01/22 PHP
通过实例解析PHP数据类型转换方法
2020/07/11 PHP
用Javascript 和 CSS 实现脚注(Footnote)效果
2009/09/09 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
Jquery之Bind方法参数传递与接收的三种方法
2014/06/24 Javascript
js简单工厂模式用法实例
2015/06/30 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
2015/09/14 Javascript
javascript中加var和不加var的区别 你真的懂吗
2016/01/06 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
jQuery.deferred对象使用详解
2016/03/18 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
2016/09/21 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
2016/10/19 Javascript
原生js实现新闻列表展开/收起全文功能
2017/01/20 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
2017/08/15 jQuery
vue axios请求拦截实例代码
2018/03/29 Javascript
react ant Design手动设置表单的值操作
2020/10/31 Javascript
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
Python实现App自动签到领取积分功能
2018/09/29 Python
详解PANDAS 数据合并与重塑(join/merge篇)
2019/07/09 Python
python argparser的具体使用
2019/11/10 Python
pandas按条件筛选数据的实现
2021/02/20 Python
迷你唐卡软皮鞋:Minnetonka Moccasin
2018/05/01 全球购物
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
珍惜资源保护环境的建议书
2014/05/14 职场文书
物业管理专业自荐信
2014/07/01 职场文书
怎么写工作检讨书
2014/11/16 职场文书
公务员考察材料
2014/12/23 职场文书
2014年团支部年度工作总结
2014/12/24 职场文书
课外活动实习计划
2015/01/19 职场文书
世界红十字日活动总结
2015/02/10 职场文书
公司员工违纪检讨书
2015/05/05 职场文书