溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
第一次寫博客，希望接下來寫的東西 或多或少能幫到些人，雖然這些東西都是一些大神前輩們寫了無數遍的東西，但我盡量以一名小白的視角把代碼寫得清楚點，好心人的就給點贊吧。
DEMO演示效果
其中調用的是一個style.css文件和一個slider.js文件
2.HTML準備
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slider</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
</head>
<body>
<div class="slider_box"></div>
</body>
</html> 其實就是加一個class名為slider_box的div罷了。。
3.CSS準備
/*************reset***************/
html{color:#333;-webkit-text-size-adjust:none; }
body,div,dl,dt,dd,ul,ol,li,h2,h3,h4,h5,h6,h7,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,var,optgroup{font-style:inherit;font-weight:inherit;}
del,ins{text-decoration:none;}
li{list-style:none;}
h2,h3,h4,h5,h6,h7{font-size:100%;}q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:baseline;}
sub{vertical-align:baseline;}legend{color:#000;}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}
body{font-size:12px;}
a{color: #333333;text-decoration: none;}
a:hover{text-decoration:underline; color:c00;}上面這些是消除瀏覽器默認樣式的代碼----恩，我復制的。
/************style**************/
/*寫滑動的時候定位得加上，fade方式的話可以不考慮*/
.slider_box{ /*最外層用來放置幻燈片的DIV*/
position: relative;
margin:0px auto;
overflow: hidden;
}
/*輪播器里的圖片，因為我給每個圖片加了個鏈接，所以是>a>img */
.slider_box>a>img{
position: absolute;
}
/*********左跳轉觸發器***********/
div.slider_box_left_turnTo{
background: url('../img/cho.png') no-repeat top left;
position: absolute;
left: 5%;
}
/*********右跳轉觸發器***********/
div.slider_box_right_turnTo{
background: url('../img/cho.png') no-repeat top right;
position: absolute;
right: 5%;
}
div.slider_box_left_turnTo:hover{
background-position: bottom left;
cursor: pointer;
}
div.slider_box_right_turnTo:hover{
background-position: bottom right;
cursor: pointer;
}
/*用來放置相關控制元素的盒子*/
div.slider_box_pointBox_turnTo{
width: 100%;
position: absolute;
background: rgba(0,0,0,0.4);
}
ul.slider_box_pointBox_turnTo{
position: absolute;
margin-left: -60px;
top:40%;
left: 45%;
}
/*圖片對應的跳轉點的樣式*/
li.slider_box_point_turnTo{
background: url('../img/bnt.png') no-repeat top;
}
li.slider_box_point_turnTo:hover{
cursor: pointer;
}
/*用來放置圖片介紹內容的盒子*/
div.slider_box_content{
position: absolute;
background: rgba(0,0,0,0.6);
width: 100%;
font-size: 15%;
color: #fff;
overflow: hidden;
}4.jquery準備
首先給初學者介紹下圖片輪播實現的基本原理，即：通過每隔一段時間(setInterval)觸發(trigger)一次點擊(鼠標懸浮)事件來完成一個功能。這個功能是：當鼠標點擊（懸浮）的時候，某張圖片完成一次animate動作。這個東西其實就是 給 點擊滑動 加了個循環觸發。
正餐來了
因為寫這東我是要強調可拓展，可重用，所以基本都要把jquery代碼分門別類放到函數中，通過函數間的調用來完成功能。（←_ ←|| 我又在裝了!!）
相關參數
/****************DATA_SET*******************/
var SLIDER_BOX_CLASS = ".slider_box", //要放置幻燈片的class名
SLIDER_BOX_WIDTH = 1024, //幻燈片圖片的寬度(px)
SLIDER_BOX_HEIGHT = 640, //幻燈片圖片的高度(px)
SLIDER_TYPE = "slider", //幻燈片動畫的方式(slider,fade)
POINT_L_R_MARGIN = 20, //跳轉點的左右外距(px)
NUM_OF_IMG = 3, //圖片的張數
IMG_SRC = ["img/1.jpg","img/2.jpg","img/3.jpg"], //圖片的地址,數組形式
IMG_LINK = ["#","#","#"], //每張圖片對應的鏈接,輕按圖片對應的順序寫入
AUTO_PLAY = true, //自動播放(true,false)
SPEED = 300, //動畫運行的時間（ms）
TIME_DELAY = 4000, //自動跳轉時的時間間隔(ms)
HOVER_STOP = false, //是否啟用懸停效果(true,false)
CONTENT_SHOW = false, //是否顯示內容盒子(true,false)
CONTENT_FONT_COLOR = "#FFF"; //盒子內容的字體顏色⑴元素動態添加的功能集合
//added about
//圖片添加函數
//傳遞進來的參數從左往右代表的分別是:要放入圖片的DIV類名，圖片的數目
//，圖片的地址（數組），對應圖片的鏈接（數組，與圖片順序對應）
//，圖片的寬度，圖片的高度（這些其實和盒子大小是一樣的）
//實現的過程是：通過循環把不同的圖片和鏈接打包放入到DIV盒子中，因為
//我們在設置CSS的時候已經設了定位，所以不用擔心樣式的問題
//此段JS生成的html代碼相當于:
//<a href="img_link[i]">
//<img class="img_i" src="addr" width="S_width" height="S_height"></a>
//以后的代碼的功能都類似（←_ ←上面是寫給初學者的，大神可略過）
function Add_Img(slider_box_class,num,src,img_link,S_width,S_height){
var i,addr;
for(i=num-1;i>=0;i--)
{
addr = src[i];
$('<a/>',{
href : img_link[i],
html : $('<img/>',{
src : addr,
class : 'img_'+i,
width : S_width,
height: S_height
})
}).appendTo(slider_box_class);
}
}
//跳轉點添加函數
//從左往右的參數是：點的數目（與IMG的張數一致且分別對應）
//，跳轉點的左右外邊距，以及存放跳轉點盒子的高度值
//大家在這一段代碼可能發現一些參數是有計算的，這是
//為了使內部的元素能夠隨幻燈片播放器的大小自動調整
//計算方法的話可以進行改變，我這里只是提供個參考，
//不過提醒一點的是大家改之前最好先看看控制元素對應圖片的分辨率
//以免造成樣式錯位等問題
function Add_Point(num,point_l_r_margin,pointBox_height){
var i;
for(i=0;i<=num-1;i++)
{
$('<li/>',{
class : 'slider_box_point_turnTo list_'+i,
style : 'margin- left:'+point_l_r_margin+'px;margin-right:'+point_l_r_margin+'px;float:left;height:'+(pointBox_height*16/42)+'px;width:'+(pointBox_height*17/42)+'px;background-size:'+(pointBox_height*17/42)+'px '+(pointBox_height*32/42)+'px;'
}).appendTo('ul.slider_box_pointBox_turnTo');
}
}
//跳轉盒子添加函數
//參數從左往右是：最外層盒子class名，跳轉盒子的寬，跳轉盒子的高
//這里的代碼看起來可能會有點亂，但沒辦法，我試過寫簡單點，但老是
//報錯，所以就只能這樣寫了，如果大家有簡單的寫法歡迎來分享，留言就
//行了。因為跳轉盒子里面要存放 左跳轉的按鈕，右跳轉的按鈕和跳轉點
//所以html:"" 這里是按 左跳轉，跳轉點，右跳轉的順序添加的，不懂的話
//看下我代碼的演示效果就行了
function Add_pointBox(slider_box_class,pointBox_width,pointBox_height){
$('<div/>',{
class : 'slider_box_pointBox_turnTo',
style : 'width:'+pointBox_width+'px;height:'+pointBox_height+'px;bottom:0px;',
html : '<div class="slider_box_left_turnTo" ></div><ul class="slider_box_pointBox_turnTo"></ul><div class="slider_box_right_turnTo" ></div>'
}).appendTo(slider_box_class);
}
//內容盒子的設置
//參數的話大家應該能看懂了，都差不多
//其實這里我的本意是想寫成接受后臺數據的，但因為最近社團的活動
//就擱置了下來，大家如果有興趣也看得起我這些代碼的話，可以自行拓展
function ContentBox_Set(slider_box_class,content_show,color,S_width,S_height,pointBox_height){
if(content_show){
$('<div/>',{
class : 'slider_box_content',
style : 'color:'+color+';width:'+S_width+'px;height:'+(S_height*0.1+10)+'px;overflow:hidden;bottom:'+pointBox_height+'px;',
html : 'hello'
}).appendTo(slider_box_class);
}
}⑵生成相關html的函數
//adjust about
//這里的話純粹就是將前面那些生成html代碼的元素給整合實現了
//我還加了個判斷，當播放器的寬高小于某個值的時候會進行重置，
//因為當播放器很小的時候真的太難看了，所以強迫癥的我弄了點處理措施
function Data_Adjust(slider_box_class,S_width,S_height,num,src,img_link,point_l_r_margin,content_show,color){
var pointBox_height = 24 + S_height/40;
if(S_width<=300 || S_height<=200)
{
S_width = 1024;
S_height = 640;
}
//slider box adjust
$(slider_box_class).css({'width':S_width,'height':S_height});
//content box adjust
Add_Img(slider_box_class,num,src,img_link,S_width,S_height);
Add_pointBox(slider_box_class,S_width,pointBox_height);
Add_Point(num,point_l_r_margin,pointBox_height);
ContentBox_Set(slider_box_class,content_show,color,S_width,S_height,pointBox_height);
}⑶這里是跟顯示相關的函數
//show about
//這里基本上都是循環實現的過程
//跳轉點樣式變化
//當跳轉到某張圖片時，對應的跳轉點設置為高亮
function Point_change(i){
$('.slider_box_point_turnTo').css({'background-position':'top'});
$('.slider_box_point_turnTo').attr('id',"");
$('.list_'+i).css({'background-position':'bottom'});
$('.list_'+i).attr('id','change_point');
}
//左滑動的效果實現
function Slider_left(slider_box_class,num,width,speed,i)
{
$(slider_box_class).find('img').not('.img_'+i).css({'left':width+'px'});
$(slider_box_class).find('img.img_'+i).animate({left:'-'+width+'px'},speed);
i==num-1?i=0:i++;
$(slider_box_class).find('img.img_'+i).animate({left:'0px'},speed);
}
//右滑動的效果實現
function Slider_right(slider_box_class,num,width,speed,i){
$(slider_box_class).find('img').not('.img_'+i).css({'left':'-'+width+'px'});
$(slider_box_class).find('img.img_'+i).animate({left:width+'px'},speed);
i==0?i=num-1:i--;
$(slider_box_class).find('img.img_'+i).animate({left:'0px'},speed);
}
//相關跳轉點被點擊時的事件處理函數，我這里用來live，但現在的jquery都
//不用live，改成on和off了，請大家自己注意，因為我寫這個代碼的時候還不
//知道，寫完才知道的。后面也不想改了。請大家諒解
//這里的處理過程是：通過獲取高亮的跳轉點的class值來判斷是哪張
//圖片要進行跳轉
function Type_slider(slider_box_class,num,width,speed){
var i = 0;
$('.list_'+i).css({'background-position':'bottom'});
$('.list_'+i).attr('id','change_point');
var long_class;
$(slider_box_class).find('div.slider_box_right_turnTo').live('click',function(){
long_class = $(slider_box_class).find('li#change_point').attr('class');
i = long_class.substring((long_class.length)-1);
if(!$(slider_box_class).find('img').is(':animated'))
{
Slider_left(slider_box_class,num,width,speed,i);
i==num-1?i=0:i++;
Point_change(i);
}
})
$(slider_box_class).find('div.slider_box_left_turnTo').live('click',function(){
long_class = $(slider_box_class).find('li#change_point').attr('class');
i = long_class.substring((long_class.length)-1);
if(!$(slider_box_class).find('img').is(':animated'))
{
Slider_right(slider_box_class,num,width,speed,i);
i==0?i=num-1:i--;
Point_change(i);
}
})
Point_click_slider(slider_box_class,width,speed);
}
//淡入淡出效果的實現函數
function Type_fade(slider_box_class,num,speed)
{
var i=0;
$(slider_box_class).find('img').not('.img_'+i).hide();
$('.list_'+i).css({'background-position':'bottom'});
$('.list_'+i).attr('id','change_point');
$(slider_box_class).find('div.slider_box_right_turnTo').click(function(){
if(!$(slider_box_class).find('img').is(':animated'))
{
$(slider_box_class).find('img.img_'+i).fadeOut(speed,function(){
i==num-1?i=0:i++;
$(slider_box_class).find('img.img_'+i).fadeIn(speed);
Point_change(i);
});
}
})
$(slider_box_class).find('div.slider_box_left_turnTo').click(function(){
if(!$(slider_box_class).find('img').is(':animated'))
{
$(slider_box_class).find('img.img_'+i).fadeOut(speed,function(){
i==0?i=num-1:i--;
$(slider_box_class).find('img.img_'+i).fadeIn(speed);
Point_change(i);
});
}
})
Point_click_fade(slider_box_class,num,speed);
}⑷控制相關的函數
//control about
//跳轉點被點擊時觸發的效果，兩個函數：一個是滑動的觸發，一個是fade的
//觸發，這里的圖片滑動方向的判斷機制是：通過判斷 被點擊的點 與 當前點
//的位置來判斷進行左移或者右移，fade函數無判斷機制
function Point_click_slider(slider_box_class,width,speed){
var i,long_class;
$('.slider_box_point_turnTo').live('click',function(){
var this_li = event.target;
var P_class = $(this_li).attr('class');
var $length = P_class.length;
var j = P_class.substring($length-1);
long_class = $(slider_box_class).find('li#change_point').attr('class');
i = long_class.substring((long_class.length)-1);
if(j>i)
{
if(!$(slider_box_class).find('img').is(':animated'))
{
$(slider_box_class).find('img').not('.img_'+i).css({'left':width+'px'});
$(slider_box_class).find('img.img_'+i).animate({left:'-'+width+'px'},speed);
$(slider_box_class).find('img.img_'+j).animate({left:'0px'},speed);
Point_change(j);
}
}else if(j<i)
{
if(!$(slider_box_class).find('img').is(':animated'))
{
$(slider_box_class).find('img').not('.img_'+i).css({'left':'-'+width+'px'});
$(slider_box_class).find('img.img_'+i).animate({left:width+'px'},speed);
$(slider_box_class).find('img.img_'+j).animate({left:'0px'},speed);
Point_change(j);
}
}
})
}
function Point_click_fade(slider_box_class,num,speed){
var i,long_class;
$('.slider_box_point_turnTo').live('click',function(){
var this_li = event.target;
var P_class = $(this_li).attr('class');
var $length = P_class.length;
var j = P_class.substring($length-1);
long_class = $(slider_box_class).find('li#change_point').attr('class');
i = long_class.substring((long_class.length)-1);
if(!$(slider_box_class).find('img').is(':animated'))
{
$(slider_box_class).find('img.img_'+i).fadeOut(speed,function(){
$(slider_box_class).find('img.img_'+j).fadeIn(speed);
Point_change(j);
});
}
})
}
//判斷是否有懸停，是否自動播放，以及跳轉的方式等等
function Slider_Control(slider_box_class,num,type,width,auto,speed,circle_time,hover_stop){
var Time_circle;
if(type=="slider")
Type_slider(slider_box_class,num,width,speed);
if(type=="fade")
Type_fade(slider_box_class,num,speed);
if(auto)
Time_circle = setInterval("Tri()",circle_time);
if(hover_stop){
$('.slider_box_pointBox_turnTo').hover(function(){
clearInterval(Time_circle);
},function(){
Time_circle = setInterval("Tri()",circle_time);
})
}
}⑸最后是調用了
Data_Adjust(SLIDER_BOX_CLASS,SLIDER_BOX_WIDTH,SLIDER_BOX_HEIGHT,NUM_OF_IMG,IMG_SRC,IMG_LINK,POINT_L_R_MARGIN,CONTENT_SHOW,CONTENT_FONT_COLOR);
Slider_Control(SLIDER_BOX_CLASS,NUM_OF_IMG,SLIDER_TYPE,SLIDER_BOX_WIDTH,AUTO_PLAY,SPEED,TIME_DELAY,HOVER_STOP);
//這個是觸發函數
function Tri(){
$('.slider_box_right_turnTo').trigger('click');
}到這里我們的編寫就基本完成了，實際上上述代碼還是可繼續拓展的，比如說通過判斷調整內容區域顯示的位置，或者添加新的跳轉方式，或者將跳轉點設置為相應的小圖片等等。。雖然我不知道我到底寫得算不算及格，但本人寫可拓展性的代碼的目的達到了，這里也和大家分享一下，歡迎大家多多交流。求大神輕噴！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
