首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于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实现样式清新图片轮播特效

- Author -

*茉莉花开*

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
URI、URL和URN之间的区别与联系
Dec 20 Javascript
javascript document.images实例
May 27 Javascript
javascript+xml实现简单图片轮换(只支持IE)
Dec 23 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
Dec 28 Javascript
使用js实现关闭js弹出层的窗口
Feb 10 Javascript
js函数内变量的作用域分析
Jan 12 Javascript
javascript中createElement的两种创建方式
May 14 Javascript
简介AngularJS中使用factory和service的方法
Jun 17 Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 Javascript
解决vue跨域axios异步通信问题
Apr 17 Javascript
JS常见内存泄漏及解决方案解析
May 30 Javascript
Angular性能优化之第三方组件和懒加载技术
May 10 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
绝对定位(1) geoserver(1) 相对定位(1) props(1) ECharts(3) lua(3) mixin(1) ref(1) 匹配(1) postcss-px2rem(1)
You might like
php将日期格式转换成xx天前的格式
2015/04/16 PHP
JavaScript操作XML实例代码（获取新闻标题并分页，并分页）
2010/05/25 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
2013/12/27 Javascript
HTML页面登录时的JS验证方法
2014/05/28 Javascript
jQuery 和 CSS 的文本特效插件集锦
2014/12/12 Javascript
angular简介和其特点介绍
2015/01/29 Javascript
jquery让指定的元素闪烁显示的方法
2015/03/17 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
js表单中选择框值的获取及表单的序列化
2015/12/17 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
2020/12/01 Javascript
js实现3d悬浮效果
2017/02/16 Javascript
ES6正则表达式的一些新功能总结
2017/05/09 Javascript
详解js静态资源文件请求的处理
2017/08/01 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
2017/10/11 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
微信小程序使用gitee进行版本管理
2018/09/20 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
JavaScript动态添加数据到表单并提交的几种方式
2019/06/26 Javascript
vue h5移动端禁止缩放代码
2019/10/28 Javascript
js实现简单抽奖功能
2020/11/24 Javascript
编写Python脚本抓取网络小说来制作自己的阅读器
2015/08/20 Python
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
解决Python下imread,imwrite不支持中文的问题
2018/12/05 Python
python 多维高斯分布数据生成方式
2019/12/09 Python
Python日志logging模块功能与用法详解
2020/04/09 Python
Python astype(np.float)函数使用方法解析
2020/06/08 Python
带你学习Python如何实现回归树模型
2020/07/16 Python
Python存储读取HDF5文件代码解析
2020/11/25 Python
基于IE10/HTML5 开发
2013/04/22 HTML / CSS
《我不是最弱小的》教学反思
2014/02/23 职场文书
项目负责人任命书
2014/06/04 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
2015年基层党建工作总结
2015/05/14 职场文书