js图片轮换效果

最新推荐文章于 2022-12-03 23:29:34 发布

EleanPing

最新推荐文章于 2022-12-03 23:29:34 发布

阅读量1k

点赞数

分类专栏： web前端开发-js特效文章标签： HTML JavaScript 图片

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/u010433173/article/details/8867251

版权

web前端开发-js特效专栏收录该内容

5 篇文章 0 订阅

订阅专栏

html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js焦点图片层叠轮播切换滚动</title>
<meta name="description" content="js焦点图片层叠样式自动轮播切换滚动，设置左右按钮控制层叠图片滚动切换轮播。" />
</head>

<body>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif,"新宋体";}
/* focus_Box */
#focus_Box{position:relative;width:710px;height:308px;margin:20px auto;}
#focus_Box ul{position:relative;width:710px;height:308px}
#focus_Box li{z-index:0;position:absolute; width:0px;background:#787878;height:0px;top:146px;cursor:pointer;left:377px;border-radius:4px;box-shadow:1px 1px 12px rgba(200, 200, 200, 1)}
#focus_Box li img{width:100%;background:url(images/loading.gif) no-repeat center 50%;height:100%;vertical-align:top}
#focus_Box li p{position:absolute;left:0;bottom:0px;width:100%;height:40px;line-height:40px;background:url(images/float-bg.png) repeat;text-indent:8px;color:#fff;}
#focus_Box li p span{display:inline-block;width:70%;height:40px;overflow:hidden;}
#focus_Box .prev,#focus_Box .next{display:block;z-index:100;overflow:hidden;cursor:pointer;position:absolute;width:52px;height:52px;top:131px;}
#focus_Box .prev{background:url(images/btn.png) left bottom no-repeat;left:0px}
#focus_Box .next{background:url(images/btn.png) right bottom no-repeat;right:0px}
#focus_Box .prev:hover{background-position:left top;}
#focus_Box .next:hover{background-position:right top;}
#focus_Box a.imgs-scroll-btn{display:block;position:absolute;z-index:110;top:7px;right:15px;width:51px;height:23px;overflow:hidden;background:url(images/share-btn.png) no-repeat;text-indent:-999px;}
</style>

<script src="js/ZoomPic.js"></script>

<div id="focus_Box">
<span class="prev"> </span>
<span class="next"> </span>
<ul>
  <li>
   <a href="http://www.jsfoot.com/"><img width="445" height="308" alt="这个时代你所追求的是什么？" src="images/1.jpg" /></a>
   <p>
    <span>这个时代你所追求的是什么？</span>
    <a href="http://www.jsfoot.com/" class="imgs-scroll-btn">分享</a>
   </p>
  </li>
  <li>
   <a href="http://www.jsfoot.com/"><img width="445" height="308" alt="我们所追求的不是拥有一切，而是拥有值得的一切" src="images/2.jpg" /></a>
   <p>
    <span>我们所追求的不是拥有一切，而是拥有值得的一切</span>
    <a href="http://www.jsfoot.com/" class="imgs-scroll-btn">分享</a>
   </p>
  </li>
  <li>
   <a href="http://www.jsfoot.com/"><img width="445" height="308" alt="一段旅程，两个城市，潮流正在被重塑" src="images/3.jpg" /></a>
   <p>
    <span>一段旅程，两个城市，潮流正在被重塑</span>
    <a href="http://www.jsfoot.com/" class="imgs-scroll-btn">分享</a>
   </p>
  </li>
  <li>
   <a href="http://www.jsfoot.com/"><img width="445" height="308" alt="你的眼光、激情、创意和内涵，也在重塑着城市的潮流" src="images/4.jpg" /></a>
   <p>
    <span>你的眼光、激情、创意和内涵，也在重塑着城市的潮流</span>
    <a href="http://www.jsfoot.com/" class="imgs-scroll-btn">分享</a>
   </p>
  </li>
  <li>
   <a href="http://www.jsfoot.com/"><img width="445" height="308" alt="在这里，抛开重重限制，释放真实自我" src="images/5.jpg" /></a>
   <p>
    <span>在这里，抛开重重限制，释放真实自我</span>
    <a href="http://www.jsfoot.com/" class="imgs-scroll-btn">分享</a>
   </p>
  </li>
</ul>
</div>

</body>
</html>

js代码：

function ZoomPic ()
{
this.initialize.apply(this, arguments)
}
ZoomPic.prototype =
{
initialize : function (id)
{
  var _this = this;
  this.wrap = typeof id === "string" ? document.getElementById(id) : id;
  this.oUl = this.wrap.getElementsByTagName("ul")[0];
  this.aLi = this.wrap.getElementsByTagName("li");
  this.prev = this.wrap.getElementsByTagName("span")[0];
  this.next = this.wrap.getElementsByTagName("span")[1];
  this.timer = 1000;
  this.aSort = [];
  this.iCenter = 2;
  this._doPrev = function () {return _this.doPrev.apply(_this)};
  this._doNext = function () {return _this.doNext.apply(_this)};
  this.options = [
   /*{width:476, height:210, top:40, left:0, zIndex:1},
   {width:426, height:250, top:20, left:50, zIndex:2},
   {width:654, height:290, top:0, left:150, zIndex:3},
   {width:426, height:250, top:20, left:480, zIndex:2},
   {width:476, height:210, top:40, left:476, zIndex:1},*/
   {width:365, height:252, top:40, left:0, zIndex:1},
   {width:405, height:280, top:20, left:60, zIndex:2},
   {width:445, height:308, top:0, left:130, zIndex:3},
   {width:405, height:280, top:20, left:240, zIndex:2},
   {width:366, height:252, top:40, left:345, zIndex:1},
  ];
  for (var i = 0; i < this.aLi.length; i++) this.aSort[i] = this.aLi[i];
  this.aSort.unshift(this.aSort.pop());
  this.setUp();
  this.addEvent(this.prev, "click", this._doPrev);
  this.addEvent(this.next, "click", this._doNext);
  this.doImgClick();
  this.timer = setInterval(function ()
  {
   _this.doNext()
  }, 3000);
  this.wrap.onmouseover = function ()
  {
   clearInterval(_this.timer)
  };
  this.wrap.onmouseout = function ()
  {
   _this.timer = setInterval(function ()
   {
    _this.doNext()
   }, 3000);
  }
},
doPrev : function ()
{
  this.aSort.unshift(this.aSort.pop());
  this.setUp()
},
doNext : function ()
{
  this.aSort.push(this.aSort.shift());
  this.setUp()
},
doImgClick : function ()
{
  var _this = this;
  for (var i = 0; i < this.aSort.length; i++)
  {
   this.aSort[i].onclick = function ()
   {
    if (this.index > _this.iCenter)
    {
     for (var i = 0; i < this.index - _this.iCenter; i++) _this.aSort.push(_this.aSort.shift());
     _this.setUp()
    }
    else if(this.index < _this.iCenter)
    {
     for (var i = 0; i < _this.iCenter - this.index; i++) _this.aSort.unshift(_this.aSort.pop());
     _this.setUp()
    }
   }
  }
},
setUp : function ()
{
  var _this = this;
  var i = 0;
  for (i = 0; i < this.aSort.length; i++) this.oUl.appendChild(this.aSort[i]);
  for (i = 0; i < this.aSort.length; i++)
  {
   this.aSort[i].index = i;
   if (i < 5)
   {
    this.css(this.aSort[i], "display", "block");
    this.doMove(this.aSort[i], this.options[i], function ()
    {
     _this.doMove(_this.aSort[_this.iCenter].getElementsByTagName("img")[0], {opacity:100}, function ()
     {
      _this.doMove(_this.aSort[_this.iCenter].getElementsByTagName("img")[0], {opacity:100}, function ()
      {
       _this.aSort[_this.iCenter].onmouseover = function ()
       {
        _this.doMove(this.getElementsByTagName("div")[0], {bottom:0})
       };
       _this.aSort[_this.iCenter].onmouseout = function ()
       {
        _this.doMove(this.getElementsByTagName("div")[0], {bottom:-100})
       }
      })
     })
    });
   }
   else
   {
    this.css(this.aSort[i], "display", "none");
    this.css(this.aSort[i], "width", 0);
    this.css(this.aSort[i], "height", 0);
    this.css(this.aSort[i], "top", 37);
    this.css(this.aSort[i], "left", this.oUl.offsetWidth / 2)
   }
   if (i < this.iCenter || i > this.iCenter)
   {
    this.css(this.aSort[i].getElementsByTagName("img")[0], "opacity", 100)
    this.aSort[i].onmouseover = function ()
    {
     _this.doMove(this.getElementsByTagName("img")[0], {opacity:100})
    };
    this.aSort[i].onmouseout = function ()
    {
     _this.doMove(this.getElementsByTagName("img")[0], {opacity:100})
    };
    this.aSort[i].onmouseout();
   }
   else
   {
    this.aSort[i].onmouseover = this.aSort[i].onmouseout = null
   }
  }
},
addEvent : function (oElement, sEventType, fnHandler)
{
  return oElement.addEventListener ? oElement.addEventListener(sEventType, fnHandler, false) : oElement.attachEvent("on" + sEventType, fnHandler)
},
css : function (oElement, attr, value)
{
  if (arguments.length == 2)
  {
   return oElement.currentStyle ? oElement.currentStyle[attr] : getComputedStyle(oElement, null)[attr]
  }
  else if (arguments.length == 3)
  {
   switch (attr)
   {
    case "width":
    case "height":
    case "top":
    case "left":
    case "bottom":
     oElement.style[attr] = value + "px";
     break;
    case "opacity" :
     oElement.style.filter = "alpha(opacity=" + value + ")";
     oElement.style.opacity = value / 100;
     break;
    default :
     oElement.style[attr] = value;
     break
   }
  }
},
doMove : function (oElement, oAttr, fnCallBack)
{
  var _this = this;
  clearInterval(oElement.timer);
  oElement.timer = setInterval(function ()
  {
   var bStop = true;
   for (var property in oAttr)
   {
    var iCur = parseFloat(_this.css(oElement, property));
    property == "opacity" && (iCur = parseInt(iCur.toFixed(2) * 100));
    var iSpeed = (oAttr[property] - iCur) / 5;
    iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

    if (iCur != oAttr[property])
    {
     bStop = false;
     _this.css(oElement, property, iCur + iSpeed)
    }
   }
   if (bStop)
   {
    clearInterval(oElement.timer);
    fnCallBack && fnCallBack.apply(_this, arguments)
   }
  }, 30)
}
};
window.onload = function ()
{
new ZoomPic("focus_Box");
};

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js图片轮换效果

html代码：http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">js焦点图片层叠轮播切换滚动*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}body{font
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。