基于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如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
Apr 20 Javascript
javascript权威指南 学习笔记之null和undefined
Sep 25 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
Dec 27 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 Javascript
JQuery validate插件Remote用法大全
May 15 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
Sep 02 Javascript
详解Angular的8个主要构造块
Jun 20 Javascript
vue配置请求本地json数据的方法
Apr 11 Javascript
vue 验证两次输入的密码是否一致的方法示例
Sep 29 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
微信小程序实现点赞业务
Feb 10 Javascript
LayUI+Shiro实现动态菜单并记住菜单收展的示例
May 06 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 和 XML: 使用expat函数(三)
2006/10/09 PHP
php使用PDO从数据库表中读取数据的实现方法(必看)
2017/06/02 PHP
PHP中OpenSSL加密问题整理
2017/12/14 PHP
JS获取父节点方法
2009/08/20 Javascript
javascript调试说明
2010/06/07 Javascript
Jquery中删除元素的实现代码
2011/12/29 Javascript
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
基于jQuery实现火焰灯效果导航菜单
2017/01/04 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
webpack多页面开发实践
2017/12/18 Javascript
Javascript Promise用法详解
2018/05/10 Javascript
详解使用JWT实现单点登录(完全跨域方案)
2019/08/02 Javascript
JavaScript 实现同时选取多个时间段的方法
2019/10/17 Javascript
Jquery让form表单异步提交代码实现
2019/11/14 jQuery
ES6实现图片切换特效代码
2020/01/14 Javascript
基于PHP pthreads实现多线程代码实例
2020/06/24 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
跟老齐学Python之for循环语句
2014/10/02 Python
python 爬虫出现403禁止访问错误详解
2017/03/11 Python
python中abs&amp;map&amp;reduce简介
2018/02/20 Python
pytorch构建网络模型的4种方法
2018/04/13 Python
Python实现的计算器功能示例
2018/04/26 Python
Python实现繁?转为简体的方法示例
2018/12/18 Python
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
2019/01/23 HTML / CSS
使用html5实现表格实现标题合并的实例代码
2019/05/13 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
深深扎根运动世界的生活品牌:Tillys
2017/10/30 全球购物
The North Face北面法国官网:美国著名户外品牌
2019/11/01 全球购物
《走一步再走一步》教学反思
2014/02/15 职场文书
抗震救灾标语
2014/06/26 职场文书
出资证明书范本(标准版)
2014/09/24 职场文书
机械生产实习心得体会
2016/01/22 职场文书
民事调解协议书
2016/03/21 职场文书
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript