整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
學習完JQ以后，大家都會感覺比js原生應用起來更方便、更快捷。課上有一個小練習，是實現簡單的輪播圖效果。現在我就分享給大家思路與代碼。
一）明確jq的作用與使用方法
1.引入JQ庫，課上練習我們使用 jquery-1.8.3.js
2. JQ可以進行鏈式編程
二）寫好HTML骨骼部分
三）給HTML 加上css樣式
我們將兩個按鈕調整透明度，用相對定位中的絕對定位，定位在整個圖片的兩側
標記紅線的位置，一定要用rgba的格式去寫透明度，用opacity 會導致空間中的文字一起變得透明，造成不好的交互感。
四）JQ部分
1. 按鈕部分
整個方法是比較簡單的，但并不是最好的方法。在JQ初學的時候，是最容易想到的解決方式。那么，我們學習編程不是為了將代碼原封不動的背下來，而是要學習解決問題的方式方法。想好自己要做的事，需要的數據要用到哪些基礎知識，并且努力分析，然后一步一步完成代碼，最后調試。
2. 自動輪播，并且鼠標移入時停止輪播，移出時繼續輪播效果
我們可以用計時器的方法去做，鼠標移入時清除計時器，移出時執行計時器。由于代碼相同部分很多，我將其封裝成函數方便使用。
先進行計時器正常走程序，然后寫好JQ的鼠標移入移出效果，這樣我們就將這個簡單的輪播圖做好了。
提示：優化代碼
我們在以后的工作中，并不能將圖片的名字改寫成1.jpg的形式，那么我們將如何在進行編寫輪播圖呢？那么這里我給大家一個提示，我們可以將圖片的路徑放入數組，接下來的步驟，請大家思考，該怎么辦呢？
小作業：
我的一段班已經順利的完成了前端的學習，所以這里給大家留一個小的作業。大家可以開動腦筋，將輪播圖的輪轉動畫以滑動的方式進行展現出來。
誼Phill
輪播圖在我們的web項目中有著廣泛的運用，特別是在商城項目中，通常用于對新品、熱銷、促銷等產品的推薦，重要的站點公告也可以采用輪播圖的方式呈現。現在實現輪播圖有各種各樣的第三方插件可以用，哪怕是一個完全不懂javascript或者jQuery的新手，也能實現輪播的效果；但是，作為一個初學者，我們還是要稍微了解一下原理（大神請無視）。
實現輪播的手段其實有很多，比如移動圖片的位置、設置圖片的顯示隱藏等都可以實現輪播切換效果，這里，我們簡單演示移動圖片距離的方式實現輪播效果。
首先編寫html頁面并配合簡單的css樣式，代碼如下：
效果如圖1所示：
我們實現輪播主要是要橫向移動圖片的位置，所以要將圖片浮動成一排，并且要隱藏多余的部分，只顯示出一張圖片，補充css如下：
如圖2所示：
現在我們只能看到一張圖片，其余的因為超出.slider-box的范圍而被隱藏，如下圖3所示：
其實移動圖片的原理很簡單，我們只需要不斷改變ul的left值就可以，如下圖4所示：
現在我們需要使用jQuery來不斷的改變這個left值。
首先，引入jquery-3.2.1.min.js；jq代碼如下：
刷新頁面，效果如圖5所示：
但是，圖片的切換是一瞬間完成的，而且只有一次，并沒有輪播，所以，這并不是我們想要的效果。輪播肯定是有規律的隨著時間變化而依次播放，所以，根據之前我們在《javascript動畫基礎》中講解的，我們必須結合時間函數以及時間增量完成動畫效果。
修改以上jq代碼：
效果如圖6所示：
現在雖然可以按照時間間隔切換圖片，但是在最后一張切換完成后，程序并沒有停止或者復位圖片，而是繼續在向后移動ul，所以出現了空白的情況，因為我們每次移動的距離為1920px剛好為圖片的寬度，實際上圖片只需要切換2次就可以到達第3張，再切換的話就會出現空白，我們需要先判斷left的是否已經為3張圖片的寬度總和，即left+5760是否等于0(left為負值)，如果等于0，那么我們需要將ul的left值設置為0，再從頭開始切換，修改代碼：
效果如圖7所示：
現在圖片只要切換到最后一張，將不會繼續往后切換，而是回到第一張圖片，重頭切換。我們也可以使用jQuery提供的animate()方法，讓我們能看到圖片從右向左的切換過程：
效果如圖8所示：
那么，一個簡單的輪播圖，我們就完成了。實現輪播的方式很多，這里只是提供一個最基本的思路。喜歡的朋友可以點個關注，后期我們會放出進階視頻。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery輪播圖2</title>
<style>
*{
margin: 0;
padding: 0;
text-decoration: none;
}
.container{
width: 600px;
height: 400px;
overflow: hidden;
position: relative;
margin: 0 auto;
}
.list{
width: 4200px;
height: 400px;
position: absolute;
top:0;
left:-600px;
}
.list img{
float: left;
}
.pointsDiv{
position: absolute;
bottom: 10px;
left:50%;
transform: translateX(-50%);
/*width: 100px;*/
height: 20px;
}
.pointsDiv span{
float: left;
width: 20px;
height: 20px;
margin-right: 10px;
border-radius: 50%;
border:2px solid #fff;
box-sizing: border-box;
background: rgba(0,0,0,0.5);
cursor: pointer;
}
.pointsDiv span.active{
background: pink;
}
.arrow{
width: 40px;
height: 40px;
background: rgba(0,0,0,0.4);
position: absolute;
top:50%;
margin-top: -20px;
/*transform: translateY(-50%);*/
color: #fff;
font-size: 36px;
text-align: center;
line-height: 34px;
display: none;
}
.arrow:hover{
background: rgba(0,0,0,0.6);
}
.container:hover .arrow{
display: block;
}
#prev{
left:20px;
}
#next{
right:20px;
}
</style>
</head>
<body>
<div class="container">
<div class="list">
<img src="img/5.jpg" alt="">
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
<img src="img/5.jpg" alt="">
<img src="img/1.jpg" alt="">
</div>
<div class="pointsDiv">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<a href="javascript：;" id="prev" class="arrow"><</a>
<a href="javascript：;" id="next" class="arrow">></a>
</div>
<script src="../jquery-1.10.1.js"></script>
<script type="text/javascript">
$(function () {
//獲取最外層容器
var $container = $('.container')
//獲取所有圖片的容器
var $list = $('.list')
//獲取小圓點的集合
var $points =$('.pointsDiv>span')
//獲取左右按鈕
var $prev =$('#prev')
var $next =$('#next')
//動畫時長
var time = 3000
//動畫幀時長
var itemTime =30
//圖片寬度
var PAGE_WIDTH =600
//圓點的總長度
var showImg =$points.length
// --上一次的索引
var index = 0
// 定義標識變量 用來記錄當前圖片是否正在執行動畫
var isMoving = false
// 左 右 按鈕綁定點擊監聽
$prev.click(function () {
//向左走為false
nextPage(false)
})
$next.click(function(){
//向右走為true
nextPage(true)
})
//點擊小圓點時-切換到對應的圖片
$points.click(function () {
//點擊當前小圓點的索引--(參照于當前點擊的兄弟元素的索引)
var targetIndex = $(this).index()
//調用函數,傳入當前索引
nextPage(targetIndex)
})
//循環輪播(定時器):
var intervalID=setInterval(function () {
//調用向右切圖函數,time>3000毫秒執行一次
nextPage(true)
},time) //循環時間可以傳變量time 或其它變量,也可以直接傳3000
//鼠標進入圖片區域時,自動停止切換,當鼠標離開后,再開啟自動切換
$container.hover(function () {
//移入時先關閉輪播的定時器
clearInterval(intervalID)
},function () {
//移除時再次賦值,開啟定時器
intervalID = setInterval(function () {
//調用向右切圖函數,time>3000毫秒執行一次
nextPage(true)
},time) //循環時間可以傳變量time 或其它變量,也可以直接傳3000
})
//定義一個通用的函數
function nextPage(next){
//進入函數則開啟
if (isMoving){
return //判斷為true,則函數直接結束
}
isMoving = true
// next這個形參用來區分 圖片移動的方向 、
// 如果是false則在當前的left值基礎之上+600,如果是true則在當前的left值基礎上-600
// 參數類型判斷
if (typeof next === "boolean"){
//檢查next類型如果布爾值,結果為true則賦值-PAGE_WIDTH
var offset = next ? -PAGE_WIDTH :PAGE_WIDTH
}else {
//結果為false, 賦值 -圖片張數*圖片長度
var offset = -(next-index) * PAGE_WIDTH
}
//單次偏移 = 總偏移/(動畫時長time /動畫幀時長itemtime)
var itemOffset = offset / (time / itemTime)
//當前list的left值
var left = $list.position().left
//目的地 = 當前位置 +總偏移
var tagetLeft = left + offset
//啟動定時器 開啟動畫
var timer = setInterval(function () {
//當前位置 +單次偏移
left += itemOffset
//判斷當前位置到達目的地 清除定時器,關閉動畫
if (left===tagetLeft){
clearInterval(timer)
//翻頁完成時,判斷是否到達圖片邊界
if(left===0){
//說明到了最后一張假圖,修正到最后一張真圖位置
left = -showImg * PAGE_WIDTH //圖片總長度*單張圖片寬度=最后位置的圖片
}else if (left===-(showImg+1)*PAGE_WIDTH){
//說明到了假的第一張,修正到真的第一張
left = -PAGE_WIDTH
}
isMoving = false
}
//最終修改 list的left值
$list.css('left',left)
},itemTime)
//更新圓點
upData(next)
}
//更新圓點的函數
function upData(next) {
//參數類型判斷
if (typeof next ==="boolean"){
//當前點擊索引true 為索引+1 ,false為索引-1
var targetIndex = next ? index +1 :index-1
}else {
//或者停止當前顯示位置的索引
var targetIndex = next
}
//判斷 小圓點邊界 小于最小值,修改為等于最大值
if (targetIndex < 0){
targetIndex = showImg -1
}else if (targetIndex > showImg -1){
//判斷 小圓點邊界 大于最大值 ,修改為等于最小值
targetIndex = 0
}
//去除上一個索引的小圓點的active屬性,則恢復為黑色
$points.eq(index).removeClass('active')
//給當前索引的小圓點添加active屬性,則當前為紅色
$points.eq(targetIndex).addClass('active')
//更新索引
index = targetIndex
}
})
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li><span class="test">111</span></li>
<li><span class="test">222</span></li>
<li><span class="test">333</span></li>
<li><span class="test">444</span></li>
</ul>
<button id="btn1">增加新的li</button>
<button id="btn2">解除事件委托</button>
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript">
// 點擊li改變其背景顏色
// $('ul>li').click(function () {
// this.style.backgroundColor = 'pink';
// })
// delegate方法：由父元素調用 傳遞三個參數（子元素(選擇器)，事件名稱，回調函數）
$('ul').delegate('li .test','click',function () {
this.style.backgroundColor = 'pink';
});
// 點擊btn1 新增li
$('#btn1').click(function () {
$('ul').append('<li>我是新增的li</li>')
})
// 點擊btn2 解綁事件委托
$('#btn2').click(function () {
$('ul').undelegate();
})
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
background: pink;
position: absolute;
top:50px;
left:50px;
}
/*過渡屬性 一定要給元素設置初始值 不然過渡不生效 x
left right top bottom auto
width auto
*/
.test{
width: 100%;
height: 200px;
background: pink;
/*position: absolute;*/
/*left:0;*/
transition:width 1s 2s,2s;
/*transition: width 1s 2s , all 2s 0s;*/
}
.test:hover{
background: yellowgreen;
width: 50%;
}
</style>
</head>
<body>
<div class="test">今天天氣真不錯</div>
<!--<div class="box"></div>-->
<!--<button id="btn1">隱藏</button>-->
<!--<button id="btn2">顯示</button>-->
<!--<button id="btn3">切換</button>-->
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript">
$(function () {
// show()顯示和hide()隱藏 如果不傳遞時間 是沒有任何過渡的
// 隱藏
$('#btn1').click(function () {
// 淡出
// $('.box').fadeOut(2000);
// 滑出
// $('.box').slideUp(1000);
// 隱藏
$('.box').hide(2000);
});
// 顯示
$('#btn2').click(function () {
// 淡入
// $('.box').fadeIn(2000)
// 滑入
// $('.box').slideDown(1000)
// 顯示
$('.box').show(2000);
});
// 切換
$('#btn3').click(function () {
// 淡入淡出切換
// $('.box').fadeToggle()
// 滑動切換
// $('.box').slideToggle();
// 顯示隱藏切換
$('.box').toggle(1000);
})
})
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>24_自定義動畫</title>
<style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 100px;
height: 100px;
top: 50px;
left: 300px;
background: red;
color: #fff;
}
</style>
</head>
<body>
<button id="btn1">逐漸擴大</button>
<button id="btn2">向右移動</button>
<button id="btn3">向左移動</button>
<button id="btn4">停止動畫</button>
<div class="div1">
愛在西元前，情在塞納河畔
</div>
<!--
jQuery動畫本質 : 在指定時間內不斷改變元素樣式值來實現的
1. animate(): 自定義動畫效果的動畫
2. stop(): 停止動畫
-->
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript">
/*
需求：
1.逐漸擴大
1.寬度擴大
2.寬度和高度擴大
3.先寬度擴大后高度擴大
2.向右移動
1.向右移動 固定的200px
2.基于當前位置向右移動 200px
3.向左移動
1.向右移動 固定的200px
2.基于當前位置向右移動 200px
4.停止動畫
1.停止所有的動畫
2.停止當前動畫，直接開始下一個動畫
3.停止并結束當前動畫，開始下一個動畫
*/
$(function () {
// 1.逐漸擴大
// 1.寬度擴大
// 2.寬度和高度擴大
// 3.先寬度擴大后高度擴大
// animate 兩個參數：參數1 是一個對象 設置要過渡的樣式 參數2 過渡時間 單位毫秒
$('#btn1').click(function () {
$('.div1').animate({
'width':'300px'
},1000).animate({
'height':'300px'
},1000)
});
// 2.向右移動
// 1.向右移動 固定的200px
// 2.基于當前位置向右移動 200px
$('#btn2').click(function () {
$('.div1').stop().animate({
'left':'+=300px'
},3000)
});
// 3.向左移動
// 1.向左移動 固定的200px
// 2.基于當前位置向右移動 200px
$('#btn3').click(function () {
$('.div1').stop().animate({
'left':'-=300'
},3000)
});
// 4.停止動畫
// 1.停止所有的動畫
// 2.停止當前動畫，直接開始下一個動畫
// 3.停止并結束當前動畫，開始下一個動畫
$('#btn4').click(function () {
// 參數1：是否清空動畫隊列 參數2：當前動畫是否執行完成
// $('.div1').stop(false,false);//立即停止當前動畫 在當前位置執行下一個動畫 不清空動畫隊列
// $('.div1').stop(true,false);//立即停止當前動畫 清空動畫隊列 停留在原地 之后的不執行
//$('.div1').stop(true,true);//立即完成當前動畫直接跳到當前動畫結束位置 清空動畫隊列
$('.div1').stop(false,true);//立即完成當前動畫直接跳到當前動畫結束位置 不清空動畫隊列
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img id="logo" src="https://gss0.bdstatic.com/5bVWsj_p_tVS5dKfpU_Y_D3/res/r/image/2017-05-19/6fec71d56242b74eb24b4ac80b817eac.png">
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript">
//window.onload與document.ready的區別
// window.onload是需要等所有的資源加載完成才會觸發回調函數 html css js 圖片等
// jquery的加載事件是document.ready 指的是文檔（dom）加載完成后 就會觸發 不包含其他資源
// window.onload 只能指定一個回調函數 document.ready可以指定多次
var $img = $('#logo');
console.log($img.width());
window.onload = function () {
console.log('onload1:'+$img.width());
};
window.onload = function () {
console.log('onload2:'+$img.width());
};
$(function () {
console.log('jQuery1:'+$img.width());
});
$(function () {
console.log('jQuery2:'+$img.width());
});
$(document).ready(function () {
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="js/myLib.js"></script>
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript">
// 如果有兩個庫都有$ 就存在沖突
// jQuery可以釋放$的使用權，讓另外一個庫正常使用，此時jQuery就只能使用jQuery了
// jQuery.noConflict() 解決$命名沖突
jQuery.noConflict();
$();
jQuery(function () {
alert('我是jQuery')
});
</script>
</body>
</html>歡迎關注我的原創文章：小伙伴們！我是一名熱衷于前端開發的作者，致力于分享我的知識和經驗，幫助其他學習前端的小伙伴們。在我的文章中，你將會找到大量關于前端開發的精彩內容。
學習前端技術是現代互聯網時代中非常重要的一項技能。無論你是想成為一名專業的前端工程師，還是僅僅對前端開發感興趣，我的文章將能為你提供寶貴的指導和知識。
在我的文章中，你將會學到如何使用HTML、CSS和JavaScript創建精美的網頁。我將深入講解每個語言的基礎知識，并提供一些實用技巧和最佳實踐。無論你是初學者還是有一定經驗的開發者，我的文章都能夠滿足你的學習需求。
此外，我還會分享一些關于前端開發的最新動態和行業趨勢。互聯網技術在不斷發展，新的框架和工具層出不窮。通過我的文章，你將會了解到最新的前端技術趨勢，并了解如何應對這些變化。
我深知學習前端不易，因此我將盡力以簡潔明了的方式解釋復雜的概念，并提供一些易于理解的實例和案例。我希望我的文章能夠幫助你更快地理解前端開發，并提升你的技能。
如果你想了解更多關于前端開發的內容，不妨關注我的原創文章。我會不定期更新，為你帶來最新的前端技術和知識。感謝你的關注和支持，我們一起探討交流技術共同進步，期待與你一同探索前端開發的奇妙世界！
#春日生活打卡季#
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
