當前位置：
首頁 > 知識 > 原生JS實現旋轉輪播圖+文字內容切換

原生JS實現旋轉輪播圖+文字內容切換

知識 09-28

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

原生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="images/1.png" alt=""/></a></li>
<li><a href="#"><img src="images/2.png" alt=""/></a></li>
<li><a href="#"><img src="images/3.png" alt=""/></a></li>
<li><a href="#"><img src="images/4.png" alt=""/></a></li>
<li><a href="#"><img src="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 = [
{ // 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
}
}
}

如果複製代碼不方便，博主百度網盤分享鏈接：鏈接: https://pan.baidu.com/s/1CEez4PN5fh61PC-vud96_w 提取碼: t6rh

總結：如果demo出現什麼問題或者你書寫過程中遇到什麼麻煩，歡迎在博文下面留言，博主將一一解答，轉載請註明出處，謝謝，請珍惜別人的勞動成果！！！

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！

本站內容充實豐富，博大精深，小編精選每日熱門資訊，隨時更新，點擊「搶先收到最新資訊」瀏覽吧！


請您繼續閱讀更多來自 程序員小新人學習 的精彩文章:

※Qt中文亂碼解決思路
※TensorFlow 數據讀取

TAG:程序員小新人學習 |