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 相关文章推荐
jquery自定义类似$.ajax()的方法实现代码
Aug 13 Javascript
JavaScript获取网页支持表单字符集的方法
Apr 02 Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
Dec 01 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
AngularJS中$interval的用法详解
Feb 02 Javascript
js中常用的Tab切换效果(推荐)
Aug 30 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
Sep 27 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
Dec 04 Javascript
详解如何实现一个简单的 vuex
Feb 10 Javascript
node的process以及child_process模块学习笔记
Mar 06 Javascript
微信小程序左滑删除功能开发案例详解
Nov 12 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字符转义相关函数小结(php下的转义字符串)
2007/04/12 PHP
php设计模式 Factory(工厂模式)
2011/06/26 PHP
关于PHP的curl开启问题探讨
2014/04/08 PHP
浅谈php和.net的区别
2014/09/28 PHP
微信支付扫码支付php版
2016/07/22 PHP
php数组和链表的区别总结
2019/09/20 PHP
Nigma vs Alliance BO5 第一场2.14
2021/03/10 DOTA
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
js常用排序实现代码
2010/12/28 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
2011/09/29 Javascript
NodeJs中的非阻塞方法介绍
2012/06/05 NodeJs
使用GruntJS链接与压缩多个JavaScript文件过程详解
2013/08/02 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
2014/06/05 Javascript
JavaScript编程中容易出BUG的几点小知识
2015/01/31 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
详解vue组件化开发-vuex状态管理库
2017/04/10 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
2017/06/04 Javascript
ejsExcel模板在Vue.js项目中的实际运用
2018/01/27 Javascript
11行JS代码制作二维码生成功能
2018/03/09 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
2018/12/24 Javascript
通过JS判断网页是否为手机打开
2020/10/28 Javascript
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
详解python中init方法和随机数方法
2019/03/13 Python
PyQt5实现简易电子词典
2019/06/25 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
iframe与window.onload如何使用详解
2020/05/07 HTML / CSS
华为python面试题
2016/05/03 面试题
思想政治教育专业个人求职信范文
2013/12/20 职场文书
效能监察建议书
2014/05/19 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
JavaScript实现复选框全选功能
2021/04/11 Javascript
python b站视频下载的五种版本
2021/05/27 Python
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS
mysql性能优化以及配置连接参数设置
2022/05/06 MySQL