JavaScript 实现轮播图特效的示例

网络编程 2024/12/22 佚名

3 1 2

效果展示

1.页面截图

2.相关效果

html 页面

从微信读书上找了几张书籍封面来做轮播的图片。

index.html

<body>
 <div id="container">
  <div class="big_pic_div">
   <div class="prev"></div>
   <div class="next"></div>
   <a href="javascript:;" rel="external nofollow" rel="external nofollow" class="mark_left"></a>
   <a href="javascript:;" rel="external nofollow" rel="external nofollow" class="mark_right"></a>

   <div class="big_pic" style="z-index: 1;"><img src="/UploadFiles/2021-04-02/1.jpg">

css 样式
grid 布局的 gap 不兼容 IE，惹不起。
style.css


body {
 margin: 0;
 padding: 0;
 background: skyblue;
}

#container {
 position: relative;
 overflow: hidden;
 width: 350px;
 height: 390px;
 margin: 50px auto 0;
 padding: 0 15px;
 background: goldenrod;
 box-shadow: 2px 1px 5px 1px #666;
}

.mark_left {
 position: absolute;
 left: 0;
 z-index: 3000;
 width: 65px;
 height: 360px;
}

.mark_right {
 position: absolute;
 right: 0;
 z-index: 3000;
 width: 65px;
 height: 360px;
}

.prev {
 position: absolute;
 top: 150px;
 left: 5px;
 z-index: 3001;
 width: 60px;
 height: 60px;
 background: url(img/btn.gif) olivedrab;
 /* transform: translateY(50%); */
 /* alpha 兼容IE8及以下的IE浏览器 */
 filter: alpha(opacity=0);
 opacity: 0;
}

.next {
 position: absolute;
 top: 120px;
 right: 5px;
 z-index: 3001;
 width: 60px;
 height: 60px;
 background: url(img/btn.gif) olivedrab;
 background-position-y: 60px;
 transform: translateY(50%);
 filter: alpha(opacity=0);
 opacity: 0;
}

.big_pic_div {
 position: relative;
 width: 250px;
 height: 360px;
 padding: 15px 0;
}

.big_pic {
 position: absolute;
 /* height 从 0 到 360px 下滑 */
 overflow: hidden;
 height: 360px;
 box-shadow: 1px 1px 2px #777;
}

.small_pic_div {
 display: grid;
 grid-template: repeat(6, 110px) / 80px;
 gap: 15px;
 position: absolute;
 top: 0;
 left: 273px;
 padding: 15px 0;
}

.small_pic {
 height: 110px;
 filter: alpha(opacity = 60);
 opacity: 0.6;
}

.small_pic img {
 width: 80px;
 height: 100%;
}



JavaScript 实现
多物体运动框架

move.js


// 获取样式
function getStyle(obj, name) {
 if (obj.currentStyle) {
  // IE...
  return obj.currentStyle[name];
 } else {
  // Chrome...
  return getComputedStyle(obj, false)[name];
 }
}

function startMove(obj, attr, target) {
 clearInterval(obj.timer);

 obj.timer = setInterval(function () {
  var cur = 0;
				
  	// 透明度
  if (attr == 'opacity') {
   cur = Math.round(parseFloat(getStyle(obj, 'opacity')) * 100);
  } else {
   cur = parseInt(getStyle(obj, attr));
  }

  	// 缓冲运动，速度和距离成正比
  var speed = 0;
  speed = (target - cur) / 6;
  	// 1px 是最小的，1.9px 会被当做 1px;得把速度取整，不然并未真正到达目标值 target
  speed = speed > 0 "htmlcode">

window.onload = function () {
 var markLeft = document.getElementsByClassName('mark_left')[0];
 var markRight = document.getElementsByClassName('mark_right')[0];
 var btnPrev = document.getElementsByClassName('prev')[0];
 var btnNext = document.getElementsByClassName('next')[0];
 var smallPicDiv = document.getElementsByClassName('small_pic_div')[0];
 var smallPic = document.getElementsByClassName('small_pic');
 var bigPic = document.getElementsByClassName('big_pic');
 var nowZIndex = 2;
 var now = 0;
 var container = document.getElementById('container');

 // 左右按钮透明度设置
 btnPrev.onmouseover = markLeft.onmouseover = function () {
  startMove(btnPrev, 'opacity', 100);
 };
 btnPrev.onmouseout = markLeft.onmouseout = function () {
  startMove(btnPrev, 'opacity', 0);
 };
 btnNext.onmouseover = markRight.onmouseover = function () {
  startMove(btnNext, 'opacity', 100);
 };
 btnNext.onmouseout = markRight.onmouseout = function () {
  startMove(btnNext, 'opacity', 0);
 };

 // 点击小图时，大图自动切换
 for (var i = 0; i < smallPic.length; i++) {

  smallPic[i].index = i;

  smallPic[i].onclick = function () {

   if (now == this.index) return;
   // 使用 now 来表示当前选择的小图，当前选中的小图再次点击时不会让大图下滑
   now = this.index;
   bigPic[this.index].style.zIndex = nowZIndex++;
   bigPic[this.index].style.height = 0;
   startMove(bigPic[this.index], 'height', 360);

   // 点击后其他小图变透明，当前选中的为不透明
   for (var i = 0; i < smallPic.length; i++) {
    startMove(smallPic[i], 'opacity', 60);
   }
   startMove(smallPic[this.index], 'opacity', 100);
  };

  // 鼠标移动到小图上时，淡入淡出
  smallPic[i].onmouseover = function () {
   startMove(this, 'opacity', 100);
  };
  smallPic[i].onmouseout = function () {
   if (now != this.index) {
    startMove(this, 'opacity', 60);
   }
  };

 }

 // tab 函数：当前选中图片不透明；图片下滑；小图区域的滚动
 function tab() {
  bigPic[now].style.zIndex = nowZIndex++;
  for (var i = 0; i < smallPic.length; i++) {
   startMove(smallPic[i], 'opacity', 60);
  }
  startMove(smallPic[now], 'opacity', 100);

  bigPic[now].style.height = 0;
  startMove(bigPic[now], 'height', 360);

  if (now == 0) {
   startMove(smallPicDiv, 'top', 0);
  } else if (now == smallPic.length - 1) {
   startMove(smallPicDiv, 'top', -(now - 2) * (smallPic[0].offsetHeight + 15));
  } else {
   startMove(smallPicDiv, 'top', -(now - 1) * (smallPic[0].offsetHeight + 15));
  }
 }

 // 左右按钮点击
 btnPrev.onclick = function () {
  now--;
  if (now == smallPic.length) {
   now = smallPic.length - 1;
  } else if (now < 0) {
   now = smallPic.length - 1;
   // return;
  }
  tab();
 };
 btnNext.onclick = function () {
  now++;
  if (now == smallPic.length) {
   now = 0;
  }
  tab();
 };
 var timer = setInterval(btnNext.onclick, 3000);
 container.onmouseover = function () {
  clearInterval(timer);
 };
 container.onmouseout = function () {
  timer = setInterval(btnNext.onclick, 3000);
 };
};



以上就是JavaScript 实现轮播图特效的详细内容，更多关于JavaScript 轮播图的资料请关注其它相关文章！

JavaScript,轮播图,JavaScript,轮播图特效

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“JavaScript 实现轮播图特效的示例”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年12月22日

JavaScript 实现轮播图特效的示例

关于Vue中$refs的探索浅析

nuxt 服务器渲染动态设置 title和seo关键字的操作

评论“JavaScript 实现轮播图特效的示例”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接