仿網頁輪播圖
html部分css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>網易輪播圖js部分</title>
<link rel="stylesheet" href="css/css.css">
<script src="js/slider.js"></script>
<script src="js/animate.js"></script>
</head>
<body>
<div class="w-slider" id="js_slider"><!--js只支持下劃線-->
<div class="slider">
<div class="slider-main" id="slider_main_block">
<div class="slider-main-img"><a href="#"><img src="images/1.jpg" alt=""></a></div>
<div class="slider-main-img"><a href="#"><img src="images/2.jpg" alt=""></a></div>
<div class="slider-main-img"><a href="#"><img src="images/3.jpg" alt=""></a></div>
<div class="slider-main-img"><a href="#"><img src="images/4.jpg" alt=""></a></div>
<div class="slider-main-img"><a href="#"><img src="images/5.jpg" alt=""></a></div>
<div class="slider-main-img"><a href="#"><img src="images/6.jpg" alt=""></a></div>
</div>
</div>
<!--控制輪播圖部分-->
<div class="slider-ctrl" id="slider_ctrl">
<span class="slider-ctrl-prev"></span>
<span class="slider-ctrl-next"></span>
</div>
</div>
</body>
</html>
css部分
@charset "UTF-8";
*{
margin: 0;
padding: 0;
}
img{
vertical-align: top;
/*去掉上下圖片之間的空隙*/
}
.w-slider{
width: 310px;
height: 265px;
margin: 100px auto;
/**/
position: relative;
overflow: hidden;
}
.slider{
width: 310px;
height: 220px;
/**/
}
.slider-main{
width: 620px;
height: 220px;
/**/
}
.slider-main-img{
position: absolute;
top:0;
left:0;
}
.slider-ctrl{
text-align: center;
padding-top: 5px;
}
.slider-ctrl-con{
width: 24px;
height: 20px;
display: inline-block;
/*行內式改爲行內塊能夠改變大小*/
/**/
background: url(../images/icon.png) no-repeat -24px -782px;
/*精靈圖實現 調整像素 */
margin:0 5px;
cursor: pointer;
/*將1 2 3 4 5 6的數字隱藏*/
text-indent: -20em; /*text-indent 屬性規定文本塊中首行文本的縮進。*/
overflow: hidden;
}
.current{
background-position: -24px -762px;
}
.slider-ctrl-prev,
.slider-ctrl-next{
position: absolute;
top:50%;
margin-top:-35px;
background-color: blue;
background: url(../images/icon.png) no-repeat 6px top;
width: 30px;
height: 35px;
}
.slider-ctrl-prev{
left:0;
cursor: pointer;
}
.slider-ctrl-next{
right: 0;
background-position: -6px -44px;
cursor: pointer;
}
JS部分
slider.js
window.onload=function () {
//獲取元素
function $(id) {
return document.getElementById(id);
}
var js_slider = $("js_slider"); //獲取最大的盒子
var slider_main_block = $("slider_main_block"); //裝圖片的盒子
var imgs = slider_main_block.children; //得到全部的圖片組
var slider_ctrl = $("slider_ctrl"); // 得到控制的父盒子
//操做元素
//生成小span
for (var i = 0; i < imgs.length; i++) {
var span = document.createElement("span");
span.className = "slider-ctrl-con";
span.innerHTML = imgs.length - i;//因爲span小方塊是倒着插入，因此索引號也要是6 5 4 3 2 1
slider_ctrl.insertBefore(span, slider_ctrl.children[1]);
//insertBefore在參照的元素以前插入
}
var spans = slider_ctrl.children; //獲得全部的 span
spans[1].setAttribute("class", "slider-ctrl-con current");
//setAttribute() 方法添加指定的屬性，併爲其賦指定的值。這裏制定類名，給它添加current類
var scrollWidth = js_slider.clientWidth; //獲得大盒子的寬度 也就是後面後面動畫走的距離
//剛開始 第一張圖片在框裏 其他的圖片框右邊
for (var i = 1; i < imgs.length; i++) //圖片從第二張開始排在框右邊
{
imgs[i].style.left = scrollWidth + "px";
}
//遍歷三個按鈕
// span是8個按鈕 兩個箭頭 六個小方塊
var iNow=0; //控制播放張數
for(var k in spans) //k在數組裏是索引號 span[0]--第一個span
{
spans[k].onclick = function () {
//點擊span裏的哪個就輸出對應的值 兩個箭頭符號值爲空
if (this.className == "slider-ctrl-prev") {
// alert("你點擊的是左側按鈕")
animate(imgs[iNow], {left: scrollWidth});
--iNow < 0 ? iNow = imgs.length - 1 : iNow;
imgs[iNow].style.left = -scrollWidth + "px";
animate(imgs[iNow], {left: 0});
setSquare();
} else if (this.className == "slider-ctrl-next") {
// alert("你點擊的是右側按鈕");
animate(imgs[iNow], {left: -scrollWidth});
//當前的那個圖片 慢慢的走到 -scrollWidth位置
++iNow > imgs.length - 1 ? iNow = 0 : iNow;
// iNow++; //當前圖片加1 先++
// if(iNow>imgs.length-1) //後判斷
// {
// iNow=0;
// }
imgs[iNow].style.left = scrollWidth + "px"; //下一張快速運動到右邊310px的位子
animate(imgs[iNow], {left: 0}); //下一張圖片走到0的位置（框裏）
setSquare();
}
else {
// alert(this.innerHTML);//下面的小span點擊
//首先要知道點擊的是第幾張--當前的索引號
var that = this.innerHTML - 1; //that對應每張圖片的索引號
if (that > iNow)
{
//同右側點擊同樣
animate(imgs[iNow], {left: -scrollWidth});
imgs[that].style.left = scrollWidth + "px";
}
else if(that < iNow)
{ //同點擊左側同樣
animate(imgs[iNow], {left: scrollWidth});
imgs[that].style.left = -scrollWidth + "px";
}
iNow=that;
animate(imgs[iNow], {left: 0});
setSquare();
}
}
}
// 一個能夠控制 播放span 的 函數 當前
function setSquare() {
// 清除全部的span current 留下 知足須要的拿一個
for(var i=1;i<spans.length-1;i++){ // 8個span 咱們要 1-6 不要 7 索引號
spans[i].className = "slider-ctrl-con";
}
spans[iNow+1].className = "slider-ctrl-con current"; // 記住 + 1
}
//定時器開始 右側按鈕
var timer=null;
timer = setInterval(autoplay,2000); // 開啓定時器
function autoplay() {
// 當咱們點擊時候， 當前的這張圖片 先慢慢的走到左邊 下一張 必定先快速走到右側 （310）的位置，而後慢慢的走到舞臺中
// alert("您點擊了右側按鈕");
//iNow == 0
animate(imgs[iNow],{left: -scrollWidth});
// 當前的那個圖片 慢慢的走到 -scrollWidth 位置
// 變成1 先 ++ ++iNow 先自加 後 運算
++iNow > imgs.length -1 ? iNow = 0 : iNow;
imgs[iNow].style.left = scrollWidth + "px"; // 立馬執行 快速走到右側
animate(imgs[iNow],{left: 0}); // 下一張走的 0 的位置 慢慢走過來
setSquare(); // 調用square
}
//鼠標通過清除定時器
js_slider.onmouseover = function() {
clearInterval(timer);
}
js_slider.onmouseout = function() {
clearInterval(timer); // 要執行定時器 先清除定時器
timer = setInterval(autoplay,2000); // 開啓定時器
}
}
animate.js
/** * Created by andy on 2015/11/23. */// 多個屬性運動框架 添加回調函數function animate(obj,json,fn) { // 給誰 json clearInterval(obj.timer); obj.timer = setInterval(function() { var flag = true; // 用來判斷是否中止定時器 必定寫到遍歷的外面 for(var attr in json){ // attr 屬性 json[attr] 值 //開始遍歷 json // 計算步長 用 target 位置 減去當前的位置 除以 10 // console.log(attr); var current = 0; if(attr == "opacity") { current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0; console.log(current); } else { current = parseInt(getStyle(obj,attr)); // 數值 } // console.log(current); // 目標位置就是 屬性值 var step = ( json[attr] - current) / 10; // 步長 用目標位置 - 如今的位置 / 10 step = step > 0 ? Math.ceil(step) : Math.floor(step); //判斷透明度 if(attr == "opacity") // 判斷用戶有沒有輸入 opacity { if("opacity" in obj.style) // 判斷 咱們瀏覽器是否支持opacity { // obj.style.opacity obj.style.opacity = (current + step) /100; } else { // obj.style.filter = alpha(opacity = 30) obj.style.filter = "alpha(opacity = "+(current + step)* 10+")"; } } else if(attr == "zIndex") { obj.style.zIndex = json[attr]; } else { obj.style[attr] = current + step + "px" ; } if(current != json[attr]) // 只要其中一個不知足條件 就不該該中止定時器 這句必定遍歷裏面 { flag = false; } } if(flag) // 用於判判定時器的條件 { clearInterval(obj.timer); //alert("ok了"); if(fn) // 很簡單 當定時器中止了。 動畫就結束了 若是有回調，就應該執行回調 { fn(); // 函數名 + （） 調用函數 執行函數 } } },10)}function getStyle(obj,attr) { // 誰的 那個屬性 if(obj.currentStyle) // ie 等 { return obj.currentStyle[attr]; // 返回傳遞過來的某個屬性 } else { return window.getComputedStyle(obj,null)[attr]; // w3c 瀏覽器 }}
相關文章
- 1. 仿造網易雲音樂輪播圖
- 2. 第65天：仿網易輪播圖
- 3. 網頁前端首頁：輪播圖......
- 4. 模仿輪播圖效果
- 5. 首頁輪播圖
- 6. (網頁)swiper.js輪播圖插件
- 7. 網頁常見之輪播圖
- 8. 純jQuery實現網頁輪播圖
- 9. 去哪兒網首頁-輪播圖（3）
- 10. jQuery仿京東首頁廣告圖片切換圖片輪播
- 更多相關文章...
- • Web 網頁 驗證 - 網站建設指南
- • PHP imageaffine - 返回經過仿射變換後的圖像 - PHP參考手冊
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • 互聯網組織的未來：剖析GitHub員工的任性之源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 仿造網易雲音樂輪播圖
- 2. 第65天：仿網易輪播圖
- 3. 網頁前端首頁：輪播圖......
- 4. 模仿輪播圖效果
- 5. 首頁輪播圖
- 6. (網頁)swiper.js輪播圖插件
- 7. 網頁常見之輪播圖
- 8. 純jQuery實現網頁輪播圖
- 9. 去哪兒網首頁-輪播圖（3）
- 10. jQuery仿京東首頁廣告圖片切換圖片輪播