html对图片轮播脚本怎么调用,【jquery前端开发】可调整的幻灯片(图片轮播)
第一次寫博客，希望接下來寫的東西 或多或少能幫到些人，雖然這些東西都是一些大神前輩們寫了無數(shù)遍的東西，但我盡量以一名小白的視角把代碼寫得清楚點(diǎn)，好心人的就給點(diǎn)贊吧。
1.前期準(zhǔn)備
這是我們編寫代碼前必須要做的事，在這里我們首先要明確下作品要具備的功能。
1.支持幻燈片的大小控制
這里我們用SLIDER_BOX_WIDTH,SLIDER_BOX_HEIGHT分別表示幻燈片的寬和高
2.支持幻燈片放置位置的控制，即可以將幻燈片放在任何DIV下
這里我們用SLIDER_BOX_CLASS 表示裝入幻燈片的DIV的類名
3.支持幻燈片切換方式的變換
這里我們用SLIDER_TYPE 表示幻燈片的切換方式，這里主要是兩種(slider滑動和fade淡入淡出)
4.支持圖片張數(shù)的添加
這里我們用NUM_OF_IMG 表示
5.能夠根據(jù)需要調(diào)整是否自動播放，動畫的運(yùn)行時(shí)間，動畫的間隔時(shí)間，以及是否懸停，顯示內(nèi)容等等，這些就等到我們做的時(shí)候再做說明。
其中調(diào)用的是一個(gè)style.css文件和一個(gè)slider.js文件
2.HTML準(zhǔn)備
slider其實(shí)就是加一個(gè)class名為slider_box的div罷了。。
3.CSS準(zhǔn)備
/*************reset***************/
html{color:#333;-webkit-text-size-adjust:none; }
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,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;}
h1,h2,h3,h4,h5,h6{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;}
上面這些是消除瀏覽器默認(rèn)樣式的代碼----恩，我復(fù)制的。
/************style**************/
/*寫滑動的時(shí)候定位得加上，fade方式的話可以不考慮*/
.slider_box{ /*最外層用來放置幻燈片的DIV*/
position: relative;
margin:0px auto;
overflow: hidden;
}
/*輪播器里的圖片，因?yàn)槲医o每個(gè)圖片加了個(gè)鏈接，所以是>a>img */
.slider_box>a>img{
position: absolute;
}
/*********左跳轉(zhuǎn)觸發(fā)器***********/
div.slider_box_left_turnTo{
background: url('../img/cho.png') no-repeat top left;
position: absolute;
left: 5%;
}
/*********右跳轉(zhuǎn)觸發(fā)器***********/
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;
}
/*用來放置相關(guān)控制元素的盒子*/
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%;
}
/*圖片對應(yīng)的跳轉(zhuǎn)點(diǎn)的樣式*/
li.slider_box_point_turnTo{
background: url('../img/bnt.png') no-repeat top;
}
li.slider_box_point_turnTo:hover{
cursor: pointer;
}
/*用來放置圖片介紹內(nèi)容的盒子*/
div.slider_box_content{
position: absolute;
background: rgba(0,0,0,0.6);
width: 100%;
font-size: 15%;
color: #fff;
overflow: hidden;
}
4.jquery準(zhǔn)備
首先給初學(xué)者介紹下圖片輪播實(shí)現(xiàn)的基本原理，即：通過每隔一段時(shí)間(setInterval)觸發(fā)(trigger)一次點(diǎn)擊(鼠標(biāo)懸浮)事件來完成一個(gè)功能。這個(gè)功能是：當(dāng)鼠標(biāo)點(diǎn)擊(懸浮)的時(shí)候，某張圖片完成一次animate動作。這個(gè)東西其實(shí)就是 給 點(diǎn)擊滑動 加了個(gè)循環(huán)觸發(fā)。
正餐來了
因?yàn)閷戇@東我是要強(qiáng)調(diào)可拓展，可重用，所以基本都要把jquery代碼分門別類放到函數(shù)中，通過函數(shù)間的調(diào)用來完成功能。(←_ ←|| 我又在裝了!!)
相關(guān)參數(shù)/****************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, //跳轉(zhuǎn)點(diǎn)的左右外距(px)
NUM_OF_IMG = 3, //圖片的張數(shù)
IMG_SRC = ["img/1.jpg","img/2.jpg","img/3.jpg"], //圖片的地址,數(shù)組形式
IMG_LINK = ["#","#","#"], //每張圖片對應(yīng)的鏈接,輕按圖片對應(yīng)的順序?qū)懭?/p>
AUTO_PLAY = true, //自動播放(true,false)
SPEED = 300, //動畫運(yùn)行的時(shí)間(ms)
TIME_DELAY = 4000, //自動跳轉(zhuǎn)時(shí)的時(shí)間間隔(ms)
HOVER_STOP = false, //是否啟用懸停效果(true,false)
CONTENT_SHOW = false, //是否顯示內(nèi)容盒子(true,false)
CONTENT_FONT_COLOR = "#FFF"; //盒子內(nèi)容的字體顏色
⑴元素動態(tài)添加的功能集合//added about
//圖片添加函數(shù)
//傳遞進(jìn)來的參數(shù)從左往右代表的分別是:要放入圖片的DIV類名，圖片的數(shù)目
//，圖片的地址(數(shù)組)，對應(yīng)圖片的鏈接(數(shù)組，與圖片順序?qū)?yīng))
//，圖片的寬度，圖片的高度(這些其實(shí)和盒子大小是一樣的)
//實(shí)現(xiàn)的過程是：通過循環(huán)把不同的圖片和鏈接打包放入到DIV盒子中，因?yàn)?/p>
//我們在設(shè)置CSS的時(shí)候已經(jīng)設(shè)了定位，所以不用擔(dān)心樣式的問題
//此段JS生成的html代碼相當(dāng)于:
//
//
//以后的代碼的功能都類似(←_ ←上面是寫給初學(xué)者的，大神可略過)
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];
$('',{
href : img_link[i],
html : $('',{
src : addr,
class : 'img_'+i,
width : S_width,
height: S_height
})
}).appendTo(slider_box_class);
}
}
//跳轉(zhuǎn)點(diǎn)添加函數(shù)
//從左往右的參數(shù)是：點(diǎn)的數(shù)目(與IMG的張數(shù)一致且分別對應(yīng))
//，跳轉(zhuǎn)點(diǎn)的左右外邊距，以及存放跳轉(zhuǎn)點(diǎn)盒子的高度值
//大家在這一段代碼可能發(fā)現(xiàn)一些參數(shù)是有計(jì)算的，這是
//為了使內(nèi)部的元素能夠隨幻燈片播放器的大小自動調(diào)整
//計(jì)算方法的話可以進(jìn)行改變，我這里只是提供個(gè)參考，
//不過提醒一點(diǎn)的是大家改之前最好先看看控制元素對應(yīng)圖片的分辨率
//以免造成樣式錯(cuò)位等問題
function Add_Point(num,point_l_r_margin,pointBox_height){
var i;
for(i=0;i<=num-1;i++)
{
$('
',{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');
}
}
//跳轉(zhuǎn)盒子添加函數(shù)
//參數(shù)從左往右是：最外層盒子class名，跳轉(zhuǎn)盒子的寬，跳轉(zhuǎn)盒子的高
//這里的代碼看起來可能會有點(diǎn)亂，但沒辦法，我試過寫簡單點(diǎn)，但老是
//報(bào)錯(cuò)，所以就只能這樣寫了，如果大家有簡單的寫法歡迎來分享，留言就
//行了。因?yàn)樘D(zhuǎn)盒子里面要存放 左跳轉(zhuǎn)的按鈕，右跳轉(zhuǎn)的按鈕和跳轉(zhuǎn)點(diǎn)
//所以html:"" 這里是按 左跳轉(zhuǎn)，跳轉(zhuǎn)點(diǎn)，右跳轉(zhuǎn)的順序添加的，不懂的話
//看下我代碼的演示效果就行了
function Add_pointBox(slider_box_class,pointBox_width,pointBox_height){
$('
class : 'slider_box_pointBox_turnTo',
style : 'width:'+pointBox_width+'px;height:'+pointBox_height+'px;bottom:0px;',
html : '
}).appendTo(slider_box_class);
}
//內(nèi)容盒子的設(shè)置
//參數(shù)的話大家應(yīng)該能看懂了，都差不多
//其實(shí)這里我的本意是想寫成接受后臺數(shù)據(jù)的，但因?yàn)樽罱鐖F(tuán)的活動
//就擱置了下來，大家如果有興趣也看得起我這些代碼的話，可以自行拓展
function ContentBox_Set(slider_box_class,content_show,color,S_width,S_height,pointBox_height){
if(content_show){
$('
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);
}
}
⑵生成相關(guān)html的函數(shù)
//adjust about
//這里的話純粹就是將前面那些生成html代碼的元素給整合實(shí)現(xiàn)了
//我還加了個(gè)判斷，當(dāng)播放器的寬高小于某個(gè)值的時(shí)候會進(jìn)行重置，
//因?yàn)楫?dāng)播放器很小的時(shí)候真的太難看了，所以強(qiáng)迫癥的我弄了點(diǎn)處理措施
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);
}
⑶這里是跟顯示相關(guān)的函數(shù)//show about
//這里基本上都是循環(huán)實(shí)現(xiàn)的過程
//跳轉(zhuǎn)點(diǎn)樣式變化
//當(dāng)跳轉(zhuǎn)到某張圖片時(shí)，對應(yīng)的跳轉(zhuǎn)點(diǎn)設(shè)置為高亮
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');
}
//左滑動的效果實(shí)現(xiàn)
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);
}
//右滑動的效果實(shí)現(xiàn)
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);
}
//相關(guān)跳轉(zhuǎn)點(diǎn)被點(diǎn)擊時(shí)的事件處理函數(shù)，我這里用來live，但現(xiàn)在的jquery都
//不用live，改成on和off了，請大家自己注意，因?yàn)槲覍戇@個(gè)代碼的時(shí)候還不
//知道，寫完才知道的。后面也不想改了。請大家諒解
//這里的處理過程是：通過獲取高亮的跳轉(zhuǎn)點(diǎn)的class值來判斷是哪張
//圖片要進(jìn)行跳轉(zhuǎn)
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);
}
//淡入淡出效果的實(shí)現(xiàn)函數(shù)
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);
}
⑷控制相關(guān)的函數(shù)
//control about
//跳轉(zhuǎn)點(diǎn)被點(diǎn)擊時(shí)觸發(fā)的效果，兩個(gè)函數(shù)：一個(gè)是滑動的觸發(fā)，一個(gè)是fade的
//觸發(fā)，這里的圖片滑動方向的判斷機(jī)制是：通過判斷 被點(diǎn)擊的點(diǎn) 與 當(dāng)前點(diǎn)
//的位置來判斷進(jìn)行左移或者右移，fade函數(shù)無判斷機(jī)制
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
{
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);
});
}
})
}
//判斷是否有懸停，是否自動播放，以及跳轉(zhuǎn)的方式等等
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);
})
}
}
⑸最后是調(diào)用了
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);
//這個(gè)是觸發(fā)函數(shù)
function Tri(){
$('.slider_box_right_turnTo').trigger('click');
}
到這里我們的編寫就基本完成了，實(shí)際上上述代碼還是可繼續(xù)拓展的，比如說通過判斷調(diào)整內(nèi)容區(qū)域顯示的位置，或者添加新的跳轉(zhuǎn)方式，或者將跳轉(zhuǎn)點(diǎn)設(shè)置為相應(yīng)的小圖片等等。。雖然我不知道我到底寫得算不算及格，但本人寫可拓展性的代碼的目的達(dá)到了，這里也和大家分享一下，歡迎大家多多交流。求大神輕噴！
總結(jié)
以上是生活随笔為你收集整理的html对图片轮播脚本怎么调用,【jquery前端开发】可调整的幻灯片(图片轮播)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python tfidf特征变换_Spa
- 下一篇： 岗位po是什么意思_劳务派遣是什么意思，