原生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 相关文章推荐
15 个 JavaScript Web UI 库
May 19 Javascript
JSON 和 JavaScript eval使用说明
Jun 13 Javascript
JS控件的生命周期介绍
Oct 22 Javascript
获取表单控件原始(初始)值的方法
Aug 21 Javascript
js setTimeout()函数介绍及应用以倒计时为例
Dec 12 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
Oct 31 Javascript
jQuery实现不断闪烁文字的方法
May 15 Javascript
Backbone.js的Hello World程序实例
Jun 19 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
Apr 17 Javascript
原生JS实现N级菜单的代码
May 21 Javascript
js实现拖拽元素选择和删除
Aug 25 Javascript
微信小程序自定义modal弹窗组件的方法详解
Dec 20 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
mysq GBKl乱码
2006/11/28 PHP
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
php给一组指定关键词添加span标签的方法
2015/03/31 PHP
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
基于jquery打造的百分比动态色彩条插件
2012/09/19 Javascript
JS中的log对象获取以及debug的写法介绍
2014/03/03 Javascript
理解和运用JavaScript的闭包机制
2015/08/13 Javascript
JavaScript 数组some()和filter()的用法及区别
2016/05/20 Javascript
DIV+CSS+jQ实现省市联动可扩展
2016/06/22 Javascript
js实现表格筛选功能
2017/01/18 Javascript
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
使用vue如何构建一个自动建站项目
2018/02/05 Javascript
手把手教你vue-cli单页到多页应用的方法
2018/05/31 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
VUE兄弟组件传值操作实例分析
2019/10/26 Javascript
Python实现的简单万年历例子分享
2014/04/25 Python
详解python eval函数的妙用
2017/11/16 Python
浅谈Python中的作用域规则和闭包
2018/03/20 Python
Python数据结构之图的应用示例
2018/05/11 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
解决python执行不输出系统命令弹框的问题
2019/06/24 Python
Pytorch 高效使用GPU的操作
2020/06/27 Python
Python HTMLTestRunner如何下载生成报告
2020/09/04 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
英国潮流网站:END.(全球免邮)
2017/01/16 全球购物
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
Perfume’s Club意大利官网:欧洲美妆电商
2019/05/03 全球购物
英文请假条
2014/04/11 职场文书
中学生自我评价范文
2015/03/03 职场文书
运动与健康自我评价
2015/03/09 职场文书
中小企业员工手册范本
2015/05/14 职场文书
重阳节活动主持词
2015/07/04 职场文书
财产分割协议书
2016/03/22 职场文书