原生JS实现旋转轮播图+文字内容切换

废话不多说，直接上图看效果：

需求：点击左右按钮实现切换用户图片与信息；

原理：点击右侧左侧按钮，把3号的样式给2号，2号的给1号，1号的给5号，5号的给4号，4号的样式给3号，然后根据现在是第几张图片切换成对应的文字；

步骤：

1.让页面加载出所有盒子的样式；

2.把两侧按钮绑定事件(调用同一个方法，只有一个参数，true为正向旋转，false为反向旋转)；

3.书写函数：操作函数：左按钮：删除第一个，添加到最后一个；右按钮：删除最后一个，添加到第一个；

4.定义变量，根据对应变量切换对应的文字内容；

代码事例如下：

HTML代码：

写法思路：

1.定义好5张图片，进行图片信息切换；

2.书写好你需要切换的文字内容，定义一个ID；

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>学员信息轮播图</title><link rel="stylesheet" href="css/css.css"/><script src="js/jquery1.0.0.1.js"></script><script src="js/js.js"></script>
</head>
<body><div class="feedbackwrap" id="feedbackwrap"><div class="feedbackslide" id="feedbackslide"><ul><!--五张图片--><li><a href="#"><img src="data:images/1.png" alt=""/></a></li><li><a href="#"><img src="data:images/2.png" alt=""/></a></li><li><a href="#"><img src="data:images/3.png" alt=""/></a></li><li><a href="#"><img src="data:images/4.png" alt=""/></a></li><li><a href="#"><img src="data:images/5.png" alt=""/></a></li></ul><!--左右切换按钮--><div class="feedbackarrow" id="feedbackarrow"><a href="javascript:;" class="feedbackprev"></a><a href="javascript:;" class="feedbacknext"></a></div></div><div class="feedbackname"><p class="p1">学员</p><p class="p2" id="feedstudent">欧阳常斌3</p></div></div></body>
</html>

css代码：

写法思路：

1.定义好左右切换按钮的背景图片；

2.清除默认样式；

3.写好绝对定位，相对定位；

@charset "UTF-8";
/*初始化  reset*/
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;}
ol,ul{list-style:none}
a{text-decoration:none}
fieldset,img{border:0;vertical-align:top;}
a,input,button,select,textarea{outline:none;}
a,button{cursor:pointer;}.feedbackwrap{width:924px;margin:auto;margin-top: 300px;
}.feedbackslide {height:144px;position: relative;
}.feedbackslide li{position: absolute;left:30px;top:0;
}.feedbackslide li img{width:100%;box-shadow:#d6d4d3 0px 0px 20px;
}.feedbackarrow{opacity: 1;
}.feedbackprev,.feedbacknext{width:27px;height:50px;position: absolute;top:50%;margin-top:-25px;background: url(../images/leftblue.png) no-repeat;z-index: 99;
}.feedbacknext{right:0;background-image: url(../images/rightblue.png);
}.feedbackname{width: 100%;margin-top: 26px;display: flex;flex-direction: column;align-items: center;justify-content: center;
}.feedbackname .p1{font-size: 22px;color: #333;margin-bottom: 10px;
}.feedbackname .p2{font-size: 18px;color: #666;
}

js代码：

写法思路：

1.定义一个数组，方便切换图片的样式，进行动画效果；

2.获取元素，定义名称，方便用取；

3.把两侧按钮绑定事件。(调用同一个方法，只有一个参数，true为正向旋转，false为反向旋转)；

4.在次为页面上的所有li赋值属性，利用缓动框架；

window.onload = function () {var arr = [{   //  1width:120,top:11,left:87,opacity:20,zIndex:2},{  // 2width:120,top:11,left:237,opacity:40,zIndex:3},{   // 3width:144,top:0,left:387,opacity:100,zIndex:4},{  // 4width:120,top:11,left:561,opacity:40,zIndex:3},{   //5width:120,top:11,left:711,opacity:20,zIndex:2}];//0.获取元素var feedbackslide = document.getElementById("feedbackslide");var feedbackliArr = feedbackslide.getElementsByTagName("li");var feedbackarrow = feedbackslide.children[1];var arrowChildren = feedbackarrow.children;var arrowleft=5;//设置一个开闭原则变量，点击以后修改这个值。var flag = true;move();//3.把两侧按钮绑定事件。(调用同一个方法，只有一个参数，true为正向旋转，false为反向旋转)
arrowChildren[0].onclick = function () {if(flag){flag = false;move(false);}arrowleft++;console.log("left+++",arrowleft)if(arrowleft==1){document.getElementById("feedstudent").innerText="小岳岳2";}else if(arrowleft==2){document.getElementById("feedstudent").innerText="张三峰1";}else if(arrowleft==3){document.getElementById("feedstudent").innerText="林动5";}else if(arrowleft==4){document.getElementById("feedstudent").innerText="令狐冲4";}else if(arrowleft==5){document.getElementById("feedstudent").innerText="欧阳常斌3";arrowleft=0;}else{document.getElementById("feedstudent").innerText="小岳岳2";arrowleft=1;}}arrowChildren[1].onclick = function () {if(flag){flag = false;move(true);}arrowleft--;console.log("right---",arrowleft)if(arrowleft==1){document.getElementById("feedstudent").innerText="小岳岳2";}else if(arrowleft==2){document.getElementById("feedstudent").innerText="张三峰1";}else if(arrowleft==3){document.getElementById("feedstudent").innerText="林动5";}else if(arrowleft==4){document.getElementById("feedstudent").innerText="令狐冲4";}else{document.getElementById("feedstudent").innerText="欧阳常斌3";arrowleft=5;}}//4.书写函数。function move(bool){//判断：如果等于undefined,那么就不执行这两个if语句if(bool === true || bool === false){if(bool){arr.unshift(arr.pop());}else{arr.push(arr.shift());}}//在次为页面上的所有li赋值属性，利用缓动框架for(var i=0;i<feedbackliArr.length;i++){animate(feedbackliArr[i],arr[i], function () {flag = true;});}}}

动画效果js代码如下：

function show(ele){ele.style.display = "block";
}/*** 获取元素样式兼容写法* @param ele* @param attr* @returns {*}*/
function getStyle(ele,attr){if(window.getComputedStyle){return window.getComputedStyle(ele,null)[attr];}return ele.currentStyle[attr];
}//参数变为3个
//参数变为3个
function animate(ele,json,fn){//先清定时器
    clearInterval(ele.timer);ele.timer = setInterval(function () {//开闭原则var bool = true;//遍历属性和值，分别单独处理json//attr == k(键)    target == json[k](值)for(var k in json){//四部var leader;//判断如果属性为opacity的时候特殊获取值if(k === "opacity"){leader = getStyle(ele,k)*100 || 1;}else{leader = parseInt(getStyle(ele,k)) || 0;}//1.获取步长var step = (json[k] - leader)/10;//2.二次加工步长step = step>0?Math.ceil(step):Math.floor(step);leader = leader + step;//3.赋值//特殊情况特殊赋值if(k === "opacity"){ele.style[k] = leader/100;//兼容IE678ele.style.filter = "alpha(opacity="+leader+")";//如果是层级，一次行赋值成功，不需要缓动赋值//为什么？需求！}else if(k === "zIndex"){ele.style.zIndex = json[k];}else{ele.style[k] = leader + "px";}//4.清除定时器//判断: 目标值和当前值的差大于步长，就不能跳出循环//不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。if(json[k] !== leader){bool = false;}}//只有所有的属性都到了指定位置，bool值才不会变成false；if(bool){clearInterval(ele.timer);//所有程序执行完毕了，现在可以执行回调函数了//只有传递了回调函数，才能执行if(fn){fn();}}},5);
}//获取屏幕可视区域的宽高
function client(){if(window.innerHeight !== undefined){return {"width": window.innerWidth,"height": window.innerHeight}}else if(document.compatMode === "CSS1Compat"){return {"width": document.documentElement.clientWidth,"height": document.documentElement.clientHeight}}else{return {"width": document.body.clientWidth,"height": document.body.clientHeight}}
}

如果复制代码不方便，博主百度网盘分享链接：链接: https://pan.baidu.com/s/1CEez4PN5fh61PC-vud96_w 提取码: t6rh

附加：无间隙自动轮播图：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片轮播</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
#box {width:100%;height:80%;overflow:hidden;margin-top: 200px;
}
#box ul {white-space:nowrap;box-sizing:border-box;padding:0;margin:0;
}
#box ul>li {display:inline-block;width:auto;height:100%;padding:0 1px;box-sizing:border-box;
}
#box ul>li>img {height:100%;width:235px;margin:0;padding:0;
}
</style>
</head>
<body>
<div id="box"><ul><li><img src="http://www.jq22.com/img/cs/500x500-1.png"></li><li><img src="http://www.jq22.com/img/cs/500x500-2.png"></li><li><img src="http://www.jq22.com/img/cs/500x500-3.png"></li><li><img src="http://www.jq22.com/img/cs/500x500-4.png"></li><li><img src="http://www.jq22.com/img/cs/500x500-5.png"></li><li><img src="http://www.jq22.com/img/cs/500x500-6.png"></li><li><img src="http://www.jq22.com/img/cs/500x500-7.png"></li><li><img src="http://www.jq22.com/img/cs/500x500-8.png"></li></ul>
</div><script>window.onload = function() {var box = document.querySelector("#box");var ul = document.querySelector("#box ul");var sW = ul.scrollWidth;ul.innerHTML += ul.innerHTML;ul.style.width = ul.scrollWidth;var v = 0;setInterval(() => {v++;if (v > sW) {v = 1;}ul.style.transform = "translateX(" + -v + "px)";}, 20);}var isFirefox = /Firefox/i.test(navigator.userAgent) ? true : false;var unMouseBtn = function(e) {var e = e || window.event;if (e.wheelDelta && e.ctrlKey) { //IE/Opera/Chrome e.wheelDelta±120
         e.preventDefault ? e.preventDefault() : e.returnValue = false;} else if (e.detail && e.ctrlKey) { //Firefox e.detail±3
         e.preventDefault ? e.preventDefault() : e.returnValue = false;}};var mousewheelevt = isFirefox ? "DOMMouseScroll" : "mousewheel";if (document.attachEvent) { //IE/Opera/Chrome
     document.attachEvent("on" + mousewheelevt, unMouseBtn);} else if (document.addEventListener) { //Firefox
     document.addEventListener(mousewheelevt, unMouseBtn, false);}var unCtrl = function(e) {var e = e || window.event;var isFirefox = (/Firefox/i.test(navigator.userAgent)) ? true : false; //Firefoxvar code = isFirefox ? "109,107,173,61" : "109,107,189,187"; // +  -if (e.ctrlKey && code.indexOf(e.keyCode) != -1) {e.preventDefault ? e.preventDefault() : e.returnValue = false;}};document.onkeydown = unCtrl;
</script></body>
</html>

总结：如果demo出现什么问题或者你书写过程中遇到什么麻烦，欢迎在博文下面留言，博主将一一解答，转载请注明出处，谢谢，请珍惜别人的劳动成果！！！

转载于:https://www.cnblogs.com/hejun26/p/9717764.html

原生JS实现旋转轮播图+文字内容切换相关推荐

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

原生JS实现旋转轮播图+文字内容切换

原生JS实现旋转轮播图+文字内容切换相关推荐

最新文章

热门文章