效果展示
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 轮播图的资料请关注其它相关文章!
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年09月21日
2024年09月21日
- 《年度十大发烧唱片精选 唱片榜获奖作品 2CD》[WAV/分轨][1GB]
- 归龙潮三枚天灯碎片位置在哪 笼律鸟任务天灯图文位置
- 归龙潮新手开荒阵容怎么搭配 新手前期阵容养成攻略
- 归龙潮中浦城区福鼠位置在哪 中浦城区福鼠收集位置大全
- MatteoPasqualini-JohannSebastianBachItalienischesKonzertFranzsischeOuvertureVierDue
- 【雨果唱片】陈百强《梦里人LPCD45》2012[WAV+CUE]
- 王菲.1994-《迷路》美卡引进版[WAV+CUE]
- 老外遇到八戒裸体Bug 网友:我需要用它对付蜘蛛精
- 《黑神话》超强越化补丁:游戏里有文字的地都改了
- 玩家吐槽《黑神话:悟空》唐僧相貌:一脸衰样 没半点气质
- 群星.1994-烧得厉害VOL.2我不是一个人拙滚石】【WAV+CUE】
- 群星.1994-烧得厉害VOL.3风笑痴【滚石】【WAV+CUE】
- 群星.1995-烧得厉害VOL.4两个世界【滚石】【WAV+CUE】
- 归龙潮中浦城区宝箱位置收集大全 中浦区宝箱解密攻略
- 黑神话悟空上品幽灯鬼精魄获取方法一览|上品幽灯鬼精魄收集攻略