jqeury輪播圖插件 簡單教程（適合新手）
下面的實例說明都只是我這幾天下載後分析，並且我也是個新手，因此不免會有很多錯誤，這些都只是我我的的分享，但願有人能指出其中的錯誤，這樣你們能夠一塊兒學習一塊兒進步。javascript
（實例的完整代碼會在文章最後分享，圖片地址要修改的哦）css
1、第一個先從簡單下手，講漸變輪播圖。對了，這個是文字的，不過原理和圖片同樣。html
這是輪播圖部分的html代碼：
html5
<div class="newlist br-bg" id="hnews"> <h3 class="ti"> 廠房設備 <a href="Workshop/" title="廠房設備" class="more">更多>></a> </h3> <div class="newtextlist" id="hnewsitems"> <li class='list top'><a href='Workshop/Workshop6.html' title='空氣淨化器生產廠房' target='_self'>空氣淨化器生產廠房</a><span class='time'>2013-05-30</span></li> <li class='list '><a href='Workshop/Workshop9.html' title=' 旋風式除塵設備生產廠房' target='_self'> 旋風式除塵設備生產廠房</a><span class='time'>2013-05-29</span></li> <li class='list '><a href='Workshop/Workshop8.html' title='高溫帶式除塵設備生產廠房' target='_self'>高溫帶式除塵設備生產廠房</a><span class='time'>2013-05-29</span></li> <li class='list '><a href='Workshop/Workshop7.html' title='脫硫設備生產廠房' target='_self'>脫硫設備生產廠房</a><span class='time'>2013-05-29</span></li> <li class='list '><a href='Workshop/Workshop5.html' title=' 生活污水處理設備生產廠房' target='_self'> 生活污水處理設備生產廠房</a><span class='time'>2013-05-29</span></li> <li class='list '><a href='Workshop/Workshop4.html' title='工業污水處理設備生產廠房' target='_self'>工業污水處理設備生產廠房</a><span class='time'>2013-05-29</span></li> </div> <div id="dians" class="textr"> <a num="0" class="dian"> </a> <a num="2" class="dian"> </a> <a num="4" class="dian"> </a> </div> </div>
這是jquery的代碼： java
var time="";//定義全局變量
var index=0;
$(function(){
showatext(index);
//鼠標移入圖片導航點（即id爲dian的部分）時的操做
$(".dian").hover(
function(){
clearTimeout(time);
var k=$(this).attr("num");
$("#dians a").removeClass("top");
$(".newtextlist li").hide().stop().eq(k).fadeIn("slow");
$(".newtextlist li").eq(k).next().fadeIn("slow");
},
//鼠標移出圖片導航點（即id爲dian的部分）時的操做
function(){
//鼠標移出時，繼續向前輪播
index=parseInt($(this).attr("num"))+2==6?0:parseInt($(this).attr("num"))+2;
time=setTimeout("showatext("+index+")",3000);
}
);
});
//定時進行圖片的切換
function showatext(num){
index=num;
t=index==0?0:(index==2?1:2);
$("#dians a").removeClass("top").eq(t).addClass("top");//改變圖片導航點的樣式
$(".newtextlist li").hide().stop().eq(num).fadeIn("slow");
$(".newtextlist li").eq(num).next().fadeIn("slow");
index=index+2>4?0:(index+2);
time=setTimeout("showatext("+index+")",3000);
}
這是最後的結果截圖：jquery
上面的jquery函數和用法都是很基本的，你們能夠現看現查，或者以前不太瞭解的能夠找幾個簡單的基礎教程看看，推薦去http://www.w3school.com.cn/看看。ajax
2、 接下來這個實例是我研究得最久的了，開始是在找簡單的來研究，找了很久。由於網上關於滑動的輪播圖簡單的教程不多，插件卻是有不少。因此今天小弟就獻醜了，大膽給你們分享一個。
api
這是輪播圖部分的html代碼：app
<div id="banner"> <div id="ifocus_piclist"> <ul> <li><a href='' title='' target='_blank'> <img src="1369886297.jpg" alt="" width='1440' height='400'> </a></li> <li><a href='' title='' target='_blank'> <img src="1369883481.jpg" alt="" width='1440' height='400'> </a></li> <li><a href='' title='' target='_blank'> <img src="1369899496.jpg" alt="" width='1440' height='400'> </a></li> </ul> </div> <div id="ifocus_btn"> <ul> <li class=""> </li> <li class=""> </li> <li class=""> </li> </ul> </div> </div>
id爲ifocus_piclist的是圖片部分，id爲ifocus_btn是矩形導航部分。
框架
下面是css樣式：
body{margin:0 auto;}
#banner{width:100%;position:relative; height:400px;overflow:hidden;}
#banner #ifocus_piclist ul {width: 1440px; height: 400px; position:absolute;padding:0px;margin-top:0px;}
#banner #ifocus_piclist ul li {width: 1440px; height: 400px; float:left;}
#banner #ifocus_piclist ul li img{width:1440px; height:400px;border:none;}
#banner #ifocus_btn {position: absolute;padding-left: 3px;width: 1440px;bottom: 25px;height:14px;left:75%; zoom:1;}
#banner #ifocus_btn li {display:block; width:25px; height:6px; float:left;margin-right:5px; border:1px solid #fff; cursor:pointer;text-indent:9999px;}
#banner #ifocus_btn .current {text-align: left;margin-top: 0px;display: block;float: left;background:#fff;filter: alpha(opacity=100);}
這個就比較能夠有意思了，左右滑動。主要仍是這個定位position在做怪，id爲banner的元素的position爲relative，則其子元素中position爲absolute的ul以banner這個父元素進行絕對定位，ul實際上就是四張圖片並列在一塊兒，寬度爲1440px*3的元素。這樣利用jquery定時控制ul的css的left屬性就能夠實現滑動的效果了。（定位這些東西我也是接觸不久，並且樣式應該也有冗餘和不足，但願你們批評指正。）
下面是jquery：
$(function() {
var sWidth = $("#ifocus_btn").width(); //獲取焦點圖的寬度（顯示面積）
var len = $("#ifocus_btn ul li").length; //獲取焦點圖個數
var index = 0;
var picTimer;
//爲數字按鈕添加鼠標滑入事件，以顯示相應的內容
$("#ifocus_btn ul li").mouseenter(function() {
index = $("#ifocus_btn ul li").index(this);
showPics(index);
}).eq(0).trigger("mouseenter");
$("#ifocus_piclist ul").css("width",sWidth * (len + 1));
//鼠標滑入某li中的某div裏，調整其同輩div元素的透明度，因爲li的背景爲黑色，因此會有變暗的效果
$("#ifocus_piclist ul li div").hover(function() {
$(this).siblings().css("opacity",0.7);
},function() {
$("ifocus_piclist ul li div").css("opacity",1);
});
//鼠標滑上焦點圖時中止自動播放，滑出時開始自動播放
$("#ifocus_piclist").hover(function() {
clearInterval(picTimer);
},function() {
picTimer = setInterval(function() {
if(index == len) { //若是索引值等於li元素個數，說明最後一張圖播放完畢，接下來要顯示第一張圖，即調用showFirPic()，而後將索引值清零
showFirPic();
index = 0;
} else { //若是索引值不等於li元素個數，按普通狀態切換，調用showPics()
showPics(index);
}
index++;
},9000); //此3000表明自動播放的間隔，單位：毫秒
}).trigger("mouseleave");
function showPics(index) { //普通切換
var nowLeft = -index*sWidth; //根據index值計算ul元素的left值
$("#ifocus_piclist ul").stop(true,false).animate({"left":nowLeft}); //經過animate()調整ul元素滾動到計算出的position
$("#ifocus_btn ul li").removeClass("current");
$("#ifocus_btn ul li").eq(index).addClass("current");
}
function showFirPic() { //最後一張圖自動切換到第一張圖時專用
$("#ifocus_piclist ul").append($("#ifocus_piclist ul li:first").clone());
var nowLeft = -len*sWidth; //經過li元素個數計算ul元素的left值，也就是最後一個li元素的右邊
$("#ifocus_piclist ul").stop(true,false).animate({"left":nowLeft},900,function() {
//經過callback，在動畫結束後把ul元素從新定位到起點，而後刪除最後一個複製過去的元素
$("#ifocus_piclist ul").css("left","0");
$("#ifocus_btn ul li").removeClass("current");
$("#ifocus_btn ul li").eq(0).addClass("current");
});
}
});
這裏加了註釋，若是上面那個簡單的會了，相信這個你們應該能夠理解的。並且這個滑動的實例難點在於css的定位，jquery原本就是個簡單實用強大的好框架。
最後再給你們分享兩個實例的代碼
實例1：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<link media="screen" href="wenzi_css.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="newlist br-bg" id="hnews">
<h3 class="ti">
廠房設備
<a href="Workshop/" title="廠房設備" class="more">更多>></a>
</h3>
<div class="newtextlist" id="hnewsitems">
<li class='list top'><a href='Workshop/Workshop6.html' title='空氣淨化器生產廠房' target='_self'>空氣淨化器生產廠房</a><span class='time'>2013-05-30</span></li>
<li class='list '><a href='Workshop/Workshop9.html' title=' 旋風式除塵設備生產廠房' target='_self'> 旋風式除塵設備生產廠房</a><span class='time'>2013-05-29</span></li>
<li class='list '><a href='Workshop/Workshop8.html' title='高溫帶式除塵設備生產廠房' target='_self'>高溫帶式除塵設備生產廠房</a><span class='time'>2013-05-29</span></li>
<li class='list '><a href='Workshop/Workshop7.html' title='脫硫設備生產廠房' target='_self'>脫硫設備生產廠房</a><span class='time'>2013-05-29</span></li>
<li class='list '><a href='Workshop/Workshop5.html' title=' 生活污水處理設備生產廠房' target='_self'> 生活污水處理設備生產廠房</a><span class='time'>2013-05-29</span></li>
<li class='list '><a href='Workshop/Workshop4.html' title='工業污水處理設備生產廠房' target='_self'>工業污水處理設備生產廠房</a><span class='time'>2013-05-29</span></li>
</div>
<div id="dians" class="textr">
<a num="0" class="dian"> </a>
<a num="2" class="dian"> </a>
<a num="4" class="dian"> </a>
</div>
</div>
<footer>
</footer>
<script type="text/javascript">
var time="";//定義全局變量
var index=0;
$(function(){
showatext(index);
//鼠標移入圖片導航點（即id爲dian的部分）時的操做
$(".dian").hover(
function(){
clearTimeout(time);
var k=$(this).attr("num");
$("#dians a").removeClass("top");
$(".newtextlist li").hide().stop().eq(k).fadeIn("slow");
$(".newtextlist li").eq(k).next().fadeIn("slow");
},
//鼠標移出圖片導航點（即id爲dian的部分）時的操做
function(){
//鼠標移出時，繼續向前輪播
index=parseInt($(this).attr("num"))+2==6?0:parseInt($(this).attr("num"))+2;
time=setTimeout("showatext("+index+")",3000);
}
);
});
//定時進行圖片的切換
function showatext(num){
index=num;
t=index==0?0:(index==2?1:2);
$("#dians a").removeClass("top").eq(t).addClass("top");//改變圖片導航點的樣式
$(".newtextlist li").hide().stop().eq(num).fadeIn("slow");
$(".newtextlist li").eq(num).next().fadeIn("slow");
index=index+2>4?0:(index+2);
time=setTimeout("showatext("+index+")",3000);
}
</script>
</body>
</html>
wezi_css.css：
a{text-decoration:none;}
a:hover{text-decoration:underline;}
#hnews{border:1px solid #92e0fa;width:400px;margin:0 auto;padding-left:10px;padding-bottom:30px;}
#hnewsitems li{list-style:none;}
.more,.time{float:right;margin-right:10px;}
.time{color:#3c3d3d;}
.list{padding:4px;}
.list a{color:#191a1a;}
.textr{padding:10px;float:right;}
#dians a:hover{
background-position: -10px 0px;
}
#dians .top{
background-position: -10px 0px;
}
#dians a {
width: 10px;
height: 10px;
overflow: hidden;
display: block;
float: left;
margin-left: 8px;
background: url(dian.png) no-repeat scroll 0px 0px transparent;
}
截個圖：
實例二源碼：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>包裝裝橫公司網站模板|包裝裝橫企業網站模板-包裝裝橫</title>
<meta name="description" content="模板建站和純手工建站的區別在於：模板是「成衣」，你只須要去服裝店挑選，而所謂的純手工建站是裁縫師傅給你定製。功能和穩定性模板+成熟的CMS管理後臺大大優於「裁縫店」。" />
<meta name="keywords" content="包裝裝橫公司網站模板|包裝裝橫企業網站模板" />
<meta name="generator" content="MetInfo 5.1.7" />
<link href="favicon.ico" rel="shortcut icon" />
<script src="http://www.metinfo.cn/demo/met100/288/public/js/jQuery1.7.2.js" type="text/javascript"></script>
<!--[if IE]>
<script src="http://www.metinfo.cn/demo/met100/288/public/js/html5.js" type="text/javascript"></script>
<![endif]-->
<style>
body{margin:0 auto;}
#banner{width:100%; height:400px;overflow:hidden;position:relative;}
#banner #ifocus_piclist ul {width: 1440px; height: 400px; position:absolute;padding:0px;margin-top:0px;}
#banner #ifocus_piclist ul li {width:1440px;height:400px;float:left;}
#banner #ifocus_piclist ul li img{width:1440px; height:400px;border:none;}
#banner #ifocus_btn {position: absolute;padding-left: 3px;width: 1440px;bottom: 25px;height:14px;left:75%; zoom:1;}
#banner #ifocus_btn li {display:block; width:25px; height:6px; float:left;margin-right:5px; border:1px solid #fff; cursor:pointer;text-indent:9999px;}
#banner #ifocus_btn .current {text-align: left;margin-top: 0px;display: block;float: left;background:#fff;filter: alpha(opacity=100);}
</style>
</head>
<script type="text/javascript" src="banner.js"></script>
<body>
<header>
</header>
<div class="bannner">
<div class="indimg">
<div class="banner">
<div id="banner">
<div id="ifocus">
<div style="overflow: hidden" id="ifocus_pic">
<div style=" left: 0px" id="ifocus_piclist">
<ul>
<li><a href='' title='' target='_blank'> <img src="1369886297.jpg" alt="" width='1440' height='400'> </a></li>
<li><a href='' title='' target='_blank'> <img src="1369883481.jpg" alt="" width='1440' height='400'> </a></li>
<li><a href='' title='' target='_blank'> <img src="1369899496.jpg" alt="" width='1440' height='400'> </a></li>
</ul>
</div>
<div id="ifocus_btn">
<ul>
<li class=""> </li>
<li class=""> </li>
<li class=""> </li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body></html>
banner.js:
$(function() {
var sWidth = $("#ifocus_btn").width(); //獲取焦點圖的寬度（顯示面積）
var len = $("#ifocus_btn ul li").length; //獲取焦點圖個數
var index = 0;
var picTimer;
//爲數字按鈕添加鼠標滑入事件，以顯示相應的內容
$("#ifocus_btn ul li").mouseenter(function() {
index = $("#ifocus_btn ul li").index(this);
showPics(index);
}).eq(0).trigger("mouseenter");
$("#ifocus_piclist ul").css("width",sWidth * (len + 1));
//鼠標滑入某li中的某div裏，調整其同輩div元素的透明度，因爲li的背景爲黑色，因此會有變暗的效果
$("#ifocus_piclist ul li div").hover(function() {
$(this).siblings().css("opacity",0.7);
},function() {
$("ifocus_piclist ul li div").css("opacity",1);
});
//鼠標滑上焦點圖時中止自動播放，滑出時開始自動播放
$("#ifocus_piclist").hover(function() {
clearInterval(picTimer);
},function() {
picTimer = setInterval(function() {
if(index == len) { //若是索引值等於li元素個數，說明最後一張圖播放完畢，接下來要顯示第一張圖，即調用showFirPic()，而後將索引值清零
showFirPic();
index = 0;
} else { //若是索引值不等於li元素個數，按普通狀態切換，調用showPics()
showPics(index);
}
index++;
},9000); //此3000表明自動播放的間隔，單位：毫秒
}).trigger("mouseleave");
function showPics(index) { //普通切換
var nowLeft = -index*sWidth; //根據index值計算ul元素的left值
$("#ifocus_piclist ul").stop(true,false).animate({"left":nowLeft}); //經過animate()調整ul元素滾動到計算出的position
$("#ifocus_btn ul li").removeClass("current");
$("#ifocus_btn ul li").eq(index).addClass("current");
}
function showFirPic() { //最後一張圖自動切換到第一張圖時專用
$("#ifocus_piclist ul").append($("#ifocus_piclist ul li:first").clone());
var nowLeft = -len*sWidth; //經過li元素個數計算ul元素的left值，也就是最後一個li元素的右邊
$("#ifocus_piclist ul").stop(true,false).animate({"left":nowLeft},900,function() {
//經過callback，在動畫結束後把ul元素從新定位到起點，而後刪除最後一個複製過去的元素
$("#ifocus_piclist ul").css("left","0");
$("#ifocus_piclist ul li:last").remove();
$("#ifocus_btn ul li").removeClass("current");
$("#ifocus_btn ul li").eq(0).addClass("current");
});
}
});
截個圖：
嗯嗯，這博客確實有些長，並且語言也沒有組織好，很差意思呀！我也寫得脖子酸了，不過這幾天總算沒有白白浪費掉，總結了一點東西。今天就到這裏，晚安
相關文章
- 1. 最簡單的原生js輪播圖（適合新手）
- 2. 自制js輪播圖插件教程
- 3. 製作一個簡單的輪播圖（詳解新手教學）
- 4. 簡單輪播圖
- 5. 圖片輪播圖插件
- 6. 手機端輪播圖插件
- 7. swiper輪播圖插件
- 8. bootstrap 輪播圖插件
- 9. [jquery]輪播圖片插件
- 10. 簡單手寫js輪播
- 更多相關文章...
- • Maven 插件 - Maven教程
- • Eclipse 安裝插件 - Eclipse 教程
- • Github 簡明教程
- • Git可視化極簡易教程 — Git GUI使用方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 最簡單的原生js輪播圖（適合新手）
- 2. 自制js輪播圖插件教程
- 3. 製作一個簡單的輪播圖（詳解新手教學）
- 4. 簡單輪播圖
- 5. 圖片輪播圖插件
- 6. 手機端輪播圖插件
- 7. swiper輪播圖插件
- 8. bootstrap 輪播圖插件
- 9. [jquery]輪播圖片插件
- 10. 簡單手寫js輪播