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应该如何来设置改变按钮input的onclick事件
Dec 10 Javascript
调整小数的格式保留小数点后两位
May 14 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
Sep 14 Javascript
分享五个有用的jquery小技巧
Oct 08 Javascript
Javascript 计算字符串在localStorage中所占字节数
Oct 21 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
May 12 Javascript
jquery插件开发之选项卡制作详解
Aug 30 jQuery
关于vue中watch检测到不到对象属性的变化的解决方法
Feb 08 Javascript
详解从Vue-router到html5的pushState
Jul 21 Javascript
Vue中的v-for指令不起效果的解决方法
Sep 27 Javascript
使用JavaScript破解web
Sep 28 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
Oct 11 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中的Session对象如何使用
2015/09/25 PHP
PHPMailer发送邮件
2016/12/28 PHP
php中pcntl_fork创建子进程的方法实例
2019/03/14 PHP
js 金额文本框实现代码
2012/02/14 Javascript
在JavaScript中使用timer示例
2014/05/08 Javascript
javascript中this的四种用法
2015/05/11 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
2015/09/27 Javascript
js实现索引图片切换效果
2015/11/21 Javascript
js如何准确获取当前页面url网址信息
2020/09/13 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
jQuery validate验证插件使用详解
2016/05/11 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
2016/07/01 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
js鼠标跟随运动效果
2017/03/11 Javascript
详解用vue-cli来搭建vue项目和webpack
2017/04/20 Javascript
vue.js中父组件调用子组件的内部方法示例
2017/10/22 Javascript
vue router+vuex实现首页登录验证判断逻辑
2018/05/17 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
2019/04/29 Javascript
JavaScript中AOP的实现与应用
2019/05/06 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
python 将数据保存为excel的xls格式(实例讲解)
2018/05/03 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
Python实现RabbitMQ6种消息模型的示例代码
2020/03/30 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
python中关于数据类型的学习笔记
2020/07/19 Python
pymongo insert_many 批量插入的实例
2020/12/05 Python
selenium与xpath之获取指定位置的元素的实现
2021/01/26 Python
python实现图片转字符画
2021/02/19 Python
python 求两个向量的顺时针夹角操作
2021/03/04 Python
《囚绿记》教学反思
2014/03/01 职场文书
个人函授自我鉴定
2014/03/25 职场文书
关于十八大的演讲稿
2014/09/15 职场文书
干部考察材料范文
2014/12/24 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
pandas DataFrame.shift()函数的具体使用
2021/05/24 Python
解析原生JS getComputedStyle
2021/05/25 Javascript