快捷導(dǎo)航

原生js實現(xiàn)旋轉(zhuǎn)木馬效果

更新時間：2022年02月23日 14:57:15 作者：hind?sight

這篇文章主要為大家詳細介紹了原生js實現(xiàn)旋轉(zhuǎn)木馬效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)旋轉(zhuǎn)木馬效果的具體代碼，供大家參考，具體內(nèi)容如下

html部分

<div class="wrap" id="wrap">
? ? <div class="slide" id="slide">
? ? ? ? <ul>
? ? ? ? ? ? <li><a href=""><img src="images/slidepic1.jpg" alt=""></a></li>
? ? ? ? ? ? <li><a href=""><img src="images/slidepic2.jpg" alt=""></a></li>
? ? ? ? ? ? <li><a href=""><img src="images/slidepic3.jpg" alt=""></a></li>
? ? ? ? ? ? <li><a href=""><img src="images/slidepic4.jpg" alt=""></a></li>
? ? ? ? ? ? <li><a href=""><img src="images/slidepic5.jpg" alt=""></a></li>
? ? ? ? </ul>
? ? ? ? <div class="arrow" id="arrow">
? ? ? ? ? ? <a href="javascript:" id="next"></a>
? ? ? ? ? ? <a href="javascript:" id="prev"></a>
? ? ? ? </div>
? ? </div>
</div>

css部分

@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;}
?
.wrap {
? ? margin: 100px auto;
? ? width: 1200px;
}
.slide {
? ? height: 500px;
? ? position: relative;
}
?
.slide li {
? ? position: absolute;
? ? left: 200px;
? ? top: 0;
}
.slide li img {
? ? width: 100%;
}
.arrow {
? ? opacity: 0;
}
#next,#prev {
? ? width: 76px;
? ? height: 112px;
? ? position: absolute;
? ? top: 50%;
? ? margin-top: -56px;
? ? background: url("../images/prev.png") no-repeat;
? ? z-index: 99;
}
#next {
? ? background-image: url("../images/next.png");
? ? right: 0;
}

js部分

<script src="common.js"></script>
? ? <script>
? ? ? ? var config = [
? ? ? ? ? ? {
? ? ? ? ? ? ? ? width: 400,
? ? ? ? ? ? ? ? opacity: 0.2,
? ? ? ? ? ? ? ? height: 250,
? ? ? ? ? ? ? ? left: 50,
? ? ? ? ? ? ? ? top: 20,
? ? ? ? ? ? ? ? zIndex: 2
? ? ? ? ? ? },//0
? ? ? ? ? ? {
? ? ? ? ? ? ? ? width: 600,
? ? ? ? ? ? ? ? opacity: 0.7,
? ? ? ? ? ? ? ? height: 350,
? ? ? ? ? ? ? ? left: 0,
? ? ? ? ? ? ? ? top: 70,
? ? ? ? ? ? ? ? zIndex: 3
? ? ? ? ? ? },//1
? ? ? ? ? ? {
? ? ? ? ? ? ? ? width: 800,
? ? ? ? ? ? ? ? opacity: 1,
? ? ? ? ? ? ? ? height: 500,
? ? ? ? ? ? ? ? left: 200,
? ? ? ? ? ? ? ? top: 100,
? ? ? ? ? ? ? ? zIndex: 4
? ? ? ? ? ? },//2
? ? ? ? ? ? {
? ? ? ? ? ? ? ? width: 600,
? ? ? ? ? ? ? ? opacity: 0.7,
? ? ? ? ? ? ? ? height: 350,
? ? ? ? ? ? ? ? left: 600,
? ? ? ? ? ? ? ? top: 70,
? ? ? ? ? ? ? ? zIndex: 3
? ? ? ? ? ? },//3
? ? ? ? ? ? {
? ? ? ? ? ? ? ? width: 400,
? ? ? ? ? ? ? ? opacity: 0.2,
? ? ? ? ? ? ? ? height: 250,
? ? ? ? ? ? ? ? left: 750,
? ? ? ? ? ? ? ? top: 20,
? ? ? ? ? ? ? ? zIndex: 2
? ? ? ? ? ? }//4
? ? ? ? ];
? ? ? ? //頁面加載事件
? ? ? ? window.onload = function () {
? ? ? ? ? ? var flag=true;//默認所有的動畫都結(jié)束了
? ? ? ? ? ? //獲取li標簽
? ? ? ? ? ? var list = my$("slide").getElementsByTagName("li");
? ? ? ? ? ? //散開圖片
? ? ? ? ? ? function assign() {
? ? ? ? ? ? ? ? for (var i = 0; i < list.length; i++) {
? ? ? ? ? ? ? ? ? ? animate(list[i], config[i],function () {
? ? ? ? ? ? ? ? ? ? ? ? flag=true;//回調(diào)函數(shù)，當動畫加載完后，flag變?yōu)閠rue
? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? assign();
? ? ? ? ? ? //點擊右邊焦點
? ? ? ? ? ? my$("next").onclick = function () {
? ? ? ? ? ? ? ? if (flag){
? ? ? ? ? ? ? ? ? ? flag=false;
? ? ? ? ? ? ? ? ? ? config.push(config.shift());//把數(shù)組中的第一個元素作為返回值并追加加到這個數(shù)組的最后面
? ? ? ? ? ? ? ? ? ? assign();
? ? ? ? ? ? ? ? }
? ? ? ? ? ? };
? ? ? ? ? ? //點擊左邊焦點
? ? ? ? ? ? my$("prev").onclick = function () {
? ? ? ? ? ? ? ? if (flag){
? ? ? ? ? ? ? ? ? ? flag=false;
? ? ? ? ? ? ? ? ? ? config.unshift(config.pop());//把數(shù)組的最后一個元素作為返回值并追加到這個數(shù)組的最前面
? ? ? ? ? ? ? ? ? ? assign();
? ? ? ? ? ? ? ? }
?
? ? ? ? ? ? };
? ? ? ? ? ? //鼠標進入逐漸的顯示左右焦點
? ? ? ? ? ? my$("slide").onmouseover=function () {
? ? ? ? ? ? ? ?animate(my$("arrow"),{"opacity":1});
? ? ? ? ? ? };
? ? ? ? ? ? //鼠標離開隱藏
? ? ? ? ? ? my$("slide").onmouseout = function () {
? ? ? ? ? ? ? ? animate(my$("arrow"),{"opacity":0});
? ? ? ? ? ? };
? ? ? ? };
</script>

common.js部分

//根據(jù)id獲取元素對象
function my$(id) {
? ? return document.getElementById(id);
}
/*
* element---任意的元素
* attr---屬性
* */
function getAttrValue(element,attr) {
? ? return element.currentStyle?element.currentStyle[attr] : window.getComputedStyle(element,null)[attr]||0;
}
//動畫函數(shù)
function animate(element,json,fn) {
? ? clearInterval(element.timeId);
? ? element.timeId=setInterval(function () {
? ? ? ? var flag=true;//假設(shè)都達到了目標
? ? ? ? for(var attr in json){
? ? ? ? ? ? if(attr=="opacity"){//判斷屬性是不是opacity
? ? ? ? ? ? ? ? var current= getAttrValue(element,attr)*100;
? ? ? ? ? ? ? ? //每次移動多少步
? ? ? ? ? ? ? ? var target=json[attr]*100;//直接賦值給一個變量,后面的代碼都不用改
? ? ? ? ? ? ? ? var step=(target-current)/10;//(目標-當前)/10
? ? ? ? ? ? ? ? step=step>0?Math.ceil(step):Math.floor(step);
? ? ? ? ? ? ? ? current=current+step;
? ? ? ? ? ? ? ? element.style[attr]=current/100;
? ? ? ? ? ? }else if(attr=="zIndex"){//判斷屬性是不是zIndex
? ? ? ? ? ? ? ? element.style[attr]=json[attr];
? ? ? ? ? ? }else{//普通的屬性
?
? ? ? ? ? ? ? ? //獲取當前的位置----getAttrValue(element,attr)獲取的是字符串類型
? ? ? ? ? ? ? ? var current= parseInt(getAttrValue(element,attr))||0;
? ? ? ? ? ? ? ? //每次移動多少步
? ? ? ? ? ? ? ? var target=json[attr];//直接賦值給一個變量,后面的代碼都不用改
? ? ? ? ? ? ? ? var step=(target-current)/10;//(目標-當前)/10
? ? ? ? ? ? ? ? step=step>0?Math.ceil(step):Math.floor(step);
? ? ? ? ? ? ? ? current=current+step;
? ? ? ? ? ? ? ? element.style[attr]=current+"px";
? ? ? ? ? ? }
? ? ? ? ? ? if(current!=target){
? ? ? ? ? ? ? ? flag=false;//如果沒到目標結(jié)果就為false
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? if(flag){//結(jié)果為true
? ? ? ? ? ? clearInterval(element.timeId);
? ? ? ? ? ? if(fn){//如果用戶傳入了回調(diào)的函數(shù)
? ? ? ? ? ? ? ? fn(); //就直接的調(diào)用,
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? console.log("target:"+target+"current:"+current+"step:"+step);
? ? },10);
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: