JS实现轮播图（手动切换+自动切换两种方法）

1.轮播图效果图

2.完整代码如下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<style type="text/css">
*{margin:0;padding:0;
}
/*设置外部div*/
#outer
{width:447px;height:240px;margin:50px auto;/*居中*/background-color:#0FF;/*设置背景颜色*/padding:10px 0;position:relative;/*父元素div开启相对定位*/overflow:hidden;/*裁剪溢出内容*/
}
/*设置ul*/
#imgList
{list-style:none;/*去除项目符合*/position:absolute;/*给ul开启绝对定位*/left:0px;/*设置偏移量，每向左移动447px就会显示下一张图片*/
}
/*设置图片中的li*/
#imgList li
{float:left;/*设置浮动*/margin:0 10px;/*设置左右外边距*/}
/*设置导航按钮*/
#navdiv
{position:absolute;/*开启绝对定位*/bottom:15px;/*设置位置*/
}
#navdiv a
{float:left;/*设置超链接浮动*/width:15px;height:15px;background-color:#F00;/*设置背景颜色*/margin:0 5px;/*设置左右外边距*/opacity:0.5;/*设置半透明*//*兼容IE8透明的写法为，filter:alpha(opacity=50)*/
}
/*设置鼠标移入的效果*/
#navdiv a:hover
{background-color:#000;
}
</style>
<script type="text/javascript" src="myjs/dh.js"></script>
<script type="text/javascript">
window.function()
{//获取ulvar imgList=document.getElementById("imgList");//获取页面中所有的图片(即获取img标签)var imgarr=document.getElementsByTagName("img");//设置imgList的宽度imgList.style.width=447*imgarr.length+"px";//设置导航按钮居中//第一步获取导航divvar navdiv=document.getElementById("navdiv");var outer=document.getElementById("outer");//第二步设置left值，left=（outer的宽度-navdiv的宽度）/2navdiv.style.left=(outer.offsetWidth-navdiv.offsetWidth)/2+"px";//默认显示图片的的索引var index=0;//获取所有的avar alla=document.getElementsByTagName("a");//设置默认选中的效果alla[index].style.backgroundColor="#000";//点击超链接切换到指定图片，点击第一个超链接显示第一张图片，点击第二个超链接显示第二张图片//为所有超链接都绑定单击响应事件for(var i=0;i<alla.length;i++){//为每一个超链接添加一个num属性alla[i].num=i;alla[i].onclick=function(){//关闭定时器clearInterval(timer);//获取点击超链接的索引,并将其设置为indexindex=this.num;//切换图片,第一张索引为0，left为0，第二张索引为1，left为-447，第三张索引为2，left为-894//imgList.style.left=-447*index+"px";//设置选中asetA();//使用move函数来切换图片move(imgList,"left",-447*index,20,function(){//动画结束，开启自动切换autoChange();});};}//自动切换图片autoChange();//创建一个方法用来设置选中的afunction setA(){//判断当前索引是否是最后一张图片if(index>=imgarr.length-1){//则将index设置为0index=0;//此时显示的是最后一张图片，而最后一张图片和第一张是一样的通过CSS将最后一张切换成第一张imgList.style.left=0;}//遍历所有的a并将所有的背景颜色都设置为红色for(var i=0;i<alla.length;i++){alla[i].style.backgroundColor="";}//将选中的a设置为黑色alla[index].style.backgroundColor="#000";};var timer;//创建一个函数，用来开启自动切换图片function autoChange(){//开启一个定时器用来定时切换图片timer=setInterval(function(){//使索引自增index++;index=index%imgarr.length;//执行动画,切换图片move(imgList,"left",-447*index,20,function(){//修改导航按钮setA();});},3000);}
};
</script>
</head>
<body>
<!--创建一个外部的div，来作为大的容器-->
<div id="outer">
<!--创建一个ul，用于放置图片-->
<ul id="imgList">
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.jpg"></li>
<li><img src="img/5.jpg"></li>
<li><img src="img/6.jpg"></li>
<li><img src="img/2.jpg"></li>
</ul>
<!--创建导航按钮-->
<div id="navdiv">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
</html>

3.附上引用js部分代码（dh.js）

// JavaScript Document
//创建一个可以执行简单动画的函数
//参数1：要执行动画的对象（obj）;参数2：要执行动画的样式,可以是left,right,top等（attr）；参数3：执行动画的目标位置（target）；参数4：表示移动的速度正数向右移动，负数向左移动（speed）；参数5：回调函数（callback），这个函数将会在动画执行完毕以后执行
function move(obj,attr,target,speed,callback)
{//在开启一个定时器之前，先关闭上一个元素的定时器clearInterval(obj.timer);//获取元素目前的位置var current=parseInt(getStyle(obj,attr));//判断速度的正负//如果从0向800移动，则speed为正，如果从800向0移动，则speed为负if(current>target){speed=-speed;}//开启一个定时器来实现动画效果//向执行动画的对象中添加一个timer属性值，用来保存它自己的定时器标识obj.timer=setInterval(function(){//获取div的原来的值var oldvalue=parseInt(getStyle(obj,attr));//在旧值的基础上增加var newvalue=oldvalue+speed;//判读newvalue是否大于800if(speed<0 && newvalue<target || speed>0 && newvalue>target){newvalue=target;}//将新值赋给boxobj.style[attr]=newvalue+"px";//当元素移动到800px时，则停止执行动画if(newvalue==target){//达到目标关闭定时器clearInterval(obj.timer);//动画执行完毕，调用回调函数callback && callback();}},30);
}
//定义一个函数用来获取指定元素的当前样式，参数，obj代表需获取样式的元素，name代表需获取的样式名
function getStyle(obj,name)
{if(window.getComputedStyle){//正常浏览器有getComputedStyle()方法return getComputedStyle(obj,null)[name];}else{//IE8的浏览器没有getComputedStyle()方法return obj.currentStyle[name];}
}

4.图片素材
2.jpg

3.jpg

4.jpg

5.jpg

6.jpg

JS实现轮播图（手动切换+自动切换两种方法）相关推荐

jquery，js实现手机端全屏轮播图手动滑动+自动切换(autoplay)
jquery,js实现手机端全屏轮播图使用了swiper插件,可手动滑动切换也可自动切换效果图 css代码只是作为参考,可以根据你自己的需求去改,这里我用的是上下两张背景图,图自行修改 html ...
swiper 定义放多少张图片,小程序swiper轮播图，自定义样式，两种方法：原生方法和bindchange方法；将点点改为数字（当前第几张 /总共几张）;点击点点跳转当前图片...
一.点点部分 1.1.通过原生方法 (1)wxml文件 (2)wxss /* 轮播图部分 */ .swiperBar { width: 690rpx; height: 337rpx; margin: ...
【学会轮播图这一篇文章就足够啦】JS 网页轮播图详解自动播放+手动播放
轮播图已经成了页面开发中不可缺少的一部分,日常生活中随处都能见到轮播图的身影,例如平常我们购物的淘宝,京东等等,都靠着轮播图在一片有限的区域内展现出更多的商品.这也是前端程序员最早接触到的练手小项目 ...
图片轮播的实现（详解两种方法）
今天带来的是前端里图片轮播的实现,可以说,这两种方法都很简单,尤其第一种,只要是有点基础的应该都可以看懂,这也是小编花费了一定时间想到的代码较少的方式.(图片我放在文末了) 当然也有更复杂的图片,也会 ...
js实现轮播图(点击小图片切换大图片+自动切换)
js实现轮播图(点击小图片切换大图片+自动切换) 实现效果如下: 点击小图切换大图和轮播标题,点击左右按钮大小图和轮播标题切换,鼠标进入清除定时器,鼠标移出恢复轮播 html代码如下: <div ...
JS实现轮播图(自动+手动)
网页轮播图效果: 核心原理: tips:代码在文章末尾这个ul就是我们这四张图片的父盒子,我们通过对这个父盒子添加动画函数来实现移动,然后给父盒子来一个溢出隐藏就达到了轮播的效果动画函数如下: f ...
关于element-ui中轮播图手动切换轮播图片
文章目录前言一.关于element-ui中轮播图手动切换轮播图片二.解决方案 1.查看element-ui中Carousel 走马灯组件的方法 2.解决方法结尾前言在开发过程中发现项目中轮 ...
原生JS无缝轮播图（左右切换、导航跟随）
原生JS无缝轮播图(左右切换.导航图标) 功能: 1.实现轮播图的左右无缝切换 2.实现导航图标的跟随显示.点击切换 3.使用定时器进行无缝轮播 css部分 <style>/* 轮播图容器 ...
JS实现轮播图点击切换、按钮切换功能
JS实现轮播图点击切换.按钮切换功能前言轮播图案例总结前言轮播图的案例非常经典,写法也非常多,我在写一个自己用的比较多的写法,帮助大家理解,在网页的设计中,可以直接拿去用(记得换图片路径哦! ...
原生js实现轮播图实例教程
原生js实现轮播图实例教程本实例效果如下图所示: 根据实例效果,需要的元素有图片.中间圆点按钮.左右箭头按钮等.实际html代码如下所示: <div class="banner_co ...

JS实现轮播图（手动切换+自动切换两种方法）

JS实现轮播图（手动切换+自动切换两种方法）相关推荐

最新文章

热门文章