javascript实现焦点图轮播效果代码示例

PHP中文网 • 2025年3月8日 00:02:09 • 编程技术 • 阅读 2

本篇文章通过代码实例来给大家介绍一下javascript实现焦点图轮播效果。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

JS实现焦点图轮播效果

效果图：

立即学习“Java免费学习笔记（深入）”；

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

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

JS实现焦点图轮播效果* {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;}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  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();}
<>