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

原生js编写焦点图效果

Posted in Javascript onDecember 08, 2016

自己用原生js写的简单焦点图，算是对原生js初步运用。

原生js编写焦点图效果

html部分

<div class="focusPicture">
          <section class="mPhoto" id="mPhoto">
            <img src="images/20161021/b_5809b93b66d18.jpg"/>
          </section><!-- 主要的大图 -->
          <section class="oPhoto">
            <div class="imgWrap">
              <section class="on">
                <img src="images/20161021/b_5809b93b66d18.jpg"/>
              </section>
              <section>
                <img src="images/20161021/b_5809b96c4da53.jpg"/>
              </section>
              <section>
                <img src="images/20161021/b_5809b9bea39c4.jpg"/>
              </section>
              <section>
                <img src="images/20161021/b_5809ba288384e.jpg"/>
              </section>
              <section>
                <img src="images/20161021/b_5809bae42fa81.jpg"/>
              </section>
              <section>
                <img src="images/20161021/b_5809ba288384e.jpg"/>
              </section>
              <section>
                <img src="images/20161021/b_5809bb3da0bbc.jpg"/>
              </section>
            </div>
          </section><!-- 其他的小图 -->
          <section class="prevNext">
            <div class="prev">
              <i></i>
            </div><!-- 上一张 -->
            <div class="next">
              <i></i>
            </div><!-- 下一张 -->
          </section><!-- 上下翻页 -->
</div><!-- 焦点图区 -->

js部分

window.onload = function(){


 /*焦点图特效*/
 var mPhoto = document.getElementById("mPhoto");
 var imgWrap = document.getElementsByClassName("imgWrap")[0];
 var wrapSize = 4; /*图片容器最大显示图片数*/
 if(imgWrap.getElementsByTagName("section").length>wrapSize){
  imgWrap.innerHTML = imgWrap.innerHTML+imgWrap.innerHTML;
 }
 
 var oImages = imgWrap.getElementsByTagName("section");
 for(var i = 0 ; i<oImages.length; i++)
 {
  oImages[i].onmouseover = function()
  {
   for(var j = 0 ; j<oImages.length; j++)
   {
    removeClass(oImages[j],"on");
   }
   var imgSrc = this.getElementsByTagName("img")[0].src;
   addClass(this,"on");
   mPhoto.getElementsByTagName("img")[0].src = imgSrc;
  }
 }


 /*上下翻页容器*/
 var oPrevNext = document.getElementsByClassName("prevNext")[0];
 var oPrev = oPrevNext.getElementsByClassName("prev")[0];
 var oNext = oPrevNext.getElementsByClassName("next")[0];
 var oImageHeight = oImages[0].getElementsByTagName("img")[0].height||0;
 var oPositionTop = imgWrap.offsetTop;
 var imgIndex = 0;
 
 if(oImages.length>wrapSize*2)
 {
  oPrev.style.display = "block";
  oNext.style.display = "block";
 }
 
 /*上一页*/
 oPrev.onclick=function()
 {
  imgIndex-=1;
  if(imgIndex<=0){
   imgIndex = 6;
  }


  var oTop = imgIndex*(oImageHeight+8);
  imgWrap.style.top = -oTop+"px";
  
  /*获取当前图片的索引*/
  for(var i = 0 ; i<oImages.length; i++)
  {
   var oBol = hasClass(oImages[i],"on")||false;
   if(oBol){
    var index = oIndex(oImages[i],oImages);
    index=index-1;
    if(imgIndex==6){
     index = 6;
    }
    for(var j = 0 ; j<oImages.length; j++)
    {/*清除其他的图片on样式*/
     removeClass(oImages[j],"on");
    }
    addClass(oImages[index],"on");
    var imgSrc = oImages[index].getElementsByTagName("img")[0].src;
    mPhoto.getElementsByTagName("img")[0].src = imgSrc;


    return false;
   }
  }
 }
 
 /*下一页*/
 oNext.onclick = function()
 {
  imgIndex+=1;
  if(imgIndex>=6){
   imgIndex = 0;
  }
  var oTop = imgIndex*(oImageHeight+8);
  imgWrap.style.top = -oTop+"px";
  
  /*获取当前图片的索引*/
  for(var i = 0 ; i<oImages.length; i++)
  {
   var oBol = hasClass(oImages[i],"on")||false;
   if(oBol){
    var index = oIndex(oImages[i],oImages);
    index=index+1;
    if(imgIndex==0){
     index = 1;
    }
    for(var j = 0 ; j<oImages.length; j++)
    {/*清除其他的图片on样式*/
     removeClass(oImages[j],"on");
    }
    addClass(oImages[index],"on");
    var imgSrc = oImages[index].getElementsByTagName("img")[0].src;
    mPhoto.getElementsByTagName("img")[0].src = imgSrc;


    return false;
   }
  }


 }
}


function hasClass(element,cName)
{//检查class是否存在
 return !!element.className.match(new RegExp('(\\s|^)'+cName+'(\\s|$)'));
}
function addClass(element,cName)
{//添加一个class
 if(!hasClass(element,cName))
 {
  element.className +=' '+cName;
 }
}
function removeClass(element,cName)
{//移除一个class
 if(hasClass(element,cName))
 {
  element.className = element.className.replace(new RegExp('(\\s|^)'+cName+'(\\s|$)'),' ');
 }
}


function oIndex(current, obj)
{/*获取索引*/
 for (var i = 0, length = obj.length; i<length; i++)
 { 
  if (obj[i] == current)
  { 
   return i; 
  } 
 } 
}

css部分

.productInfo .focusPicture{
 width: 698px;
 float: left;
 position: relative;
 border-right: 1px solid #d9cdb4;
}
.productInfo .focusPicture .mPhoto{
 width: 542px;
 height: 360px;


}
.productInfo .focusPicture .mPhoto img{
 width: 100%;
 height: 100%;
}


.productInfo .focusPicture .oPhoto{
 width: 128px;
 height: 352px;
 position: absolute;
 right: 14px;
 top: 4px;
 overflow: hidden;


}


.productInfo .oPhoto div{
 width: 128px;
 position: absolute;
 left:0;
 top:0;
 -webkit-transition: top .2s ease-out;
 -moz-transition: top .2s ease-out;
 transition: top .2s ease-out; 
}
.productInfo .oPhoto section{
 height: 78px;
 margin: 8px 0;
 position: relative;
 cursor: pointer;
}
.productInfo .oPhoto section::before {
 content: "";
 display: block;
 width: 100%;
 height: 100%;
 background-color: rgba(255,255,255,.42);
 position: absolute;
 left: 0;
 top: 0;
}


.productInfo .oPhoto section.on::before{
 display: none;
}


.productInfo .focusPicture .oPhoto img{
 width: 100%;
 height: 100%;
}


.productInfo .focusPicture .prevNext{
 width: 32px;
 height: 32px;
 position: absolute;
 top: -4px;
 right: 62px;
}


.productInfo .prevNext div.prev,
.productInfo .prevNext div.next{
 width: 32px;
 height: 32px;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 border-radius: 50%;
 background-color: #fff;
 position: absolute;
 left: 0;
 -webkit-transition: all .25s;
 -moz-transition: all .25s;
 transition: all .25s;
 display: none;
 cursor: pointer;
}
.productInfo .prevNext div.prev{
 top: 0;
 box-shadow: 0 -2px 4px rgba(0,0,0,.24);


}
.productInfo .prevNext div.next{
 top: 336px;
 box-shadow: 0 2px 4px rgba(0,0,0,.24);
}


.productInfo .prevNext div.prev:hover{
 box-shadow: 2px -2px 3px rgba(0,0,0,.24);


}
.productInfo .prevNext div.next:hover{
 box-shadow: -2px 2px 3px rgba(0,0,0,.24);
}


.productInfo .prevNext div.prev i,
.productInfo .prevNext div.next i{
 width: 16px;
 height: 16px;
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 margin: auto;
 cursor: pointer;
}
.productInfo .prevNext div.prev i{
 background: url(../images/arrows-icon.png) 0 -16px no-repeat;
 background-size: 48px 32px;
 bottom: 2px;
}


.productInfo .prevNext div.next i{
 background: url(../images/arrows-icon.png) 0 0 no-repeat;
 background-size: 48px 32px;
 top: 2px;
}


.productInfo .prevNext div.prev:hover i,
.productInfo .prevNext div.next:hover i{
 -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 transform: scale(1.1);
}


.productInfo .prevNext div.prev:hover i{
 background: url(../images/arrows-icon.png) -16px -16px no-repeat;
 background-size: 48px 32px;
}


.productInfo .prevNext div.next:hover i{
 background: url(../images/arrows-icon.png) -16px 0px no-repeat;
 background-size: 48px 32px;
}


.productInfo .prevNext div.prev:active i{
 background: url(../images/arrows-icon.png) -32px -16px no-repeat;
 background-size: 48px 32px;
}


.productInfo .prevNext div.next:active i{
 background: url(../images/arrows-icon.png) -32px 0px no-repeat;
 background-size: 48px 32px;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

原生js编写焦点图效果

- Author -

不羁的狂鱼

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

Javascript 相关文章推荐
getComputedStyle与currentStyle获取样式(style/class)
Mar 19 Javascript
jQuery学习笔记之jQuery动画效果
Sep 09 Javascript
javascript操作符&quot;!~&quot;详解
Feb 10 Javascript
JavaScript 中有关数组对象的方法(详解)
Aug 15 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
Aug 15 Javascript
jQuery事件处理的特征(事件命名机制)
Aug 23 Javascript
使用原生js写ajax实例(推荐)
May 31 Javascript
JS鼠标滚动分页效果示例
Jul 05 Javascript
react中使用swiper的具体方法
May 15 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
Dec 10 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
Dec 08 #Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
Dec 08 #Javascript
Vue自定义指令介绍(2)
Dec 08 #Javascript
JS实现页面进入和返回定位到具体位置
Dec 08 #Javascript
解析利用javascript如何判断一个数为素数
Dec 08 #Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
Dec 08 #Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
Dec 08 #Javascript
Windows server 2019(5) 远程登录(2) Windows server 2008(5) https(7) 动静分离(1) IIS(7) Windows server 2016(6) http(6) Telnet(1) 远程控制(1)
You might like
BBS(php &amp; mysql)完整版(三)
2006/10/09 PHP
解决文件名解压后乱码的问题 将文件名进行转码的代码
2012/01/10 PHP
浅析PHP 按位与或 (^ 、&amp;)
2013/06/21 PHP
PHP中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
PHP模拟QQ登录的方法
2015/07/29 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
基于JQuery制作的产品广告效果
2010/12/08 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
2012/12/27 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
jQuery操作DOM之获取表单控件的值
2015/01/23 Javascript
浅谈jQuery的offset()方法及示例分享
2015/07/17 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
2016/11/03 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
vue2 前端搜索实现示例
2018/02/26 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
2018/11/12 jQuery
详解服务端预渲染之Nuxt（介绍篇）
2019/04/07 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
2020/11/11 Javascript
Python中正则表达式的详细教程
2015/04/30 Python
python按综合、销量排序抓取100页的淘宝商品列表信息
2018/02/24 Python
python3对拉勾数据进行可视化分析的方法详解
2019/04/03 Python
Python3.5 Pandas模块之Series用法实例分析
2019/04/23 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
纯CSS3实现绘制各种图形实现代码详细整理
2012/12/26 HTML / CSS
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
2013/01/06 HTML / CSS
美国女孩服装购物网站：Justice
2017/03/04 全球购物
Watchshop德国：欧洲在线手表No.1
2019/06/20 全球购物
西部世纪面试题
2014/12/05 面试题
密封类可以有虚函数吗
2014/08/11 面试题
教师个人读书活动总结
2014/07/08 职场文书
安全施工责任书
2014/08/25 职场文书
物业保洁员管理制度
2015/08/05 职场文书
Apache Calcite 实现方言转换的代码
2021/04/24 Servers
Python中time标准库的使用教程
2022/04/13 Python
SQL Server数据库备份和恢复数据库的全过程
2022/06/14 SQL Server