基于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 相关文章推荐
JS 各种网页尺寸判断实例方法
Apr 18 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
Aug 13 Javascript
showModelDialog弹出文件下载窗口的使用示例
Nov 19 Javascript
js传中文参数controller里获取参数乱码问题解决方法
Jan 03 Javascript
JS实现静止元素自动移动示例
Apr 14 Javascript
javascript校验价格合法性实例(必须输入2位小数)
May 05 Javascript
JavaScript中的逻辑判断符&amp;&amp;、||与!介绍
Dec 31 Javascript
利用Angularjs实现幻灯片效果
Sep 07 Javascript
js实现简单的选项卡效果
Feb 23 Javascript
使用travis-ci如何持续部署node.js应用详解
Jul 30 Javascript
利用JS如何计算字符串所占字节数示例代码
Sep 13 Javascript
node.js部署之启动后台运行forever的方法
May 23 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
建立动态的WML站点(三)
2006/10/09 PHP
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
php实现发送微信模板消息的方法
2015/03/07 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
javascript中的继承实例代码
2011/04/27 Javascript
jQuery代码优化 选择符篇
2011/11/01 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
2013/12/29 Javascript
用js正确判断用户名cookie是否存在的方法
2014/01/28 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
easyui validatebox验证
2016/04/29 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
2016/10/13 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
js获取当前页的URL与window.location.href简单方法
2017/02/13 Javascript
Kotlin学习第一步 kotlin语法特性
2017/05/25 Javascript
seajs中模块依赖的加载处理实例分析
2017/10/10 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
vue实现同一个页面可以有多个router-view的方法
2018/09/20 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
基于vue hash模式微信分享#号的解决
2020/09/07 Javascript
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
Python中Django框架下的staticfiles使用简介
2015/05/30 Python
Python数据分析之双色球基于线性回归算法预测下期中奖结果示例
2018/02/08 Python
Python中顺序表原理与实现方法详解
2019/12/03 Python
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
猫途鹰:全球领先的旅游点评社区
2017/04/07 全球购物
享誉全球的多元化时尚精品购物平台:Farfetch发发奇(支持中文)
2017/08/08 全球购物
CAT鞋加拿大官网:CAT Footwear加拿大
2020/08/05 全球购物
通信工程专业求职信
2014/06/04 职场文书
比赛口号大全
2014/06/10 职场文书
授权委托书
2015/01/28 职场文书
永不妥协观后感
2015/06/10 职场文书
幽默口才训练经典句子(48句)
2019/08/19 职场文书
SQL Server内存机制浅探
2022/04/06 SQL Server