原生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:;padding:}
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:;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:;
} .feedbackslide li img{
width:100%;
box-shadow:#d6d4d3 0px 0px 20px;
} .feedbackarrow{
opacity:;
} .feedbackprev,.feedbacknext{
width:27px;
height:50px;
position: absolute;
top:50%;
margin-top:-25px;
background: url(../images/leftblue.png) no-repeat;
z-index:;
} .feedbacknext{
right:;
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 = [
{ //
width:120,
top:11,
left:87,
opacity:20,
zIndex:2
},
{ //
width:120,
top:11,
left:237,
opacity:40,
zIndex:3
},
{ //
width:144,
top:0,
left:387,
opacity:100,
zIndex:4
},
{ //
width:120,
top:11,
left:561,
opacity:40,
zIndex:3
},
{ //
width: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;
//兼容IE678
ele.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; //Firefox
var 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出现什么问题或者你书写过程中遇到什么麻烦，欢迎在博文下面留言，博主将一一解答，转载请注明出处，谢谢，请珍惜别人的劳动成果！！！
原生JS实现旋转轮播图+文字内容切换的更多相关文章
- 原生js实现轮播图
原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...
- 原生js焦点轮播图
原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...
- 原生js手动轮播图
手动轮播图,为轮播图中的一种,轮播图主要有无缝轮播,手动轮播,延迟轮播,切换轮播等等... 轮播图主要用于展现图片,新出商品,词条,又能美观网页.給网页中增加动态效果. 手动轮播,是小编认为最简单的一 ...
- 封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
- 原生JS实现轮播图的效果
原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...
- 使用原生js将轮播图组件化
代码地址如下:http://www.demodashi.com/demo/11316.html 这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...
- 用原生js封装轮播图
原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...
- 原生js焦点轮播图的实现
继续学习打卡,武汉加油,逆战必胜!今日咱们主要探讨一下原生js写轮播图的问题, 简单解析一下思路: 1,首先写好css样式问题 2,考虑全局变量:自动播放的定时器,以及记录图片位置的角标Index 2 ...
- 前端基础功能，原生js实现轮播图实例教程
轮播图是前端最基本.最常见的功能,不论web端还是移动端,大平台还是小网站,大多在首页都会放一个轮播图效果.本教程讲解怎么实现一个简单的轮播图效果.学习本教程之前,读者需要具备html和css技能,同 ...
随机推荐
- hive执行结果moveTask操作失败
hive执行结果moveTask操作失败 Apache Hive 2.1.0 ,在执行"INSERT OVERWRITE TABLE ...... select "或者 " ...
- Net系列框架-Dapper+AutoFac 基于接口
Net系列框架-Dapper+AutoFac 基于接口 工作将近6年多了,工作中也陆陆续续学习和搭建了不少的框架,后续将按由浅入深的方式,整理出一些框架源码,所有框架源码本人都亲自调试通过,如果有问题 ...
- 自己从0开始学习Unity的笔记 III （C#随机数产生基础练习）
自己开始尝试弄一下随机数,照着方法,自己做了个英雄打怪兽的测试 int heroAttack; ; ; Random attack = new Random(); //初始化一个随机数的类 heroA ...
- C# 多线程task
1.异步和多线程的区别?没什么太大区别.异步是目的,使用多线程实现.想想AJAX异步加载,不就是不想让浏览器界面卡住嘛,所以在程序中对于某些单独的操作,比如写日志,我们不想等它完成后再执行其它操作(因 ...
- Android移动客户端性能测试浅谈——电量
本文由作者张迎贞授权网易云社区发布. APP性能测试除了需要监控PCU.内存占用.流量等,还需要获取APP的电量数据,测试在可接受范围内,避免APP出现过度消耗电量的现象.手机有很多硬件模块:CPU, ...
- django系列4.1--模版系统,过滤器,标签,模版继承,组件
django 模版系统 一. 语法 { { 变量 } } {% 表达式 %} 二. 变量 { {变量名} } 深度查询据点符( . )在模版语言中有特殊的含义. 当模版系统遇到点(.) 查询顺序如下: ...
- python网络编程--TCP连接的三次握手(三报文握手)与四次挥手
一.TCP连接 运输连接有三个阶段: 连接建立.数据传送和连接释放. 在TCP连接建立过程中要解决以下三个问题: 1,要使每一方能够确知对方的存在. 2.要允许双方协商一些参数(如最大窗口之,是否使用 ...
- 201621123023《Java程序设计》第9周学习总结
一.本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 二.书面作业 1. List中指定元素的删除(题集题目) 1.1 实验总结.并回答:列举至少2种在List中删除 ...
- 护网杯圆满结束，还不满足？不如来看看大佬的WP扩展思路~
护网杯预选赛 WP转载自:https://qingchenldl.github.io/2018/10/13/%E6%8A%A4%E7%BD%91%E6%9D%AFWP-BitPwn/#more WEB ...
- python基础之循环
一.while循环 如果条件成立(true),重复执行相同操作,条件不符合,跳出循环 while 循环条件: 循环操作 (1)while循环示例 例:输入王晓明5门课程的考试成绩,计算平均成绩 i ...