轮播图js代码 html图片轮播js代码
大家好，今天来为大家分享轮播图js代码的一些知识点，和html图片轮播js代码的问题解析，大家要是都明白，那么可以忽略，如果不太清楚的话可以看看本篇文章，相信很大概率可以解决您的问题，接下来我们就一起来看看吧！
js原生代码实现轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>最简单的轮播广告</title>
<style>
body, div, ul, li{
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
}
body{
background:#000;
text-align: center;
font: 12px/20px Arial;
}
#box{
position: relative;
width: 492px;
height: 172px;
background:#fff;
border-radius: 5px;
border: 8px solid#fff;
margin: 10px auto;
}
#box.list{
position: relative;
width: 490px;
height: 170px;
overflow: hidden;
border: 1px solid#ccc;
}
#box.list li{
position: absolute;
top: 0;
left: 0;
width: 490px;
height: 170px;
opacity: 0;
transition: opacity 0.5s linear
}
#box.list li.current{
opacity: 1;
}
#box.count{
position: absolute;
right: 0;
bottom: 5px;
}
#box.count li{
color:#fff;
float: left;
width: 20px;
height: 20px;
cursor: pointer;
margin-right: 5px;
overflow: hidden;
background:#F90;
opacity: 0.7;
border-radius: 20px;
}
#box.count li.current{
color:#fff;
opacity: 0.7;
font-weight: 700;
background:#f60
}
</style>
</head>
<body>
<div id="box">
<ul class="list">
<li class="current" style="opacity: 1;"><img src="img/images04/01.jpg" width="490" height="170"></li>
<li style="opacity: 0;"><img src="img/images04/02.jpg" width="490" height="170"></li>
<li style="opacity: 0;"><img src="img/images04/03.jpg" width="490" height="170"></li>
<li style="opacity: 0;"><img src="img/images04/04.jpg" width="490" height="170"></li>
<li style="opacity: 0;"><img src="img/images04/05.jpg" width="490" height="170"></li>
</ul>
<ul class="count">
<li class="current">1</li>
<li class="">2</li>
<li class="">3</li>
<li class="">4</li>
<li class="">5</li>
</ul>
</div>
<script>
var box=document.getElementById('box');
var uls=document.getElementsByTagName('ul');
var imgs=uls[0].getElementsByTagName('li');
var btn=uls[1].getElementsByTagName('li');
var i=index=0;//中间量，统一声明；
var play=null;
console.log(box,uls,imgs,btn);//获取正确
//图片切换,淡入淡出效果我是用（transition: opacity 0.8s linear）做的,不纠结、简单在css里面
function show(a){//方法定义的是当传入一个下标时，按钮和图片做出对的反应
for(i=0;i<btn.length;i++){
btn[i].className='';//很容易看懂吧？每个按钮都先设置成看不见，然后把当前按钮设置成可见。
btn[a].className='current';
}
for(i=0;i<imgs.length;i++){//把图片的效果设置和按钮相同
imgs[i].style.opacity=0;
imgs[a].style.opacity=1;
}
}
//切换按钮功能，响应对应图片
for(i=0;i<btn.length;i++){
btn[i].index=i;//不知道你有没有发现，循环里的方法去调用循环里的变量体i，会出现调到的不是i的变动值的问题。所以我先在循环外保存住
btn[i].onmouseover=function(){
show(this.index);
clearInterval(play);//这就是最后那句话追加的功能
}
}
//自动轮播方法
function autoPlay(){
play=setInterval(function(){//这个paly是为了保存定时器的，变量必须在全局声明不然其他方法调不到或者你可以调用auto.play也许可以但是没时间试了
index++;
index>=imgs.length&&(index=0);//可能有优先级问题，所以用了括号，没时间测试了。
show(index);
},1000)
}
autoPlay();//马上调用，我试过用window.onload调用这个方法，但是调用之后影响到了其他方法，使用autoPlay所以只能这样调用了
//div的鼠标移入移出事件
box.onmouseover=function(){
clearInterval(play);
};
box.onmouseout=function(){
autoPlay();
};
//按钮下标也要加上相同的鼠标事件，不然图片停止了，定时器没停，会突然闪到很大的数字上。貌似我可以直接追加到之前定义事件中。
</script>
</body>
</html>
简单轮播图的实现及原理讲解(js)
三个div，最外层id为 parent的大div内包含了 uls和 buttons两个div，div uls中包含了两个列表 img_ul（图片列表）, litCir_ul（小圆点列表），div buttons里则包含了“左”，“右”两个按钮。
之所用js添加小圆点，是因为小圆点的数量是由图片张数决定的。
默认 li的 class为 quiet,第一张默认为 active。
首先先理解该轮播图如何滚动，这里是通过控制 img_ul的 left值来控制显示某张图片，为了实现“滚动”的效果，我们需要逐渐改变 img_ul的 left值，而不能直接使该值变化图片宽度的倍数。这里我们定义一个动画效果函数 Roll()。
试想下面的情况，当图片从最后一张切换到第一张时，这时就不能通过逐渐改变 img_ul的 left值来实现滚动的效果，于是克隆第一张图片至列表尾部，当滚动完最后一张图片时，继续滚动到克隆的第一张，然后将 img_ul的 left值置为0。
需要注意的是小圆点和图片列表的 li数目是不一样的，当滚动到最后一个克隆项时，此时小圆点实际上在第一个位置。
开始自动滚动：
timer= setInterval(autoRun, gap);
给每个小圆点绑定了onmouseover事件，这个方法有个细节，会根据两次小圆点的距离差调整速率为 rate*times，使切换效果更自然（也就是说每次切换说花的时间基本一致，无论是第一张到第二张，还是第一张到最后一张）。
触及区域，清除定时器，显示按钮。
离开区域，添加定时器，隐藏按钮。
自动播放就是间隔一定时间不断调用函数“下一张”的过程，所以这里的按钮 right下一张的实现就是上面的 autoRun函数。
以上就是轮播图各部分的实现原理，如果你有其他的方法，欢迎一起交流！
2019.3.30更新：
用requestAnimationFrame()实现一个轮播图
求CSS图片轮播完整代码
以4张图片为例：
1.基本布局：
将4张图片左浮动横向并排放入一个div容器内，图片设置统一尺寸，div宽度设置4个图片的总尺寸，然后放入相框容器div，
相框设置1个图片的大小并设置溢出隐藏，以保证正确显示一个照片。
2.设置动画：
然后使用css3动画，通过对photos进行位移，从而达到显示不同的图片，每次偏移一个图片的宽度，即可显示下一张图片。
4张图片，需要切换3次.
根据需要可以对各个图片添加相应的序号和图片简介。
3.代码如下：
复制代码
1<style>
2#frame{position:absolute;width:300px;height:200px;overflow:hidden;border-radius:5px}
3#dis{position:absolute;left:-50px;top:-10px;opacity:.5}
4#dis li{display:inline-block;width:200px;height:20px;margin:0 50px;float:left;text-align:center;color:#fff;border-radius:10px;background:#000}
5#photos img{float:left;width:300px;height:200px}
6#photos{ position: absolute;z-index:9; width: calc(300px* 4);/*---修改图片数量的话需要修改下面的动画参数*/}
7.play{ animation: ma 20s ease-out infinite alternate;}
8@keyframes ma{
9 0%,25%{ margin-left: 0px;}
10 30%,50%{ margin-left:-300px;}
11 55%,75%{ margin-left:-600px;}
12 80%,100%{ margin-left:-900px;}
13
14}
15</style>
复制代码
复制代码
<div id="frame">
<div id="photos" class="play">
<img src="images/1.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
<ul id="dis">
<li>www.scxhdzs.com#www.scxhdzs.com#111</li>
<li>22222222222222</li>
<li>33333333333333</li>
<li>44444444444444</li>
</ul>
</div>
</div>
拿走不谢！
关于轮播图js代码，html图片轮播js代码的介绍到此结束，希望对大家有所帮助。