个人整理的原生js图片轮播

个人整理的原生js图片轮播（滚动）

**第一种方法：**一个窗口多张图片进行滚动（图片的尺寸宽高都一样，在一个窗口进行滚动）
这一种应该是刚出来没有工作经验的太白用的（个人猜测，本人一开始也是用这种方法）。
css

.div_atuo{width: 1200px;margin: auto;
}
#imgg_ul li {margin-left: 24px;width: 270px;
}

html

 <div class="div1"><div class="div_auto" style="padding-top: 260px;overflow: hidden"><ul id="imgg_ul"><li onmouseover="li1_over()" onmouseout="li1_out()"><img src="data:images/1.jpg" alt="" /></li><li onmouseover="li1_over()" onmouseout="li1_out()"><img src="data:images/2.jpg" alt="" /></li><li onmouseover="li1_over()" onmouseout="li1_out()"><img src="data:images/3.jpg" alt="" /></li><li onmouseover="li1_over()" onmouseout="li1_out()"><img src="data:images/4.jpg" alt="" /></li><li onmouseover="li1_over()" onmouseout="li1_out()"><img src="data:images/5.jpg" alt="" /></li><li onmouseover="li1_over()" onmouseout="li1_out()"><img src="data:images/6.jpg" alt="" /></li><li onmouseover="li1_over()" onmouseout="li1_out()"><img src="data:images/7.jpg" alt="" /></li><li onmouseover="li1_over()" onmouseout="li1_out()"><img src="data:images/8.jpg" alt="" /></li></ul></div></div>

     var ul = document.getElementById("imgg_ul");var uls = $("#imgg_ul>li").length;//获得图片的数量for (var lul = 1; lul <= uls; lul++) {$("#imgg_ul").append($("#imgg_ul>li:nth-child(" + lul + ")").clone(true));//在$("#imgg_ul")下在添加一次图片数据，相当于把图片数据在复制一次出来，不至于到最后一张出现空白区域}var uls = $("#imgg_ul>li").length;//再次获取图片的数量，这个时候的数量就是前面的2倍了//设置ul的长度，储存图片。这个ul被前面的div的超出隐藏限制了，所以不用担心图片超出宽度会显示出来ul.setAttribute('style', 'width:' + uls * 310 + 'px');var i = 0;var zong = (uls / 2) * (270 + 24);//获取一半图片的长度；后面的270+24是图片的宽度+图片间的间距fun1 = function() {i++;if (i > 0 && i < zong) {$("#imgg_ul").css("margin-left", '-' + i + 'px');//这个是进行滚动操作} else if (i > zong) {i = 1;//当滚动到一半的时候，在从头开始滚动，实现循环滚动$("#imgg_ul").css("margin-left", '-' + i + 'px');}}var ul_fun = setInterval(fun1, 10);function li1_over() {//鼠标移入事件，鼠标移入就停止滚动clearInterval(ul_fun);}function li1_out() {//鼠标移出事件，鼠标移出就继续滚动ul_fun = setInterval(fun1, 10);}

这种方法比较简单，但是不怎么实用，而且要求图片的尺寸每张都要一样。

第二种:
这种方法本人目前正在使用，比较推荐。图片尺寸大小不限制一样。
css

  .div51{padding-top: 136px;//这个只是为了定窗口位置overflow: hidden;//超出隐藏width: 1032px;//窗口的宽height: 385px;//窗口的高margin: auto;//居中}.div51 img{height: 385px;//图片的高，数据必须和上面窗口的高一直margin-right: 5px;//图片间距}#div52,#div53,#div54{float: left;}#div52{width: 5000%;}

html

     <div class="div51" id="div51"><div id="div52"><div id="div53"><img src="data:images/1.jpg" alt="" /><img src="data:images/2.jpg" alt="" /><img src="data:images/3.jpg" alt="" /><img src="data:images/4.jpg" alt="" /><img src="data:images/5.jpg" alt="" /><img src="data:images/6.jpg" alt="" /></div><div id="div54"></div></div></div>

//这个是网上大佬写的，实用性很好window.onload = function() {var v51 = document.getElementById('div51');var v52 = document.getElementById('div53');var v53 = document.getElementById('div54');v53.innerHTML = v52.innerHTML;//将v2容器里面的图片插入到v3容器里面  使其空白区域被遮住。相当于是复制了一份图片function fun51() {if (v51.scrollLeft >= v52.offsetWidth) {  //offsetWidth  这个是获取元素的宽度，必须放在window.οnlοad=function(){}里面v51.scrollLeft = 0;    //当向左滚动的长度等于元素的宽度时，设置滚动的水平位置为0} else {v51.scrollLeft++;    //进行水平滚动}}var fun5 = setInterval(fun51, 10);v51.onmouseover = function () {//鼠标经过时  清除定时器  停止图片的滚动clearInterval(fun5)};v51.onmouseout = function () {//鼠标离开后  继续滚动图片fun5 = setInterval(fun51, 10)};}

比较实用的一种图片滚动。

第三种：
窗口只显示单张图片，用淡入fadeIn()淡出fadeOut()效果。
html

 <div class="div2"><div style="width: 1200px;margin: auto;overflow: hidden;height: 300px"><ul class="div2ul" id="div2ul" style="width: 6000%"><li><img src="data:images/tqbb_02.jpg" alt="" /></li><li><img src="data:images/xx2.jpg" alt="" /></li><li><img src="data:images/xx1.jpg" alt="" /></li></ul></div></div>

 var div2ul = $("#div2ul li").length;var ik = 0;setInterval(function() {ik++;if (ik >= div2ul) {$(".div2ul li:nth-child(" + ik + ")").fadeOut();$(".div2ul li:nth-child(" + 1 + ")").fadeIn();ik = 0;} else {$(".div2ul li:nth-child(" + ik + ")").fadeOut();$(".div2ul li:nth-child(" + (ik + 1) + ")").fadeIn();}}, 5000);

总之，图片轮播（滚动）的方式有很多，各种各样的js插件，形成许许多多好看的图片轮播效果，在你找到比之前更好的方法时，不妨也存下来，这都是你的宝贵财富。

最后，如果我的笔记对您有帮助，请给我一个赞~ 谢谢！

个人整理的原生js图片轮播相关推荐

原生js实现轮播图——小肉包
使用原生js实现轮播图--小肉包今天分享一个使用原生JS实现轮播图的案例,并且配上比较详细的过程讲解,欢迎小伙伴的浏览和批评指正.静态效果图如下: 核心思想将一些图片在一行中平铺,然后计算偏移量再 ...
原生js实现轮播图实例教程
原生js实现轮播图实例教程本实例效果如下图所示: 根据实例效果,需要的元素有图片.中间圆点按钮.左右箭头按钮等.实际html代码如下所示: <div class="banner_co ...
使用原生js将轮播图组件化
代码地址如下: http://www.demodashi.com/demo/11316.html 这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explo ...
原生JS无缝轮播图（左右切换、导航跟随）
原生JS无缝轮播图(左右切换.导航图标) 功能: 1.实现轮播图的左右无缝切换 2.实现导航图标的跟随显示.点击切换 3.使用定时器进行无缝轮播 css部分 <style>/* 轮播图容器 ...
史上最简单的原生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图片轮播效果实现代码
这篇文章主要介绍了js图片轮播效果实现代码,文章对每一步进行了详细阐述,标注注意事项,为顺利实现js图片轮播效果做好铺垫,对轮播效果感兴趣的朋友可以参考一下首先给大家看一看js图片轮播效果,如下图 ...
H5图片切换，js图片轮播，js图片自动切换
没有插入图片,效果如下: 注意:下面代码为PC端显示样式,如果要放在手机端,需要微调下style #wrapper.#banner..bg width 自行修改,我的手机端iphone5s 为 wid ...

个人整理的原生js图片轮播

个人整理的原生js图片轮播（滚动）

个人整理的原生js图片轮播相关推荐

最新文章

热门文章