原生js实现轮播图的思路、代码及知识点！

一、轮播图实现思路：
1、自动轮播：
（1）使所有的图片的层级为0，并且li的背景颜色设置为默认颜色；
（2）使当前下标的图片的层级为1，并且当前li的背景颜色设置为白色；
（3）时间函数每隔1秒执行一次。
2、手动轮播：点击小圆圈按钮，显示相应图片。
（1）使所有的图片的层级为0，并且li的背景颜色设置为默认颜色；
（2）当点击小圆点时使它相对应的图片显示并且当前li的背景颜色设置为白色；
3、鼠标移上、移开时的事件。
4、点击左右箭头，实现向前向后轮播图片。

二、代码部分：

css部分：
<style type="text/css">
*{margin:0;padding:0;list-style: none;
}
.bigbox{width:586px;height:469px;margin:0 auto;position:relative;overflow:hidden;
}
.img{width:586px;height:469px;position:absolute;top: 0;left:0;
}
.img a{width:586px;height:469px;position:absolute;top: 0;left:0;
}
.items{width:160px;height:16px;
/*    border:1px solid red;*/position:absolute;bottom:10px;left:220px;
}
.items .item{width:16px;height:16px;background:skyblue;border-radius: 50%;float: left;margin-right: 10px;text-align: center;line-height: 16px;cursor:pointer;
}
.button{width:586px;height:350px;position:absolute;top:50%;margin-top: -35px;z-index: 3;}.btn{width:50px;height:70px;background:rgba(0, 0, 0, 0.5);color:white;font-size: 36px;text-align: center;line-height: 70px;}.fr{float:right;}.fl{float:left;}
</style>

内容部分：
<body><div class="bigbox"><div class="img"><a href="" style="z-index:1;background:skyblue"><img src="data:images/lunbo01.jpg" alt="" /></a><a href=""><img src="data:images/lunbo03.jpg" alt="" /></a><a href=""><img src="data:images/lunbo08.jpg" alt="" /></a><a href=""><img src="data:images/lunbo05.jpg" alt="" /></a><a href=""><img src="data:images/lunbo06.jpg" alt="" /></a><a href=""><img src="data:images/lunbo08.jpg" alt="" /></a></div><ul class="items" style="z-index:99"><li class="item">1</li><li class="item">2</li><li class="item">3</li><li class="item">4</li><li class="item">5</li><li class="item">6</li></ul><div class="button"><div class="btn fl" id="left">&lt;</div><div class="btn fr" id="right">&gt;</div></div></div>
</body>

script部分：
<script type="text/javascript">var num = 0;    //获取当前图片的下标；var img = document.getElementsByClassName("img")[0].getElementsByTagName("a"); //获取图片；var li = document.getElementsByClassName("item");   //获取li数组元素；var mouse = document.getElementsByClassName("bigbox")[0]; //获取放图片的整个盒子；//自动轮播function ImgAuto(adress){ for (var i = 0; i < img.length; i++) {img[i].style.zIndex = "0";  //使当前所有的图片的层级为0，并且li的背景颜色设置为默认颜色；li[i].style.background = "skyblue";};img[num].style.zIndex = "1"; //使当前下标的图片的层级为1，并且当前li的背景颜色设置为白色；li[num].style.background = "white";if (adress == "right") {num++;if (num >= img.length) {num = 0;   //当num大于等于图片数组长度时，归零；};}else if(adress == "left"){num--;if(num < 0){num = img.length-1;}} }var move = setInterval(function(){ImgAuto("right");},1000); //每隔1秒执行一次//手动轮播for (var i = 0; i < img.length; i++) {li[i].index = i;li[i].onclick = function(){for (var j = 0; j < img.length; j++) {img[j].style.zIndex = "0";li[j].style.background = "skyblue";};this.style.background = "white";img[this.index].style.zIndex = "1";num = this.index;}};mouse.onmouseover = function(){ //鼠标移上去的事件（停止自动轮播）clearInterval(move);}mouse.onmouseout = function(){ //鼠标移开事件（恢复自动轮播）move = setInterval(function(){ImgAuto("right")},1000);}left.onclick = function(){ //左边按钮事件；ImgAuto("left");}right.onclick = function(){ //右边按钮事件；ImgAuto("right"); }
</script>

三、知识点。
1、获取DOM元素：
（1）document.getElementsById():通过id获取对象，id是唯一的，可以不获取。
（2）document.getElementsByClassName()：通过class属性获取对象。
（3）document.getElementsByTagName()：通过标签名获取对象。
（4）document.querySelectorAll():可通过所有获取。
2、(1)onmouseover():鼠标移上时事件；
(2)onmouseout():鼠标移开时事件；
3、onclick():单击事件。

原生js实现轮播图的思路、代码及知识点！相关推荐

使用原生js将轮播图组件化
代码地址如下: http://www.demodashi.com/demo/11316.html 这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explo ...
原生js实现轮播图实例教程
原生js实现轮播图实例教程本实例效果如下图所示: 根据实例效果,需要的元素有图片.中间圆点按钮.左右箭头按钮等.实际html代码如下所示: <div class="banner_co ...
原生JS无缝轮播图（左右切换、导航跟随）
原生JS无缝轮播图(左右切换.导航图标) 功能: 1.实现轮播图的左右无缝切换 2.实现导航图标的跟随显示.点击切换 3.使用定时器进行无缝轮播 css部分 <style>/* 轮播图容器 ...
原生js实现轮播图——小肉包
使用原生js实现轮播图--小肉包今天分享一个使用原生JS实现轮播图的案例,并且配上比较详细的过程讲解,欢迎小伙伴的浏览和批评指正.静态效果图如下: 核心思想将一些图片在一行中平铺,然后计算偏移量再 ...
史上最简单的原生JS实现轮播图效果
原生JS实现轮播图效果上篇文章我们说到了怎样利用原生JS实现Tab切换的效果,现在我们来说一下Tab切换的"升级版".如何利用原生JS实现轮播图效果.如图: HTML代码: &l ...
原生js横幅广告轮播图
手把手原生js简单轮播图原生js实现图片轮播效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
animate用法 js原生_animate动画、原生JS实现轮播图
写在前面最近在写项目的时候,才发现自己对css3这部分的内容已经生疏了,复习css3的时候,看到animate属性,就用其写了个焦点轮播图,当然自己也用原生JS码了个,当然css3动画无疑是锦上添花 ...
原生JS实现轮播图方法总结
方法总结: 方法一: 利用绝对定位absolute偏移量的改变来实现具有往左往右滑动的效果演示代码: 位移滑动轮播图1 方法二: 利用 display/opacity/visibility状态切换 ...
js轮播图片小圆点变化_原生js实现轮播图(两种方法)
第一种: 这个是之前写的,比较草率,没有注释,如果这个看不懂就去看第二个,比较仔细,主要是了解他,后面都会有一些插件来使用,很方便,只要几行代码就可写出各种各样的代码,所以,不懂的话,不要太在意, 第 ...

原生js实现轮播图的思路、代码及知识点！

原生js实现轮播图的思路、代码及知识点！相关推荐

最新文章

热门文章