PS:个人学习小结,有什么不对的地方欢迎大家指正
说到轮播图,我们得先知道轮播图的实现原理,见名知其意,所谓轮播图就是轮流播放的一些图片,我小结了三个我个人认为比较简单,容易理解的轮播图实现方式。
- 1:让图片隐藏实现轮播图方式
实现思路:将所有图片(重叠在一起)display:none隐藏,只让第一张显示,当切换到哪一个图片的时候,就将哪一张图片样式改为display:block显示出来,图片下面的小点也要跟图片同步,实现方式跟图片一样,听起来是不是很简单的样子!让我们来一起试试看
先来写页面的基本样式(按钮随便放的div,懒得调)
css部分:
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
ul,li{
list-style: none;
}
#banner{
width: 750px;
height: 360px;
margin: 0px auto;
position: relative;
}
#banner-img{
width: 750px;
height: 360px;
position: relative;
}
#banner-img li{
position: absolute;
left: 0px;
top: 0px;
display: none;
}
#banner-img li.now{
display:block
}
#left,#right{
width: 40px;
height: 80px;
background: red;
position: absolute;
top: 50%;
margin-top: -40px;
cursor: pointer;
}
#right{
right: 0px;
}
#dots{
width: 300px;
height: 20px;
/*background: #CCCCCC;*/
position: absolute;
left:50%;
margin-left: -150px;
bottom: 10px;
text-align: center;
}
#dots li{
width: 20px;
height: 20px;
border-radius: 50%;
background: #333;
display: inline-block;
cursor: pointer;
}
#dots li.active{
background: yellow;
}
</style>
页面布局部分
<div id="banner">
<ul id="banner-img">
<li class="now"><img src="images/pic1.jpg"/></li>
<li><img src="images/pic2.jpg"/></li>
<li><img src="images/pic3.jpg"/></li>
<li><img src="images/pic4.jpg"/></li>
<li><img src="images/pic5.jpg"/></li>
</ul>
<div id="left"></div>
<div id="right"></div>
<ul id="dots">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
接下来就是重点的js部分了
先获取各个元素,这个就不用说了
然后我还定义了一个定时器(自动点击实现切换)和一个自定义索引
//获取元素
var oBanner=document.getElementById("banner");
var oBannerImg=document.getElementById("banner-img");
var oLis=oBannerImg.getElementsByTagName("li");
var oLeft=document.getElementById("left");
var oRight=document.getElementById("right");
var oDots=document.getElementById("dots");
var oDotsLis=oDots.getElementsByTagName("li");
var timer=null; //定义一个定时器变量
var num=0; //自定义索引
先给右边的按钮添加点击事件
ps:changeImg()是后面要写的自动点击切换图片的函数
点击右边按钮的时候图片索引是渐增的,所以是num++,同理左边按钮就是num- -,如果索引大于放图片的li长度,就让索引值等于0,左边按钮同理
oRight.onclick=function(){
num++;
if(num>oLis.length-1){
num=0
}
changeImg()
}
//左边按钮
oLeft.onclick=function(){
num--;
if(num<0){
num=oLis.length-1
}
changeImg()
}
切换图片函数,我把注释都加上了
//切换图片的函数
function changeImg(){
//遍历所有li
for(var i=0;i<oLis.length;i++){
//先把所有的li类名清空
oLis[i].className="";
//把所有小点的类名清空
oDotsLis[i].className="";
}
//将当前索引图片类名改为now(显示)
oLis[num].className="now";
//当前索引的小点类名改为active
oDotsLis[num].className="active"
}
图片下面的小点点击的时候也应该要能切换图片,跟上面的切换图片实现原理一样(切换小点的时候图片也得跟着换),先将所有类名清空,轮到哪个点就将提前写好的样式的类名加给哪个点
//点击指示点
for(var j=0;j<oDotsLis.length;j++){
//for循环一下就循环完毕,所以我们需要定义一个自定义索引来储存一下
oDotsLis[j].index=j
//给小点添加点击事件
oDotsLis[j].onclick=function(){
for(var i=0;i<oLis.length;i++){
oLis[i].className="";
oDotsLis[i].className="";
}
oLis[this.index].className="now";
this.className="active";
num=this.index;
}
}
这样就算已经大功告成了,接下来只要写一个定时器函数,让它每隔几秒点击一下右边的按钮,轮播图效果就完成了
//给定时器添加一个每隔两秒点击一次右按钮的函数
timer=setInterval(function(){
oRight.onclick()
},2000)
//当鼠标停留在图片区域的时候清除定时器(停止轮播图)
oBanner.onmouseover=function(){
clearInterval(timer)
}
//鼠标离开时开启定时器
oBanner.onmouseout=function(){
timer=setInterval(function(){
oRight.onclick()
},2000)
}
来看看最后的效果图
- 2:利用数组
实现思路:把轮播图所需要的图片封装在一个数组里,通过遍历实现图片的循环播放,是不是听起来比上一个还简单,来,我们来试试
由于每次写的时候想法不同,所以布局什么的也不同,勿怪(主要是懒得改的,哈哈哈)
css和html布局部分
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
#banner{
width: 790px;
height: 340px;
margin: 50px auto;
position: relative;
}
#banner img{
width: 100%;
}
#left,#right{
width: 40px;
height: 80px;
background: #f00;
position: absolute;
top: 50%;
margin-top: -40px;
}
#right{
right: 0;
}
#dots{
width: 100%;
height: 16px;
position: absolute;
bottom: 10px;
text-align: center;
/*background-color: #ccc;*/
}
#dots li{
width: 16px;
height: 16px;
background-color: #f00;
border-radius: 50%;
display: inline-block;
/*margin-left: 5px;*/
}
#dots .active{
background-color: yellow;
}
</style>
<body>
<div id="banner">
<img src="banner-1.jpg" id="img">
<div id="left"></div>
<div id="right"></div>
<ul id="dots"></ul>
</div>
</body>
js部分,注释加上了,这个我没有加鼠标移入停止轮播图的事件
// 定义数据
var arrBanner=["banner-1.jpg","banner-2.jpg","banner-3.jpg","banner-4.jpg"];
//遍历数组,动态添加li
for(var i=0;i<arrBanner.length;i++){
oDots.innerHTML+="<li></li>";
}
//自定义索引
var num=0;
oLis[num].className='active';
//自动播放函数
function autoPlay(){
//这的意思是我们只要改变索引就可以实现切换图片
oImg.src=arrBanner[num];
for (var i = 0; i < arrBanner.length; i++) {
oLis[i].className=""
}
oLis[num].className="active"
}
// 添加右点击事件
oRightBtn.onclick=function(){
num++
if (num>arrBanner.length-1) {
num=0;
}
autoPlay()
}
// 添加左点击事件
oLeftBtn.onclick=function(){
num--
if (num<0) {
num=arrBanner.length-1;
}
autoPlay()
}
// 添加小圆点的点击事件
for(var i=0;i<oLis.length;i++){
oLis[i].index=i;
oLis[i].onclick=function(){
oImg.src=arrBanner[this.index];
for (var i = 0; i <arrBanner.length; i++) {
oLis[i].className=""
}
oLis[this.index].className="active"
num=this.index;
}
}
//定时器自动点击右按钮
setInterval(function(){
oRightBtn.onclick()
},2000)
最后的效果图如下
- 3:无缝播放
实现思路:
1.计算图片列表ul的宽度
2.开启定时器,使其向左边距不断增大,造成向左运动的效果
3.图片列表复制一份,向左移动时,当左边距大于一份的宽度时,把它的左边距拉回到0。向右移动时,当左边距大于0时,把它的左边距拉到整个两份图片列表一半的宽度(即一份的宽度)。(拉的瞬间很快,用户察觉不到,造成一种无缝滚动的假象)
var oBox=document.getElementById("box");
var oUl=oBox.getElementsByTagName("ul")[0];
var oLis=oUl.getElementsByTagName("li");
oUl.innerHTML+=oUl.innerHTML
//offsetWidth 水平方向 width + 左右padding + 左右border-width
//ul的宽度根据内容自动调整
oUl.style.width=oLis[0].offsetWidth*oLis.length+"px"
//定义一个定时器变量
var timer=null;
//设置移动速度为5
var speed=5
function moveFn(){
//offsetLeft值的正负决定往哪边移动
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left=0
}
oUl.style.left=oUl.offsetLeft-speed+"px"
}
timer=setInterval(moveFn,30)
//鼠标移入时清除定时器
oBox.onmouseover=function(){
clearInterval(timer)
}
//鼠标移出开启定时器
oBox.onmouseout=function(){
timer=setInterval(moveFn,30)
}
完成,很简单吧
最后的效果图如下:
PS:仅作为个人学习小结分享,如发现有不对的地方,欢迎大家帮忙指正