html實作文字輪轉效果,原生JS實作旋轉輪播圖+文字内容切換效果【附源碼】

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

需求： 點選左右按鈕實作切換使用者圖檔與資訊；

原理： 點選右側左側按鈕，把3号的樣式給2号，2号的給1号，1号的給5号，5号的給4号，4号的樣式給3号，然後根據現在是第幾張圖檔切換成對應的文字；

步驟：

1.讓頁面加載出所有盒子的樣式；

2.把兩側按鈕綁定事件(調用同一個方法，隻有一個參數，true為正向旋轉，false為反向旋轉)；

3.書寫函數： 操作函數：左按鈕：删除第一個，添加到最後一個； 右按鈕：删除最後一個，添加到第一個；

4.定義變量，根據對應變量切換對應的文字内容；

代碼事例如下：

HTML代碼：

寫法思路：

1.定義好5張圖檔，進行圖檔資訊切換；

2.書寫好你需要切換的文字内容，定義一個ID；

學員資訊輪播圖

• 

• 

• 

• 

• 

學員

歐陽常斌3

css代碼：

寫法思路：

1.定義好左右切換按鈕的背景圖檔；

2.清除預設樣式；

3.寫好絕對定位，相對定位；

@charset "UTF-8";

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 = [

{ // 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

animate(feedbackliArr[i],arr[i], function () {

flag = true;

});

}

}

}

動畫效果js代碼如下：

function show(ele){

ele.style.display = "block";

}

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

}

}

}

總結

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