javascript基礎（html5輪播圖）（四十四）
1.輪播圖的佈局：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*去除預設樣式*/
*{
margin: 0;
padding: 0;
}
/*設定div*/
#outer{
width: 520px;
height: 333px;
/*設定居中*/
margin: 50px auto;
/*
* 設定背景顏色
*/
background-color: greenyellow;
/*設定上下內邊距*/
padding: 10px 0;
/*為父元素開啟相對定位*/
position: relative;
/*隱藏溢位的內容*/
overflow: hidden;
}
/*設定ul*/
#imgList{
/*去除專案符號*/
list-style: none;
/*設定ul的寬度*/
width: 2600px;
/*開啟絕對定位*/
position: absolute;
/*
* 通過修改ul的left值，可以切換圖片
* 1 0px
* 2 -520px
* 3 -1040px
* 4 -1560px
* ....
*/
left: 0px;
}
/*設定li*/
li{
/*設定元素浮動*/
float: left;
/*設定外邊距*/
margin: 0 10px;
}
/*設定導航按鈕*/
#nav{
/*開啟絕對定位*/
position: absolute;
/*定位*/
bottom: 20px;
/*
* #outer 寬度 520px
*
* #nav 寬度 125px
*
* 520 - 125 = 395/2 = 197.5
*/
left: 197px;
}
#nav a{
/*設定a浮動*/
float: left;
/*設定寬和高*/
width: 15px;
height: 15px;
/*設定背景顏色*/
background-color: red;
/*設定外邊距*/
margin: 0 5px;
/*設定透明*/
opacity: 0.5;
filter: alpha(opacity=50);
}
</style>
</head>
<body>
<!--
建立一個div作為容器
-->
<div id="outer">
<!--建立一個ul，用來儲存圖片-->
<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>
<!--建立一個div來放導航按鈕-->
<div id="nav">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*去除預設樣式*/
*{
margin: 0;
padding: 0;
}
/*設定div*/
#outer{
width: 520px;
height: 333px;
/*設定居中*/
margin: 50px auto;
/*
* 設定背景顏色
*/
background-color: greenyellow;
/*設定上下內邊距*/
padding: 10px 0;
/*為父元素開啟相對定位*/
position: relative;
/*隱藏溢位的內容*/
overflow: hidden;
}
/*設定ul*/
#imgList{
/*去除專案符號*/
list-style: none;
/*設定ul的寬度*/
width: 2600px;
/*開啟絕對定位*/
position: absolute;
/*
* 通過修改ul的left值，可以切換圖片
* 1 0px
* 2 -520px
* 3 -1040px
* 4 -1560px
* ....
*/
left: 0px;
}
/*設定li*/
li{
/*設定元素浮動*/
float: left;
/*設定外邊距*/
margin: 0 10px;
}
/*設定導航按鈕*/
#nav{
/*開啟絕對定位*/
position: absolute;
/*定位*/
bottom: 20px;
/*
* #outer 寬度 520px
*
* #nav 寬度 125px
*
* 520 - 125 = 395/2 = 197.5
*/
left: 197px;
}
#nav a{
/*設定a浮動*/
float: left;
/*設定寬和高*/
width: 15px;
height: 15px;
/*設定背景顏色*/
background-color: red;
/*設定外邊距*/
margin: 0 5px;
/*設定透明*/
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");
//獲取所有的圖片標籤
var imgs = document.getElementsByTagName("img");
//設定ul的寬度
imgList.style.width = 520 * imgs.length + "px";
//設定導航按鈕居中
//獲取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";
//建立一個變數，來儲存當前顯示圖片的索引
var index = 0;
//獲取所有的超連結
var links = document.getElementsByTagName("a");
//設定對應的超連結變成選中狀態
links[index].style.backgroundColor = "black";
//開啟自動切換圖片
autoChange();
/*
* 點選超連結切換到對應的圖片
* 點選第一個超連結，切換到第一個圖片
* 點選第二個超連結，切換到第二個圖片
*/
//為所有的超連結繫結單擊響應函式
for(var i=0 ; i<links.length ; i++){
//在超連結中新增一個屬性
links[i].num = i;
links[i].onclick = function(){
//當切換圖片時，為了不受自動切換的影響需要將其關閉
clearInterval(autoTimer);
//獲取到當前點選的超連結的索引
//更新當前圖片的索引
index = this.num;
//切換到對應的圖片
/*
* 切換圖片，就是修改imgList的left屬性值
* 0 0*-520
* 1 1*-520
* 4 4*-520
*/
//imgList.style.left = -520*index + "px";
//設定過渡效果
move(imgList , "left" , -520*index , 20 , function(){
//圖片切換完畢，開啟自動切換
autoChange();
});
setA();
};
}
//定義一個變數，儲存自動切換圖片的定時器
var autoTimer;
/*
* 定義一個函式，專門用來自動切換圖片
*/
function autoChange(){
//開啟一個定時器，來負責圖片的切換
autoTimer = setInterval(function(){
//索引自增
index++;
//判斷index值是否合法
index = index % imgs.length;
//切換圖片
move(imgList , "left" , -520*index , 20 , function(){
//動畫執行完畢，切換導航點
setA();
});
},3000);
}
/*
* 函式專門用來設定超連結的選中狀態的
*/
function setA(){
/*
* 因為最後一張圖片和第一張是一樣的，所以當顯示的圖片是最後一張時，應該是第一個的超連結變顏色
*/
if(index >= imgs.length - 1){
index = 0;
//已經切換到最後一張，瞬間將其切換到第一張
imgList.style.left = 0;
}
/*遍歷超連結*/
for(var i=0 ; i<links.length ; i++){
//將所有的超連結的背景顏色都設定為紅色
links[i].style.backgroundColor = "";
}
//將當前選中的超連結設定為黑色
links[index].style.backgroundColor = "black";
}
};
</script>
</head>
<body>
<!--
建立一個div作為容器
-->
<div id="outer">
<!--建立一個ul，用來儲存圖片-->
<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>
<!--建立一個div來放導航按鈕-->
<div id="nav">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
</html>
外部js程式碼：
/*
* 定義一個move()函式來執行一些簡單的動畫效果
* 引數：
* obj 要執行動畫的物件
* attr 執行動畫時要修改的屬性
* target 執行動畫的目標位置
* speed 動畫執行的速度
* callback 回撥函式，當動畫執行完畢以後，該回撥函式會執行
*/
function move(obj, attr, target, speed, callback) {
//關閉之前的定時器
/*
* 一般都會將定時器的標識作為執行動畫物件的屬性儲存，這樣可以確保只有當前物件能訪問到定時器
*/
clearInterval(obj.timer);
//判斷向左移還是向右移
//0 --> 800 向右移
//起始位置 < 目標位置 則向右移動，速度為正
//800 --> 0 向左移
//起始位置 > 目標位置 則向左移動，速度為負
//獲取元素的起始位置
var current = parseInt(getStyle(obj, attr));
if(current > target) {
//起始位置 > 目標位置 則向左移動，速度為負
speed = -speed;
}
//開啟一個定時器，控制box1移動
obj.timer = setInterval(function() {
//獲取box1的當前的left值
var oldValue = parseInt(getStyle(obj, attr));
//通過舊值來計算新值
var newValue = oldValue + speed;
//判斷newValue是否大於800
/*
* 如果從0 向 800，執行動畫，則值越來越大
* 如果從800向0執行動畫，則值越來小
*/
if((speed > 0 && newValue > target) || (speed < 0 && newValue < target)) {
newValue = target;
}
//將box1的left值修改為新值
obj.style[attr] = newValue + "px";
//當box1移動到800px的位置時，停止移動
if(newValue == target) {
clearInterval(obj.timer);
//呼叫回撥函式
callback && callback();
}
}, 30);
}
/*
* 用來獲取任意元素的當前樣式
* 引數：
* obj 要獲取樣式的元素
* name 要獲取的樣式的名字
*
* 在讀取元素的樣式時，如果元素沒有設定樣式，
* 則火狐、Chrome等瀏覽器會自動計算元素的樣式值
* 而IE瀏覽器，有時用不會自動計算，而是返回預設值，比如寬度會返回auto
*
*/
function getStyle(obj, name) {
//判斷瀏覽器中是否含有getComputedStyle這個方法
if(window.getComputedStyle) {
//支援正常的瀏覽器
return getComputedStyle(obj, null)[name];
} else {
//只支援IE
return obj.currentStyle[name];
}
}
/*
* 定義一個專門用來向元素中新增class的函式
* 引數：
* obj 要新增class屬性的物件
* cn 要新增的class的屬性值
*/
function addClass(obj, cn) {
//如果元素中有該class則不新增，沒有才新增
if(!hasClass(obj, cn)) {
obj.className += " " + cn;
}
}
/*
* 建立一個函式檢查一個元素中是否含有指定的class
* 如果有，則返回true。否則返回false
*/
function hasClass(obj, cn) {
//建立正規表示式
var reg = new RegExp("\\b" + cn + "\\b");
//返回檢查結果
return reg.test(obj.className);
}
/*
* 用來從指定元素中刪除class值的方法
*/
function removeClass(obj, cn) {
//要刪除一個class，就是將這個class替換為一個空串
//建立正規表示式
var reg = new RegExp("\\b" + cn + "\\b", "g");
//判斷obj中是否含有這個class
if(reg.test(obj.className)) {
//將內容替換為空串
obj.className = obj.className.replace(reg, "");
}
}
/*
* 用來切換元素的class的方法
* 如果元素中含有該class，則刪除
* 如果元素中沒有該class，則新增
*
*/
function toggleClass(obj, cn) {
//檢查obj中是否含有cn
if(hasClass(obj, cn)) {
//有該class，則刪除
removeClass(obj, cn);
} else {
//沒有該class，則新增
addClass(obj, cn);
}
}注：圖片自己找
相關文章
- 微信小程式功能-----基礎輪播圖配置微信小程式
- 輪播圖（JavaScript定時器）JavaScript定時器
- jQuery輪播圖之上下輪播jQuery
- JavaScript焦點圖輪播效果詳解JavaScript
- 前端基礎功能，原生js實現輪播圖例項教程前端JS
- Flutter輪播圖Flutter
- vue輪播圖Vue
- iOS 輪播圖iOS
- Html5、css、JavaScript基礎HTMLCSSJavaScript
- JavaScript字串動畫輪播效果JavaScript字串動畫
- js 輪播圖 (原生)JS
- jQuery Mobile圖片輪轉輪播jQuery
- 文字輪播與圖片輪播？CSS 不在話下CSS
- 記一個JavaScript圖片輪播思路與程式碼JavaScript
- JavaScript實戰專案：移動端 Touch 輪播圖JavaScript
- javascript實現的焦點圖輪播效果詳解JavaScript
- 基於 flex 的 order 實現 carousel 輪播圖Flex
- javascript基礎（事件的傳播）（三十五）JavaScript事件
- vue輪播圖外掛Vue
- ViewPage實現輪播圖View
- Banner實現輪播圖
- js實現輪播圖JS
- 圖片輪播--純cssCSS
- javascript基礎（滾輪的事件）（三十七）JavaScript事件
- java學習---前端---使用JavaScript和jQuery實現圖片輪播圖前端JavaScriptjQuery
- 微信小程式swiper輪播圖卡死來回瘋狂輪播微信小程式
- 造輪子之圖片輪播元件(swiper)元件
- 原生js實現輪播圖JS
- iOS無限輪播圖片iOS
- 圖片輪播元件實現元件
- Bootstrap-輪播圖-No.7boot
- JS完結：用JavaScript寫個功能完善的電商輪播圖JSJavaScript
- 小說APP原始碼，手動滑動輪播圖時，輪播圖跟隨移動APP原始碼
- 【iOS】自定義控制元件無限輪播 + 無限圖片輪播iOS控制元件
- 【Swift】自定義控制元件無限輪播 + 無限圖片輪播Swift控制元件
- Android 和 iOS 圖片輪播AndroidiOS
- react無縫滾動輪播圖React
- 如何使用JQ封裝輪播圖封裝