关于javascript实现焦点图轮播效果的代码分享

2025-02-27 技术教程

今天小编给大家分享的是关于javascript实现焦点图轮播效果的代码分享，很多人都不太了解，今天小编为了让大家更加了解javascript如何实现焦点图轮播，所以给大家总结了以下内容，一起往下看吧。一定会有所收获的哦。

JS实现焦点图轮播效果

效果图：

(不过里面的图片路径需要自己改成自己的图片路径，否则是没有图片显示的哦)

代码如下，复制即可使用：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JS实现焦点图轮播效果</title><style type="text/css">* {margin: 0;padding: 0;text-decoration: none;}body {padding: 20px;}#container {width: 600px;height: 400px;border: 3px solid #333;overflow: hidden;position: relative;}#list {width: 4200px;height: 400px;position: absolute;z-index: 1;}#list img {float: left;}#buttons {position: absolute;height: 10px;width: 100px;z-index: 2;bottom: 20px;left: 250px;}#buttons span {cursor: pointer;float: left;border: 1px solid #fff;width: 10px;height: 10px;border-radius: 50%;background: #333;margin-right: 5px;}#buttons .on {background: orangered;}.arrow {cursor: pointer;display: none;line-height: 39px;text-align: center;font-size: 36px;font-weight: bold;width: 40px;height: 40px;position: absolute;z-index: 2;top: 180px;background-color: RGBA(0, 0, 0, .3);color: #fff;}.arrow:hover {background-color: RGBA(0, 0, 0, .7);}#container:hover .arrow {display: block;}#prev {left: 20px;}#next {right: 20px;}</style><script type="text/javascript">window.onload = function() {var container = document.getElementById('container');var list = document.getElementById('list');var buttons = document.getElementById('buttons').getElementsByTagName('span');var prev = document.getElementById('prev');var next = document.getElementById('next');var index = 1;var len = 5;var animated = false;var interval = 3000;var timer;function animate(offset) { if(offset == 0) { return; } animated = true; var time = 300; var inteval = 10; var speed = offset / (time / inteval); var left = parseInt(list.style.left) + offset; var go = function() { if((speed > 0 && parseInt(list.style.left) < left) || (speed < 0 && parseInt(list.style.left) > left)) { list.style.left = parseInt(list.style.left) + speed + 'px'; setTimeout(go, inteval); } else { list.style.left = left + 'px'; if(left > -200) { list.style.left = -600 * len + 'px'; } if(left < (-600 * len)) { list.style.left = '-600px'; } animated = false; } } go();}function showButton() { for(var i = 0; i < buttons.length; i++) { if(buttons[i].className == 'on') { buttons[i].className = ''; break; } } buttons[index - 1].className = 'on';}function play() { timer = setTimeout(function() { next.onclick(); play(); }, interval);}function stop() { clearTimeout(timer);}next.onclick = function() { if(animated) { return; } if(index == 5) { index = 1; } else { index += 1; } animate(-600); showButton();}prev.onclick = function() { if(animated) { return; } if(index == 1) { index = 5; } else { index -= 1; } animate(600); showButton();}for(var i = 0; i < buttons.length; i++) { buttons[i].onclick = function() { if(animated) { return; } if(this.className == 'on') { return; } var myIndex = parseInt(this.getAttribute('index')); var offset = -600 * (myIndex - index); animate(offset); index = myIndex; showButton(); }}container.onmouseover = stop;container.onmouseout = play;play();}</script></head><body><div id="container"><div id="list" style="left: -600px;"><img src="img/5.jpg" alt="1" /><img src="img/1.jpg" alt="1" /><img src="img/2.jpg" alt="2" /><img src="img/3.jpg" alt="3" /><img src="img/4.jpg" alt="4" /><img src="img/5.jpg" alt="5" /><img src="img/1.jpg" alt="5" /></div><div id="buttons"><span index="1" class="on"></span><span index="2"></span><span index="3"></span><span index="4"></span><span index="5"></span></div><a href="javascript:;" id="prev" class="arrow"><</a><a href="javascript:;" id="next" class="arrow">></a></div></body></html>

以上就是关于javascript实现焦点图轮播效果的代码分享，当然详细使用上面的不同还得要大家自己使用过才领会。如果想了解更多，欢迎关注亿速云行业资讯频道哦！