輪播圖js版&jQ版

時間 2019-12-08

欄目 JavaScript 简体版

原文原文鏈接

JS版輪播圖css

html部分和css部分本身任意定html

主要構成:css3

1,一個固定的框超出框的部分隱藏web

2,幾張圖片float:left ide

3,下部下原點,點擊切換,切換到不一樣的張都有紅色顯示函數

4,左右兩個大箭頭按鈕ui

JS代碼this

找到節點添加事件spa

用原點的下標來切換圖片firefox

鼠標放在框上關閉定時器,不在框上開啓定時器自動播放

到此就算結束了,可是有bug, 會不停的切換下去,全白也會不停切換不,因此讓下標等於最後的時候等於一就能夠循環播放了

JQ版

html部分

css部分用的是css3 有一個新功能是trasition:all,時間過渡效果

JQ部分 .siblings() 尋找元素的同胞元素進行操做

粘貼複製版:

JS方法

HTML

</div>

CSS部分:

/*外圍容器*/
#content {

width: 600px;
height: 400px;
overflow: hidden;
position: relative;
margin: 100px auto;
}

/*圖片容器*/
#list {
width: 3000px;
height: 400px;
position: absolute;
}

/*圖片浮動*/
#list img {
width: 600px;
height: 400px;
float: left;
}

/*焦點圖*/
#buttons {
position: absolute;
right: 40px;
bottom: 20px;
}

#buttons span {
width: 10px;
height: 10px;
background-color: rgba(150, 150, 150, 0.5);
border: 1px solid rgba(100, 100, 100, 0.8);
border-radius: 50%;
float: left;
margin: 5px;
cursor: pointer;
}

#buttons span:hover {
border: 1px solid rgba(180, 180, 180, 0.5);
background-color: rgba(255, 255, 255, 0.6);
}

#buttons .select {
border: 1px solid rgba(10, 10, 10, 0.5);
background-color: rgba(255, 255, 255, 0.6);
}

.suibian {

width: 30px;
height: 50px;
position: absolute;
background-color: rgba(50, 50, 50, .7);
border-radius: 3px;

color: rgba(255,255,255, 0.5);
font-size: 40px;
text-align: center;
line-height: 50px;

display: none;

}

#preBtn {
left: 0px;
top: 175px;
}

#nextBtn {
right: 0px;
top: 175px;
}

js部分

window.onload = function () {

var content = document.getElementById('content');
var list = document.getElementById('list');
var buttons = document.getElementById('buttons').getElementsByTagName('span');
var preBtn = document.getElementById('preBtn');
var nextBtn = document.getElementById('nextBtn');
var timer;
// 記錄下標
var picIndex = 0;

// 給全部的焦點添加點擊事件
for(var i = 0; i < buttons.length; i ++) {

// 添加下標的屬性
buttons[i].index = i;

buttons[i].onclick = function () {
// (1)切換圖片 600px
changePic(this.index);

// (2)對應焦點顯示選中狀態
showBtn(this.index);

picIndex = this.index;
}
}

// 切換圖片
function changePic(index) {
list.style.left = -index *600 + 'px';
}

// 切換焦點
function showBtn(index) {
for(var j = 0; j < buttons.length; j++) {
if (buttons[j].className == 'select') {
buttons[j].className = '';
}
}

buttons[index].className = 'select';
}

content.onmouseover = function () {
preBtn.style.display = 'block';
nextBtn.style.display = 'block';

// 關閉定時器
clearInterval(timer);

}

content.onmouseout = function () {
preBtn.style.display = 'none';
nextBtn.style.display = 'none';

timer = setInterval(nextAction, 1500);
}

// (1)經過選中的按鈕的index屬性

// (2)定義一個變量存儲當前顯示的下標

preBtn.onclick = preAction;
function preAction() {

picIndex --;
if (picIndex < 0) {
picIndex = 4;
}
changePic(picIndex);
showBtn(picIndex);

// // 切換到上一張

}

nextBtn.onclick = nextAction;
function nextAction() {
// 切換到下一張

picIndex ++;
if (picIndex > 4) {
picIndex = 0;
}
changePic(picIndex);
showBtn(picIndex);
}

timer = setInterval(nextAction, 1500);

}

------------------------------------------------------------

JQ方式

js部分:方法1

$(function () {

var i = 0; //圖片的下標
var timer = null; //定時器
$('#change_prev').click(function () {
// 上一張
changePrev();
});

$('#change_next').click(function () {

// 下一張
changeNext();

});

function changeNext() {
i ++;
if (i == $('#pics li').length) {
i = 0;
}

show_pic(i);
}

function changePrev() {
i --;
if (i < 0 ) {
i = $('#pics li').length - 1;
}

show_pic(i);
}

function show_pic(index) {
$('#pics li').eq(index).fadeIn(300).siblings('li').fadeOut(300);
}

// 自動輪播
timer = setInterval(changeNext, 1000);

// 光標移入:關閉定時器
$('#pic_change').mouseover(function () {
// 關閉定時器
clearInterval(timer);

// 顯示切換按鈕
$(this).children().show();
});

$('#pic_change').mouseout(function () {
// 關閉定時器
timer = setInterval(changeNext, 1000);

// 顯示切換按鈕
$(this).children().hide();
});

});

js部分方法2

// 輪播圖功能函數
function change() {

change_pic();
}

function change_pic() {
i = i + 1;
if (i == $('#pics li').length) {
i = 0;
}
// 若是給定一個表示 DOM 元素集合的 jQuery 對象，
//.siblings() 方法容許咱們在 DOM 樹中搜索這些元素的同胞元素，
//並用匹配元素構造一個新的 jQuery 對象。

//獲取到下一個li元素顯示,將其餘li元素隱藏.
$('#pics li').eq(i).fadeIn(100).siblings('li').fadeOut(100);
}

var i = 0;//圖片標識
var time = setInterval(change, 2000);

// 鼠標點擊切換
$('#change_next').click(function () {
change();
});

$('#change_prev').click(function () {
i = i - 1;
if (i < 0) {
i = $('#pics li').length - 1;
}
change_pic();
});

// 光標移動在界面上,中止定時器,顯示左右切換標識
$('#pic_change').mouseover(function () {
//關閉定時器
clearInterval(time);

// 顯示切換模塊
$(this).children().show();
});

// 光標移出界面,開啓定時器,隱藏左右切換標識
$('#pic_change').mouseout(function () {
//關閉定時器
time = setInterval(change, 2000);

// 隱藏切換模塊
$(this).children().hide();
});

css部分

* {
margin: 0px;
padding: 0px;
list-style: none;
}

/*最外層*/
#big_wrap {
width: 1226px;
height: 460px;
/*居中顯示*/
margin: auto;
/*定位*/
position: relative;
/*過渡效果*/
transition:all 1s;
/*safari 和chrom須要加前綴*/
-webkit-transition:all 1s;
/*firefox的前綴*/
-moz-transition:all 1s;
/*歐朋的前綴*/
-o-transition:all 1s;
-ms-transition:all 1s;
}

/*輪播圖*/
#pic_wrap {
width: 1226px;
height: 460px;

/*隱藏超出部分的內容*/
overflow: hidden;
}

#pic_change {
/*1226-側邊欄的寬度*/
width: 976px;
height: 460px;
position: absolute;
left: 250px;
top: 0px;
}

#pic_change div {
width: 50px;
height: 50px;
color: white;
font-size: 50px;
margin-top: 205px;

/*默認隱藏*/
display: none;
}

#change_prev {
/*浮動*/
float: left;
}

#change_next {
float: right;
}

html部分

<div id="pic_wrap">
<ul id="pics">
<li><img src="img/T1hiDvBvVv1RXrhCrK.jpg"></li>
<li><img src="img/T1jrxjB_VT1RXrhCrK.jpg"></li>
<li><img src="img/T1oTJjBKKT1RXrhCrK.jpg"></li>
<li><img src="img/T1RICjB7DT1RXrhCrK.jpg"></li>
<li><img src="img/T1vWdTBKDv1RXrhCrK.jpg"></li>
</ul>
</div>


<div id="pic_change">
<div id="change_prev"><</div>
<div id="change_next">></div>
</div>

</div>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。