原生JS實現旋轉輪播圖+文字內容切換效果【附源碼】

廢話不多說，直接上圖看效果：

創新互聯建站專注于清澗企業網站建設,響應式網站,商城網站建設。清澗網站建設公司,為清澗等地區提供建站服務。全流程按需定制設計，專業設計，全程項目跟蹤，創新互聯建站專業和態度為您提供的服務

原生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" rel="external nofollow" />
 <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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/1.png" alt=""/></a></li>
    <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/2.png" alt=""/></a></li>
    <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/3.png" alt=""/></a></li>
    <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/4.png" alt=""/></a></li>
    <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/5.png" alt=""/></a></li>
   </ul>
   <!--左右切換按鈕-->
   <div class="feedbackarrow" id="feedbackarrow">
    <a href="javascript:;" rel="external nofollow" rel="external nofollow" class="feedbackprev"></a>
    <a href="javascript:;" rel="external nofollow" rel="external nofollow" 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,h2,h3,h4,h5,h6,h7,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 = [
  { // 1
   width:120,
   top:11,
   left:87,
   opacity:20,
   zIndex:2
  },
  { // 2
   width:120,
   top:11,
   left:237,
   opacity:40,
   zIndex:3
  },
  { // 3
   width:144,
   top:0,
   left:387,
   opacity:100,
   zIndex:4
  },
  { // 4
   width:120,
   top:11,
   left:561,
   opacity:40,
   zIndex:3
  },
  { //5
   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
  }
 }
}

下面給大家奉上源碼下載：http://demo.jb51.net/js/2018/students.rar

總結

以上所述是小編給大家介紹的原生JS實現旋轉輪播圖+文字內容切換效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創新互聯網站的支持！

網站名稱：原生JS實現旋轉輪播圖+文字內容切換效果【附源碼】
URL網址：http://vcdvsql.cn/article10/pegogo.html

成都網站建設公司_創新互聯，為您提供、服務器托管、ChatGPT、App設計、響應式網站、做網站

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

原生JS實現旋轉輪播圖+文字內容切換效果【附源碼】