javascript基礎(chǔ)知識(shí)之html5輪播圖實(shí)例講解（44）
更新時(shí)間：2017年02月17日 08:43:24 作者：厚積薄發(fā)2017
這篇文章主要為大家詳細(xì)介紹了javascript基礎(chǔ)知識(shí)之html5輪播圖，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了html5輪播圖的具體代碼，供大家參考，具體內(nèi)容如下
1.輪播圖的布局：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*去除默認(rèn)樣式*/
*{
margin: 0;
padding: 0;
}
/*設(shè)置div*/
#outer{
width: 520px;
height: 333px;
/*設(shè)置居中*/
margin: 50px auto;
/*
* 設(shè)置背景顏色
*/
background-color: greenyellow;
/*設(shè)置上下內(nèi)邊距*/
padding: 10px 0;
/*為父元素開(kāi)啟相對(duì)定位*/
position: relative;
/*隱藏溢出的內(nèi)容*/
overflow: hidden;
}
/*設(shè)置ul*/
#imgList{
/*去除項(xiàng)目符號(hào)*/
list-style: none;
/*設(shè)置ul的寬度*/
width: 2600px;
/*開(kāi)啟絕對(duì)定位*/
position: absolute;
/*
* 通過(guò)修改ul的left值，可以切換圖片
* 1 0px
* 2 -520px
* 3 -1040px
* 4 -1560px
* ....
*/
left: 0px;
}
/*設(shè)置li*/
li{
/*設(shè)置元素浮動(dòng)*/
float: left;
/*設(shè)置外邊距*/
margin: 0 10px;
}
/*設(shè)置導(dǎo)航按鈕*/
#nav{
/*開(kāi)啟絕對(duì)定位*/
position: absolute;
/*定位*/
bottom: 20px;
/*
* #outer 寬度 520px
*
* #nav 寬度 125px
*
* 520 - 125 = 395/2 = 197.5
*/
left: 197px;
}
#nav a{
/*設(shè)置a浮動(dòng)*/
float: left;
/*設(shè)置寬和高*/
width: 15px;
height: 15px;
/*設(shè)置背景顏色*/
background-color: red;
/*設(shè)置外邊距*/
margin: 0 5px;
/*設(shè)置透明*/
opacity: 0.5;
filter: alpha(opacity=50);
}
</style>
</head>
<body>
<!--
創(chuàng)建一個(gè)div作為容器
-->
<div id="outer">
<!--創(chuàng)建一個(gè)ul，用來(lái)保存圖片-->
<ul id="imgList">
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
<li><img src="img/5.jpg" /></li>
</ul>
<!--創(chuàng)建一個(gè)div來(lái)放導(dǎo)航按鈕-->
<div id="nav">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
</div>
</div>
</body>
</html>
2.輪播圖的邏輯：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*去除默認(rèn)樣式*/
*{
margin: 0;
padding: 0;
}
/*設(shè)置div*/
#outer{
width: 520px;
height: 333px;
/*設(shè)置居中*/
margin: 50px auto;
/*
* 設(shè)置背景顏色
*/
background-color: greenyellow;
/*設(shè)置上下內(nèi)邊距*/
padding: 10px 0;
/*為父元素開(kāi)啟相對(duì)定位*/
position: relative;
/*隱藏溢出的內(nèi)容*/
overflow: hidden;
}
/*設(shè)置ul*/
#imgList{
/*去除項(xiàng)目符號(hào)*/
list-style: none;
/*設(shè)置ul的寬度*/
width: 2600px;
/*開(kāi)啟絕對(duì)定位*/
position: absolute;
/*
* 通過(guò)修改ul的left值，可以切換圖片
* 1 0px
* 2 -520px
* 3 -1040px
* 4 -1560px
* ....
*/
left: 0px;
}
/*設(shè)置li*/
li{
/*設(shè)置元素浮動(dòng)*/
float: left;
/*設(shè)置外邊距*/
margin: 0 10px;
}
/*設(shè)置導(dǎo)航按鈕*/
#nav{
/*開(kāi)啟絕對(duì)定位*/
position: absolute;
/*定位*/
bottom: 20px;
/*
* #outer 寬度 520px
*
* #nav 寬度 125px
*
* 520 - 125 = 395/2 = 197.5
*/
left: 197px;
}
#nav a{
/*設(shè)置a浮動(dòng)*/
float: left;
/*設(shè)置寬和高*/
width: 15px;
height: 15px;
/*設(shè)置背景顏色*/
background-color: red;
/*設(shè)置外邊距*/
margin: 0 5px;
/*設(shè)置透明*/
opacity: 0.5;
filter: alpha(opacity=50);
}
#nav a:hover{
background-color: black;
}
</style>
<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript">
window.onload = function(){
//獲取id為imgList的ul
var imgList = document.getElementById("imgList");
//獲取所有的圖片標(biāo)簽
var imgs = document.getElementsByTagName("img");
//設(shè)置ul的寬度
imgList.style.width = 520 * imgs.length + "px";
//設(shè)置導(dǎo)航按鈕居中
//獲取id為outer的div
var outer = document.getElementById("outer");
//獲取id為nav的div
var nav = document.getElementById("nav");
nav.style.left = (outer.offsetWidth - nav.offsetWidth)/2 + "px";
//創(chuàng)建一個(gè)變量，來(lái)保存當(dāng)前顯示圖片的索引
var index = 0;
//獲取所有的超鏈接
var links = document.getElementsByTagName("a");
//設(shè)置對(duì)應(yīng)的超鏈接變成選中狀態(tài)
links[index].style.backgroundColor = "black";
//開(kāi)啟自動(dòng)切換圖片
autoChange();
/*
* 點(diǎn)擊超鏈接切換到對(duì)應(yīng)的圖片
* 點(diǎn)擊第一個(gè)超鏈接，切換到第一個(gè)圖片
* 點(diǎn)擊第二個(gè)超鏈接，切換到第二個(gè)圖片
*/
//為所有的超鏈接綁定單擊響應(yīng)函數(shù)
for(var i=0 ; i<links.length ; i++){
//在超鏈接中添加一個(gè)屬性
links[i].num = i;
links[i].onclick = function(){
//當(dāng)切換圖片時(shí)，為了不受自動(dòng)切換的影響需要將其關(guān)閉
clearInterval(autoTimer);
//獲取到當(dāng)前點(diǎn)擊的超鏈接的索引
//更新當(dāng)前圖片的索引
index = this.num;
//切換到對(duì)應(yīng)的圖片
/*
* 切換圖片，就是修改imgList的left屬性值
* 0 0*-520
* 1 1*-520
* 4 4*-520
*/
//imgList.style.left = -520*index + "px";
//設(shè)置過(guò)渡效果
move(imgList , "left" , -520*index , 20 , function(){
//圖片切換完畢，打開(kāi)自動(dòng)切換
autoChange();
});
setA();
};
}
//定義一個(gè)變量，保存自動(dòng)切換圖片的定時(shí)器
var autoTimer;
/*
* 定義一個(gè)函數(shù)，專(zhuān)門(mén)用來(lái)自動(dòng)切換圖片
*/
function autoChange(){
//開(kāi)啟一個(gè)定時(shí)器，來(lái)負(fù)責(zé)圖片的切換
autoTimer = setInterval(function(){
//索引自增
index++;
//判斷index值是否合法
index = index % imgs.length;
//切換圖片
move(imgList , "left" , -520*index , 20 , function(){
//動(dòng)畫(huà)執(zhí)行完畢，切換導(dǎo)航點(diǎn)
setA();
});
},3000);
}
/*
* 函數(shù)專(zhuān)門(mén)用來(lái)設(shè)置超鏈接的選中狀態(tài)的
*/
function setA(){
/*
* 因?yàn)樽詈笠粡垐D片和第一張是一樣的，所以當(dāng)顯示的圖片是最后一張時(shí)，應(yīng)該是第一個(gè)的超鏈接變顏色
*/
if(index >= imgs.length - 1){
index = 0;
//已經(jīng)切換到最后一張，瞬間將其切換到第一張
imgList.style.left = 0;
}
/*遍歷超鏈接*/
for(var i=0 ; i<links.length ; i++){
//將所有的超鏈接的背景顏色都設(shè)置為紅色
links[i].style.backgroundColor = "";
}
//將當(dāng)前選中的超鏈接設(shè)置為黑色
links[index].style.backgroundColor = "black";
}
};
</script>
</head>
<body>
<!--
創(chuàng)建一個(gè)div作為容器
-->
<div id="outer">
<!--創(chuàng)建一個(gè)ul，用來(lái)保存圖片-->
<ul id="imgList">
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
<li><img src="img/5.jpg" /></li>
<li><img src="img/1.jpg" /></li>
</ul>
<!--創(chuàng)建一個(gè)div來(lái)放導(dǎo)航按鈕-->
<div id="nav">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
</div>
</div>
</body>
</html>
外部js代碼：
/*
* 定義一個(gè)move()函數(shù)來(lái)執(zhí)行一些簡(jiǎn)單的動(dòng)畫(huà)效果
* 參數(shù)：
* obj 要執(zhí)行動(dòng)畫(huà)的對(duì)象
* attr 執(zhí)行動(dòng)畫(huà)時(shí)要修改的屬性
* target 執(zhí)行動(dòng)畫(huà)的目標(biāo)位置
* speed 動(dòng)畫(huà)執(zhí)行的速度
* callback 回調(diào)函數(shù)，當(dāng)動(dòng)畫(huà)執(zhí)行完畢以后，該回調(diào)函數(shù)會(huì)執(zhí)行
*/
function move(obj, attr, target, speed, callback) {
//關(guān)閉之前的定時(shí)器
/*
* 一般都會(huì)將定時(shí)器的標(biāo)識(shí)作為執(zhí)行動(dòng)畫(huà)對(duì)象的屬性保存，這樣可以確保只有當(dāng)前對(duì)象能訪問(wèn)到定時(shí)器
*/
clearInterval(obj.timer);
//判斷向左移還是向右移
//0 --> 800 向右移
//起始位置 < 目標(biāo)位置 則向右移動(dòng)，速度為正
//800 --> 0 向左移
//起始位置 > 目標(biāo)位置 則向左移動(dòng)，速度為負(fù)
//獲取元素的起始位置
var current = parseInt(getStyle(obj, attr));
if(current > target) {
//起始位置 > 目標(biāo)位置 則向左移動(dòng)，速度為負(fù)
speed = -speed;
}
//開(kāi)啟一個(gè)定時(shí)器，控制box1移動(dòng)
obj.timer = setInterval(function() {
//獲取box1的當(dāng)前的left值
var oldValue = parseInt(getStyle(obj, attr));
//通過(guò)舊值來(lái)計(jì)算新值
var newValue = oldValue + speed;
//判斷newValue是否大于800
/*
* 如果從0 向 800，執(zhí)行動(dòng)畫(huà)，則值越來(lái)越大
* 如果從800向0執(zhí)行動(dòng)畫(huà)，則值越來(lái)小
*/
if((speed > 0 && newValue > target) || (speed < 0 && newValue < target)) {
newValue = target;
}
//將box1的left值修改為新值
obj.style[attr] = newValue + "px";
//當(dāng)box1移動(dòng)到800px的位置時(shí)，停止移動(dòng)
if(newValue == target) {
clearInterval(obj.timer);
//調(diào)用回調(diào)函數(shù)
callback && callback();
}
}, 30);
}
/*
* 用來(lái)獲取任意元素的當(dāng)前樣式
* 參數(shù)：
* obj 要獲取樣式的元素
* name 要獲取的樣式的名字
*
* 在讀取元素的樣式時(shí)，如果元素沒(méi)有設(shè)置樣式，
* 則火狐、Chrome等瀏覽器會(huì)自動(dòng)計(jì)算元素的樣式值
* 而IE瀏覽器，有時(shí)用不會(huì)自動(dòng)計(jì)算，而是返回默認(rèn)值，比如寬度會(huì)返回auto
*
*/
function getStyle(obj, name) {
//判斷瀏覽器中是否含有g(shù)etComputedStyle這個(gè)方法
if(window.getComputedStyle) {
//支持正常的瀏覽器
return getComputedStyle(obj, null)[name];
} else {
//只支持IE
return obj.currentStyle[name];
}
}
/*
* 定義一個(gè)專(zhuān)門(mén)用來(lái)向元素中添加class的函數(shù)
* 參數(shù)：
* obj 要添加class屬性的對(duì)象
* cn 要添加的class的屬性值
*/
function addClass(obj, cn) {
//如果元素中有該class則不添加，沒(méi)有才添加
if(!hasClass(obj, cn)) {
obj.className += " " + cn;
}
}
/*
* 創(chuàng)建一個(gè)函數(shù)檢查一個(gè)元素中是否含有指定的class
* 如果有，則返回true。否則返回false
*/
function hasClass(obj, cn) {
//創(chuàng)建正則表達(dá)式
var reg = new RegExp("\\b" + cn + "\\b");
//返回檢查結(jié)果
return reg.test(obj.className);
}
/*
* 用來(lái)從指定元素中刪除class值的方法
*/
function removeClass(obj, cn) {
//要?jiǎng)h除一個(gè)class，就是將這個(gè)class替換為一個(gè)空串
//創(chuàng)建正則表達(dá)式
var reg = new RegExp("\\b" + cn + "\\b", "g");
//判斷obj中是否含有這個(gè)class
if(reg.test(obj.className)) {
//將內(nèi)容替換為空串
obj.className = obj.className.replace(reg, "");
}
}
/*
* 用來(lái)切換元素的class的方法
* 如果元素中含有該class，則刪除
* 如果元素中沒(méi)有該class，則添加
*
*/
function toggleClass(obj, cn) {
//檢查obj中是否含有cn
if(hasClass(obj, cn)) {
//有該class，則刪除
removeClass(obj, cn);
} else {
//沒(méi)有該class，則添加
addClass(obj, cn);
}
}
注：圖片自己找
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Javascript中獲取瀏覽器類(lèi)型和操作系統(tǒng)版本等客戶(hù)端信息常用代碼
跟蹤一些最基本的客戶(hù)端訪問(wèn)信息，這里將一些公用的代碼總結(jié)下來(lái),需要的朋友可以參考下2016-06-06
這篇文章主要為大家詳細(xì)介紹了移動(dòng)端效果之IndexList，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
JS實(shí)現(xiàn)圖片橫向滾動(dòng)效果示例代碼
圖片橫向滾動(dòng)效果，大家可能都已經(jīng)很熟悉了，本文為大家介紹下使用js實(shí)現(xiàn)橫向滾動(dòng)效果，喜歡的朋友可以參考下，希望對(duì)大家有所幫助2013-09-09
之前講了javascript對(duì)正則表達(dá)式的實(shí)現(xiàn)方式了，只定義了正則表達(dá)式，但是如何在javascript中真正使用正則表達(dá)式呢？在javascript中RegExp和String對(duì)象都有處理正則表達(dá)式的方法。2015-08-08
這篇文章主要介紹了JavaScript?模塊化詳解，塊的內(nèi)部數(shù)據(jù)與實(shí)現(xiàn)是私有的,?只是向外部暴露一些接口(方法)與外部其它模塊通信，下面一起進(jìn)入文章來(lái)接更多詳細(xì)內(nèi)容2021-12-12
本文主要介紹了js實(shí)現(xiàn)返回頂部效果的實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
本文是一篇關(guān)于Javascript的中級(jí)進(jìn)階總結(jié)。小編希望大家能夠在30分鐘之內(nèi)閱讀完并認(rèn)真體會(huì)，多敲代碼，多總結(jié)，畢竟Javascript本身并不難。2016-07-07
生成html靜態(tài)文件后的分頁(yè)（客戶(hù)端版）
生成html靜態(tài)文件后的分頁(yè)（客戶(hù)端版）...2006-07-07
select下拉框插件jquery.editable-select詳解
本篇文章主要介紹了select下拉框插件jquery.editable-select。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)彈出層效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12