快捷導(dǎo)航

js原生代碼實(shí)現(xiàn)輪播圖的實(shí)例講解

更新時(shí)間：2017年07月28日 07:41:30 投稿：jingxian

下面小編就為大家?guī)硪黄猨s原生代碼實(shí)現(xiàn)輪播圖的實(shí)例講解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

輪播圖是現(xiàn)在網(wǎng)站網(wǎng)頁上最常見的效果之一，對(duì)于輪播圖的功能，要求不同，效果也不同。我們見過很多通過不同的方式，實(shí)現(xiàn)這一效果，但是有很多比較麻煩，而且不容易理解，兼容性也不好。在這里分享一下，用js原生代碼，實(shí)現(xiàn)輪播圖的常見效果！思路比較清晰，而且可重復(fù)性高，也幾乎包含了現(xiàn)在網(wǎng)頁上輪播實(shí)現(xiàn)的所有效果！

一、現(xiàn)在我們來看看它是什么樣的效果，截一張圖給大家看：

二、無論我們做什么特效，都要記住一個(gè)原則，先寫靜態(tài)的代碼，再做動(dòng)態(tài)的處理！

我們的輪播靜態(tài)效果用html和css來實(shí)現(xiàn)：

1、為了代碼的規(guī)范性，我們采用css和js外聯(lián)的方式，如下：

2、body的部分也需要我們規(guī)范的命名：

好了，到這里我們們的html部分就結(jié)束了！現(xiàn)在框架已經(jīng)搭建好，下一步是css樣式設(shè)置了：

3、css樣式的設(shè)置，靈活性比較大，因?yàn)檫@要根據(jù)我們的頁面來做具體設(shè)置和規(guī)定，下面的效果僅供參考！我們直接上代碼：

/*內(nèi)外邊距的設(shè)置*/
* {
margin:0;
padding:0; 
}
/*圖片在box中的位置*/
img {
vertical-align: top;
}
/*盒子box的整體樣式*/
.css_box {
width: 500px;
height: 265px;
margin:100px auto;
position: relative;
overflow: hidden;
border: 1px solid green;
}
/*滾動(dòng)盒子樣式*/
.slider {
width: 500px;
height: 200px;
border: 1px solid red;

}
/*滾動(dòng)盒子主要部分的樣式*/
.slider-main {
border: 1px solid yellow;
width: 500px;
height: 200px;
}
/*滾動(dòng)盒子主要部分的圖片樣式*/
.slider-main-img {
position: absolute;
top: 0;
left: 0;
width: 500px;
height: 200px;
}
.slider-main-img img {
width: 100%;
}
/*兩側(cè)滾動(dòng)控制的樣式*/
.slider_ctrl {
text-align: center;
padding-top: 25px;
}
/*這樣的類名，在html中找不到，但是又起到了作用，所以只有可能是是在js中創(chuàng)建了這樣的類名！*/
/*控制點(diǎn)選輪播圖的樣式*/
.slider-ctrl-con {
width: 24px;
height: 20px;
display:inline-block;
background:url(../images/icon.jpg) no-repeat -24px -782px;
margin: 0 5px;
cursor: pointer;
text-indent: -20em;
overflow: hidden;
}
.current {
background-position: -24px -762px;
}

/*滑動(dòng)控制的兩個(gè)span樣式*/
.slider-ctrl-prev,.slider-ctrl-next {
position: absolute;
top: 50%;
margin-top: -35px;
background:url(../images/icon.jpg) no-repeat 6px top;
width: 30px;
height: 35px;
opacity: 0.8;
cursor: pointer;
}
.slider-ctrl-prev {
left: 0;
}
.slider-ctrl-next {
right: 0;
background-position: -6px -44px;
}
/*css樣式到此暫時(shí)結(jié)束*/

好了，到此我們的靜態(tài)的效果已經(jīng)搭建好，要想實(shí)現(xiàn)我們需要的功能js是我們的核心，下面我們就用原生的代碼來實(shí)現(xiàn)它：

關(guān)鍵技術(shù)一：我們的輪播圖要?jiǎng)悠饋恚枚〞r(shí)器現(xiàn)在自動(dòng)滾動(dòng)的效果，圖片的轉(zhuǎn)換牽涉到了層疊，最后我們再考慮到瀏覽器的兼容問題！

做到這些，是我們js的第一步。等等，因?yàn)閹缀跛械妮啿ザ家獙?shí)現(xiàn)這些效果，如果我們再能做一個(gè)封裝，隨時(shí)調(diào)用，那是不是就太完美了，

沒錯(cuò)，我們就是要這么做！

我在這里封裝了一個(gè)名叫animate的函數(shù)，函數(shù)封裝完成后我們只需要調(diào)用即可實(shí)現(xiàn)：

// 這是一個(gè)運(yùn)動(dòng)框架，而且是多屬性的！
// 創(chuàng)建一個(gè)名為animate的函數(shù)！obj為對(duì)象，json是json值，fn是回調(diào)函數(shù)！
function animate(obj,json,fn) 
{ 
clearInterval(obj.timer);//清除定時(shí)器，這一步是有影響的！
// 給對(duì)象設(shè)置一個(gè)定時(shí)器！
obj.timer = setInterval(function() 
{
var flag = true; //用來判斷定時(shí)器什么時(shí)候停止！

//for in 循環(huán)，遍歷json對(duì)象！ 
for(var attr in json){ 

var current = 0;
// 當(dāng)前的狀態(tài)，這一步很重要！
if(attr == "opacity")
{
current = parseInt(getStyle(obj,attr)*100);
}
else
{
current = parseInt(getStyle(obj,attr));
}
// 步長！
var step = ( json[attr] - current) / 10; 
step = step > 0 ? Math.ceil(step) : Math.floor(step);

// 判斷透明度！
if(attr == "opacity") 
{ //in是一個(gè)二元的運(yùn)算符，意思是第一個(gè)操作數(shù)的值是第二個(gè)操作數(shù)的屬性名，會(huì)返回true！
// 這樣就可以判斷這個(gè)對(duì)象的樣式上中是否有opacity的屬性了！
if("opacity" in obj.style) 
{
// 如果條件成立，設(shè)置透明度值
obj.style.opacity = (current + step) /100;
}
else
{ 
// 如果不成立，則使用濾鏡功能！

obj.style.filter = "alpha(opacity = "+(current + step)+")";

}
}

// 層疊！
else if(attr == "zIndex")
{
obj.style.zIndex = json[attr];
}
else
{
obj.style[attr] = current + step + "px" ;
}
// 截止值!
if(current != json[attr]) 
{
flag = false;
}
}
if(flag) 
{
clearInterval(obj.timer);
// 如果有回調(diào)就使用回調(diào)！
if(fn) 
{
fn(); 
}
}
},5)
}
// 考慮兼容性問題！
function getStyle(obj,attr) { 
if(obj.currentStyle) 
{
return obj.currentStyle[attr]; 
}
else
{
return window.getComputedStyle(obj,null)[attr]; 
}
}
// 多屬性運(yùn)動(dòng)框架結(jié)束！

關(guān)鍵技術(shù)二：有了animate的封裝函數(shù)，為我們節(jié)省了不少的力氣，可是我們面對(duì)不用的要求還要

有不同的效果啊，下面就讓我們來實(shí)現(xiàn)具體的效果！

1、我們使用js的從古到今沒有變過的第一步：獲取所有需要的元素，即是DOM的操作：