基于javascript实现样式清新图片轮播特效


Posted in Javascript onMarch 30, 2016

本文实例为大家分享了javascript实现图片轮播特效,供大家参考,具体内容如下

一、实现效果

基于javascript实现样式清新图片轮播特效

如上图:

1、图片自动依次轮换,每轮换到一张图片,下面对应的小图标出现红色边框,并显示对应的图片名称

2、鼠标放到大图片上面的时,图片停止轮换,一直显示当前图片;鼠标移开后图片继续轮换

3、鼠标移到小图标上时,大图片区域会显示对应的大图;鼠标移开则从当前图片开始继续轮换

二、代码

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>带小图标的JS图片轮换</title>
 <style type="text/css">
  *{
   margin: 0px;
   padding: 0px;
  }
  #content{
   width: 700px;
   height: 538px;
   margin: 0px auto; /*使所有内容居中*/
   border: solid #F0F0F0;
  }

  /*定义下面小图标处样式*/
  #nav1 table{
   width: 100%;
   height: 35px;
   margin-top: -4px;
  }
  #nav1 td{
   width: 35px;
   height: 35px;
   text-align: center; /*文字居中*/
   color: #ffffff;
  }
  #text{

  }
  #_text{
   width: 100%;
   height: 100%;
   background-color: #F0F0F0;
   border: none;
   text-align: center;
   font-size: 18px;
   color: #000000;
   font-weight: bold;
  }
 </style>
</head>
<body onload="changeImg()">
 <div id="content">
  <div id="images">
   <img id="_photoes" src="../images/textPhoto/1.jpg" height="500px" width="700px" onmouseover="over1()" onmouseout="out1()">
  </div>
  <div id="nav1">
   <table border="0">
    <tr>
     <td id="text" bgcolor="#F0F0F0" colspan="15"><input type="text" id="_text" readonly></td>
     <td id="img1" class="sImg" bgcolor="#db7093" onmouseover="over2(1)" onmouseout="out2(1)">1</td>
     <td id="img2" class="sImg" bgcolor="#da70d6" onmouseover="over2(2)" onmouseout="out2(2)">2</td>
     <td id="img3" class="sImg" bgcolor="#9acd32" onmouseover="over2(3)" onmouseout="out2(3)">3</td>
     <td id="img4" class="sImg" bgcolor="#adff2f" onmouseover="over2(4)" onmouseout="out2(4)">4</td>
     <td id="img5" class="sImg" bgcolor="#00bfff" onmouseover="over2(5)" onmouseout="out2(5)">5</td>
    </tr>
   </table>
  </div>
 </div>

 <script type="text/javascript">
  //将轮换的大图片放入数组中
  var arr = new Array();
  arr[0] = "../images/textPhoto/1.jpg";
  arr[1] = "../images/textPhoto/2.jpg";
  arr[2] = "../images/textPhoto/3.jpg";
  arr[3] = "../images/textPhoto/4.jpg";
  arr[4] = "../images/textPhoto/5.jpg";

  //将input区域变换的文字放在数组里
  var text = new Array();
  text[0] = "焦点图1";
  text[1] = "焦点图2";
  text[2] = "焦点图3";
  text[3] = "焦点图4";
  text[4] = "焦点图5";

  var smallImg = document.getElementsByClassName("sImg"); //将页面上所有小图片存放在一个数组

  var num = 0;
  function changeImg() {
   document.getElementById("_photoes").src = arr[num];
   document.getElementById("_text").value = text[num];
   //当前小图标增加边框样式
   for(var i=0;i<arr.length;i++) {
    if(i==num) smallImg[num].style.border = "red solid"; //大图标对应的小图标增加边框样式
    else smallImg[i].style.border = "none";
   }
   if (num == arr.length - 1) num = 0; //如果显示的是最后一张图片,则图片序号变为第一张的序号
   else num += 1; //图片序号加一
  }

  var setID = setInterval("changeImg()",1000); //这样写任然会不断调用changeImg()函数

  /*当鼠标滑到大图标上时*/
  function over1() {
   clearInterval(setID); //图片停止轮换
//   smallImg[n-1].style.border = "red solid";
  }

  /*当鼠标离开大图标时*/
  function out1() {
   setID = setInterval("changeImg()",1000);  //图片继续轮换
//   smallImg[n-1].style.border = "none"; //大图标对应的小图标边框样式取消
  }

  /*当鼠标滑到小图标上时*/
  function over2(n) {
   document.getElementById("_photoes").src = arr[n-1]; //只要鼠标滑到小图标上,大图区域就显示对应的图片
   document.getElementById("_text").value = text[n-1];
   clearInterval(setID); //图片停止轮换
   //当前小图标增加边框样式
   for(var i=0;i<arr.length;i++) {
    if(i==n-1) smallImg[n-1].style.border = "red solid";
    else smallImg[i].style.border = "none";
   }
  }

  /*当鼠标离开小图标时*/
  function out2(n) {
   if(n!=arr.length)
    num = n; //从当前图片开始轮换
   else num = 0;
   setID = setInterval("changeImg()",1000);  //图片继续轮换
//   smallImg[n-1].style.border = "none"; //小图标边框样式取消
  }
 </script>
</body>
</html>

三、多张图片轮换调试笔记

js源代码:

//实现几张图片的轮换
var num = 0;  //显示的图片序号,刚开始时是第一张图片
function changeImg1() {
  var arr = new Array();
  arr[0]="../images/hao123/7.jpg";
  arr[1]="../images/hao123/8.jpg";
  arr[2]="../images/hao123/9.jpg";
  var photo = document.getElementById("topPhoto");
  if (num == arr.length - 1) num = 0;  //如果显示的是最后一张图片,则图片序号变为第一张的序号
  else num += 1;  //图片序号加一
  photo.src = arr[num];
}
setInterval("changeImg1()",5000);  //每隔5000毫秒调用一次changImg1()函数

HTML代码:

<img src="../images/hao123/7.jpg" id="topPhoto">

在使用的时候最好定义一下图片的样式,把图片的长宽都统一,这样图片动态显示的效果会更好一些。

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript 文档的编码问题解决
Mar 01 Javascript
jquery获取input表单值的代码
Apr 19 Javascript
js采用map取到id集合组并且实现点击一行选中一行
Dec 16 Javascript
javascript实现根据3原色制作颜色选择器的方法
Jul 17 Javascript
jQuery+CSS3实现3D立方体旋转效果
Nov 10 Javascript
javascript类型系统_正则表达式RegExp类型详解
Jun 24 Javascript
JS获取鼠标相对位置的方法
Sep 20 Javascript
如何处理JSON中的特殊字符
Nov 30 Javascript
jQuery中extend函数简单用法示例
Oct 11 jQuery
vue 详情跳转至列表页实现列表页缓存
Mar 27 Javascript
深入webpack打包原理及loader和plugin的实现
May 06 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 Javascript
网页中JS函数自动执行常用三种方法
Mar 30 #Javascript
Jquery轮播效果实现过程解析
Mar 30 #Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
Mar 30 #Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 #Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
Mar 30 #Javascript
JavaScript 不支持 indexof 该如何解决
Mar 30 #Javascript
React.js入门学习第一篇
Mar 30 #Javascript
You might like
PHP编程之高级技巧——利用Mysql函数
2006/10/09 PHP
PHP中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
PHP iconv 解决utf-8和gb2312编码转换问题
2010/04/12 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
PHP强制转化的形式整理
2020/05/22 PHP
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
2013/08/12 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
JavaScript实战(原生range和自定义特效)简单实例
2016/08/21 Javascript
关于JavaScript和jQuery的类型判断详解
2016/10/08 Javascript
微信小程序 支付简单实例及注意事项
2017/01/06 Javascript
JS实现双击内容变为可编辑状态
2017/03/03 Javascript
ReactNative列表ListView的用法
2017/08/02 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
Bootstrap table表格初始化表格数据的方法
2018/07/25 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
[02:44]DOTA2英雄基础教程 钢背兽
2013/12/19 DOTA
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
python+ffmpeg视频并发直播压力测试
2018/03/06 Python
python数据批量写入ScrolledText的优化方法
2018/10/11 Python
基于Python的PIL库学习详解
2019/05/10 Python
python操作cfg配置文件方式
2019/12/22 Python
Python-openCV开运算实例
2020/07/05 Python
Django缓存Cache使用详解
2020/11/30 Python
Matplotlib配色之Colormap详解
2021/01/05 Python
HTML5 canvas基本绘图之绘制线段
2016/06/27 HTML / CSS
集团公司党的群众路线教育实践活动工作总结
2014/03/03 职场文书
2014年党支部书记工作总结
2014/12/04 职场文书
2014年绿化工作总结
2014/12/09 职场文书
汤姆叔叔的小屋读书笔记
2015/06/30 职场文书
Spring Boot mybatis-config 和 log4j 输出sql 日志的方式
2021/07/26 Java/Android
改造DE1103三步曲
2022/04/07 无线电
MySQL数据库优化之通过索引解决SQL性能问题
2022/04/10 MySQL
Win11 25163.1010更新补丁KB5016904推送,测试服务验证管道(附更新修复汇总)
2022/07/23 数码科技