原生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;
}

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

Javascript 相关文章推荐
angularJS 入门基础
Feb 09 Javascript
AngularJS通过$sce输出html的方法
Sep 22 Javascript
理解javascript中的闭包
Jan 11 Javascript
js事件冒泡与事件捕获详解
Feb 20 Javascript
微信小程序左右滑动切换页面详解及实例代码
Feb 28 Javascript
深入理解ES6中let和闭包
Feb 22 Javascript
关于TypeScript模块导入的那些事
Jun 12 Javascript
Angular服务Request异步请求的实例讲解
Aug 13 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
Dec 20 Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 Javascript
vue2.0 解决抽取公用js的问题
Jul 31 Javascript
Javascript实现打鼓效果
Jan 29 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
You might like
3.从实例开始
2006/10/09 PHP
PHP安装攻略:常见问题解答(三)
2006/10/09 PHP
php标签云的实现代码
2012/10/10 PHP
PHP导航下拉菜单的实现如此简单
2013/09/22 PHP
php禁止某ip或ip地址段访问的方法
2015/02/25 PHP
JavaScript 函数式编程的原理
2009/10/16 Javascript
js中数组(Array)的排序(sort)注意事项说明
2014/01/24 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
2015/09/27 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
2015/12/24 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
JavaScript中 ES6变量的结构赋值
2018/07/10 Javascript
详解webpack loader和plugin编写
2018/10/12 Javascript
vue如何实现自定义底部菜单栏
2019/07/01 Javascript
vue filter 完美时间日期格式的代码
2019/08/14 Javascript
jQuery实现轮播图源码
2019/10/23 jQuery
webpack proxy 使用(代理的使用)
2020/01/10 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
[01:34]完美“圣”典宣传片震撼发布,12.17与你不见不散
2016/12/16 DOTA
python搭建服务器实现两个Android客户端间收发消息
2018/04/12 Python
python 对给定可迭代集合统计出现频率,并排序的方法
2018/10/18 Python
Python设计模式之原型模式实例详解
2019/01/18 Python
python解压TAR文件至指定文件夹的实例
2019/06/10 Python
利用Python产生加密表和解密表的实现方法
2019/10/15 Python
解决pandas展示数据输出时列名不能对齐的问题
2019/11/18 Python
Python基于Tensor FLow的图像处理操作详解
2020/01/15 Python
Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统
2020/04/21 Python
Python3爬虫中Ajax的用法
2020/07/10 Python
python 用struct模块解决黏包问题
2020/11/07 Python
大学生自我鉴定书
2014/03/24 职场文书
公司证明怎么写
2014/09/22 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
2016年学校党支部创先争优活动总结
2016/04/05 职场文书
教你怎么用python实现字符串转日期
2021/05/24 Python
Python中的变量与常量
2021/11/11 Python