基于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 命名空间模式
Nov 01 Javascript
JS去除字符串两端空格的简单实例
Dec 27 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
Jan 29 Javascript
Javascript中拼接大量字符串的方法
Feb 05 Javascript
JS建造者模式基本用法实例分析
Jun 30 Javascript
不用一句js代码初始化组件
Jan 27 Javascript
jQuery实现的倒计时效果实例小结
Apr 16 Javascript
javascript设计模式之中介者模式学习笔记
Feb 15 Javascript
element ui table 增加筛选的方法示例
Nov 02 Javascript
vue 路由子组件created和mounted不起作用的解决方法
Nov 05 Javascript
微信小程序实现上传照片代码实例解析
Aug 04 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
Nov 05 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实现腾讯与百度坐标转换
2017/08/05 PHP
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
简述Jquery与DOM对象
2015/07/10 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
详解angular ui-grid之过滤器设置
2017/06/07 Javascript
通过构造函数实例化对象的方法
2017/06/28 Javascript
javascript 日期相减-在线教程(附代码)
2017/08/17 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
浅谈Angular文字折叠展开组件的原理分析
2017/11/24 Javascript
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
2019/01/05 jQuery
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
js实现石头剪刀布游戏
2020/10/11 Javascript
如何使用JS console.log()技巧提高工作效率
2020/10/14 Javascript
ES6字符串的扩展实例
2020/12/21 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
总结python实现父类调用两种方法的不同
2017/01/15 Python
详谈Python2.6和Python3.0中对除法操作的异同
2017/04/28 Python
python实现list元素按关键字相加减的方法示例
2017/06/09 Python
Python PyQt5标准对话框用法示例
2017/08/23 Python
django2 快速安装指南分享
2018/01/05 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
python全栈要学什么 python全栈学习路线
2019/06/28 Python
keras读取h5文件load_weights、load代码操作
2020/06/12 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
表彰先进的通报
2014/01/31 职场文书
电话客服工作职责
2014/07/27 职场文书
2014年仓管员工作总结
2014/11/18 职场文书
论文答辩开场白大全
2015/05/27 职场文书
SQL Server一个字符串拆分多行显示或者多行数据合并成一个字符串
2022/05/25 SQL Server