js轮播图（希望能给们帮助）

最新推荐文章于 2024-04-21 01:00:23 发布

qq_47782962

最新推荐文章于 2024-04-21 01:00:23 发布

阅读量65

点赞数

本文链接：https://blog.csdn.net/qq_47782962/article/details/118531186

版权

本文介绍了一个使用JavaScript实现的响应式图片轮播器，通过点击按钮实现图片的前后切换，同时包含鼠标悬停暂停和自动播放功能。核心代码展示了如何使用CSS和JavaScript控制图片列表的布局和动画效果。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

*{ margin: 0; padding: 0;}

li{ list-style: none;}

a{ text-decoration: none;}

#banner{ width: 960px; height: 320px; margin: 100px auto 0; border:1px solid #000; position: relative; overflow: hidden;}

#banner ul{ height: 320px; position: absolute; top:0; left:0}

#banner ul li{ width: 960px; height: 320px; float: left;}

#banner a{ display: block; width: 60px; height: 80px; position: absolute; top: 50%; margin-top: -40px;}

#banner .prev{ background: url(./img/btn_show.png) no-repeat 0 -80px; left:0}

#banner .next{ background: url(./img/btn_show.png) no-repeat 0 0; right:0}

#banner p{ position: absolute; left: 0; bottom: 20px; height: 20px; width: 100%; text-align: center;}

#banner p span{ width: 20px; height: 20px; display: inline-block; border-radius: 50%; background: #fff; margin: 0 8px;}

#banner p span.on{ background: red;}

</style>

window.onload = function(){

var oDiv = document.getElementById('banner');

var oUl = oDiv.getElementsByTagName('ul')[0];

var aLi = oUl.getElementsByTagName('li');

var aBtn = oDiv.getElementsByTagName('a');

var aSpan = oDiv.getElementsByTagName('span');

var n = 0;// 记录当前播放到第几张而且统一由n来管理播放到第几张也就是说任何值改变了播放的张数都要赋值给n 由n来操作

var timer = null;

// ul设置宽度

var iW = aLi[0].offsetWidth;

var len = aLi.length;//li的个数 5 下标是 0-4

oUl.style.width = iW * len + 'px';

// 点击下一张

aBtn[1].onclick = function(){

play();

}

function play(){

n++; //n自增代表播放到下一张

if(n >= len){

n = 1;//播出下标为1的图片

// 将ul直接定位到left为0 以备播放到下标为1的图片

oUl.style.left = 0;

}

bufferMove(oUl,{left: -iW * n});

for(var i = 0; i < aSpan.length; i++){

aSpan[i].className = '';

}

if(n == len - 1){

aSpan[0].className = 'on';

}else{

// span的第n个代表当前播放的图片对应下标的span

aSpan[n].className = 'on';

}

aBtn[0].onclick = function(){

n--;

if(n < 0){

n = len - 2;

oUl.style.left = (len - 1) * -iW + 'px';

}

bufferMove(oUl,{left: -iW * n});

for(var i = 0; i < aSpan.length; i++){

aSpan[i].className = '';

}

aSpan[n].className = 'on';

}

// 先直接设置定时器让轮播图可以自动播放

timer = setInterval(play,3000);

// 鼠标移入清除定时器移开重新添加

oDiv.onmouseenter = function(){

clearInterval(timer);

}

oDiv.onmouseleave = function(){

timer = setInterval(play,3000);

}

for(var i = 0; i < aSpan.length; i++){

aSpan[i].index = i;

aSpan[i].onclick = function(){

if(n == len - 1){

n = 0;

oUl.style.left = 0;

}

n = this.index;//将index赋值给n 统一管理播放到第几张

for(var i = 0; i < aSpan.length; i++){

aSpan[i].className = '';

}

aSpan[n].className = 'on';

bufferMove(oUl, {left: -iW * n});

}

</script>

</head>

<body>

<ul>

</ul>

<p>

</p>

</div>

</body>

</html>

qq_47782962

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js轮播图（希望能给们帮助）

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><style>*{margin:...
复制链接

扫一扫