兼容性較好的web html原生js輪播器
第一步：前端樣式以及html代碼（圖片自行添加）
css代碼：javascript
#container{
width: 1200px;
height: 400px;
margin:0 auto;
overflow: hidden;/*超出的圖片垂直方向隱藏，水平方向也隱藏*/
position: relative;/*提供給子元素定位*/
}
#list{
width: 7200px;
height: 400px;
position: absolute;
}
#list img{
float:left;
}
#buttons{
position: absolute;/*參照父元素進行絕對定位*/
height: 10px;
width: 100px;
z-index: 2;
bottom: 20px;
margin: auto;
left: 0;
right: 0;
}
#buttons span{
cursor: pointer;
display: inline-block;
border:1px solid #fff;
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 5px;
float: left;
}
#buttons .on{
background-color: #5c307d;
}
.arrow{
cursor: pointer;
line-height: 40px;
text-align: center;
font-size: 36px;
width: 40px;
height: 40px;
position: absolute;
z-index: 2;
margin:auto;
top:0;
bottom: 0;
background-color: #d8d9d8;
color: #ffffff;
text-decoration: none;
border-radius: 50%;
display: none;
}
.arrow:hover{
background-color: #b2afaf;
}
#container:hover .arrow{
display: inline-block;
}
#prev{
left: 20px;
}
#next{
right: 20px;
}
html代碼:css
<div id="container">
<div id="list" style="left:0px;">
<img src="1.jpg" alt="1">
<img src="2.jpg" alt="2">
<img src="3.jpg" alt="3">
<img src="4.jpg" alt=".4">
<img src="5.jpg" alt="5">
</div>
<div id="buttons">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<div style="clear: both;"></div>
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div>
第二步:給前一張，下一張添按鈕添加事件：html
<script type="text/javascript">
//下一頁
window.onload=function(){
var list=document.getElementById("list");//獲取相冊div，便於移動相冊框的圖片
var prev=document.getElementById('prev');//前一張圖片按鈕
var next=document.getElementById('next');//下一頁按鈕
next.onclick=function(){
if(!(parseInt(list.style.left)<=-4800)){//向超過第5張圖片不能繼續向右
list.style.left=parseInt(list.style.left)-1200+"px";
}
};
prev.onclick=function(){
if((parseInt(list.style.left)<0)){//向左超過第1張圖片不能繼續向左
list.style.left=parseInt(list.style.left)+1200+"px";
}
};
};
</script>
第三步：封裝簡化點擊按鈕事件(js部分，其餘沒有改變)前端
<script type="text/javascript">
window.onload=function(){
var list=document.getElementById("list");//獲取相冊div，便於移動相冊框的圖片
var prev=document.getElementById('prev');//前一張圖片按鈕
var next=document.getElementById('next');//下一頁按鈕
//上一頁,下一頁點擊按鈕函數
function animate(offset){
var left=list.style.left;//圖片位置
var leftOffset=parseInt(left);//圖片偏移量
if (offset==-1200) {
if(!(leftOffset<=-4800)){//向超過第5張圖片不能繼續向右
left=(leftOffset+offset)+'px';
list.style.left=left;
}
return;
}
if (offset==1200) {
if((leftOffset<0)){//向左超過第1張圖片不能繼續向左
left=(leftOffset+offset)+"px";
list.style.left=left;
}
}
}
next.onclick=function(){
animate(-1200);
};
prev.onclick=function(){
animate(1200);
};
};
</script>java
第四步:圖片切換對應小按鈕樣式改變函數
<script type="text/javascript">
window.onload=function(){
var list=document.getElementById("list");//獲取相冊div，便於移動相冊框的圖片
var prev=document.getElementById('prev');//前一張圖片按鈕
var next=document.getElementById('next');//下一頁按鈕
var index=1;//默認小按鈕爲1
var buttons=document.getElementById("buttons").getElementsByTagName('span');
//上一頁,下一頁點擊按鈕函數
function animate(offset){
var left=list.style.left;//圖片位置
var leftOffset=parseInt(left);//圖片偏移量
if (offset==-1200) {
if(!(leftOffset<=-4800)){//向超過第5張圖片不能繼續向右
left=(leftOffset+offset)+'px';
list.style.left=left;
}
return;
}
if (offset==1200) {
if((leftOffset<0)){//向左超過第1張圖片不能繼續向左
left=(leftOffset+offset)+"px";
list.style.left=left;
}
}
}
//按鈕樣式改變函數
function showButton(){
for (var i = 0; i <buttons.length; i++) {
if (buttons[i].className=="on") {
buttons[i].className="";
break;
}
}
buttons[index-1].className="on";
}
next.onclick=function(){
if (index==5) {//若是小按鈕已經到了第五個小按鈕，下一個小按鈕切換回1
index=1;
}else{//不是第五個，就繼續++
index+=1;
}
animate(-1200);
showButton();
};
prev.onclick=function(){
if (index==1) {//若是小按鈕已經到了第1個小按鈕，上一個小按鈕切換回5
index=1;
}else{//不是第1個，就繼續--
index-=1;
}
animate(1200);
showButton();
};
};
</script>
第五步：圖片無限左右切換優化
<script type="text/javascript">
window.onload=function(){
var list=document.getElementById("list");//獲取相冊div，便於移動相冊框的圖片
var prev=document.getElementById('prev');//前一張圖片按鈕
var next=document.getElementById('next');//下一頁按鈕
var index=1;//默認小按鈕爲1
var buttons=document.getElementById("buttons").getElementsByTagName('span');
//上一頁,下一頁點擊按鈕函數
function animate(offset){
var left=list.style.left;//圖片位置
var leftOffset=parseInt(left);//圖片偏移量
if (offset==-1200) {
if(!(leftOffset<=-4800)){//向超過第5張圖片不能繼續向右
left=(leftOffset+offset)+'px';
list.style.left=left;
}
if (leftOffset==-4800) {//超過第5張得時候從新回到第一張
list.style.left=0+'px';
index=1;//更新一下按鈕
}
return;
}
if (offset==1200) {
if((leftOffset<0)){//向左超過第1張圖片不能繼續向左
left=(leftOffset+offset)+"px";
list.style.left=left;
}
if (leftOffset==0) {//超過第1張得時候從新回到第5張
list.style.left=-3600+'px';
index=5;//更新一下按鈕
}
}
}
//按鈕樣式改變函數
function showButton(){
for (var i = 0; i <buttons.length; i++) {
if (buttons[i].className=="on") {
buttons[i].className="";
break;
}
}
buttons[index-1].className="on";
}
next.onclick=function(){
if (index==5) {//若是小按鈕已經到了第五個小按鈕，下一個小按鈕切換回1
index=1;
}else{//不是第五個，就繼續++
index+=1;
}
animate(-1200);
showButton();
};
prev.onclick=function(){
if (index==1) {//若是小按鈕已經到了第1個小按鈕，上一個小按鈕切換回5
index=1;
}else{//不是第1個，就繼續--
index-=1;
}
animate(1200);
showButton();
};
};
</script>
第六步:小按鈕的點擊事件動畫
<script type="text/javascript">
window.onload=function(){
var list=document.getElementById("list");//獲取相冊div，便於移動相冊框的圖片
var prev=document.getElementById('prev');//前一張圖片按鈕
var next=document.getElementById('next');//下一頁按鈕
var index=1;//默認小按鈕爲1
var buttons=document.getElementById("buttons").getElementsByTagName('span');
//上一頁,下一頁點擊按鈕函數
function animate(offset,jump="num"){
var left=list.style.left;//圖片位置
var leftOffset=parseInt(left);//圖片偏移量
if (offset==-1200&&jump=="num") {
if(!(leftOffset<=-4800)){//向超過第5張圖片不能繼續向右
left=(leftOffset+offset)+'px';
list.style.left=left;
}
if (leftOffset==-4800) {//超過第5張得時候從新回到第一張
list.style.left=0+'px';
index=1;//更新一下按鈕
}
return;
}
if (offset==1200&&jump=="num") {
if((leftOffset<0)){//向左超過第1張圖片不能繼續向左
left=(leftOffset+offset)+"px";
list.style.left=left;
}
if (leftOffset==0) {//超過第1張得時候從新回到第5張
list.style.left=-3600+'px';
index=5;//更新一下按鈕
}
return;
}
if (parseInt(jump)>0) {//向右跳轉
var offsetjump=-1200*jump;
left=(leftOffset+offsetjump)+'px';
list.style.left=left;
return;
}
if (parseInt(jump)<0) {//向左跳轉
var offsetjump=-1200*jump;
left=(leftOffset+offsetjump)+'px';
list.style.left=left;
return;
}
}
//按鈕樣式改變函數
function showButton(){
for (var i = 0; i <buttons.length; i++) {
if (buttons[i].className=="on") {
buttons[i].className="";
break;
}
}
buttons[index-1].className="on";
}
next.onclick=function(){
if (index==5) {//若是小按鈕已經到了第五個小按鈕，下一個小按鈕切換回1
index=1;
}else{//不是第五個，就繼續++
index+=1;
}
animate(-1200);
showButton();
};
prev.onclick=function(){
if (index==1) {//若是小按鈕已經到了第1個小按鈕，上一個小按鈕切換回5
index=1;
}else{//不是第1個，就繼續--
index-=1;
}
animate(1200);
showButton();
};
//爲每一個小按鈕綁定事件
for (var i = 0; i <buttons.length; i++) {
buttons[i].onclick=function(){
var myIndex=parseInt(this.getAttribute('index'));//當前按鈕下標
if(myIndex-index>0){//向右偏移
animate(-1200,myIndex-index);
index=myIndex;//更新按鈕
showButton();
}else{
animate(1200,myIndex-index);
index=myIndex;//更新按鈕
showButton();
}
}
}
};
</script>
第七步：優化小按鈕（點擊同一個按鈕不觸發事件）this
if (this.className=="on") {
return;
}
在buttoms循加入
第八步:給點擊事件加動畫
相關文章
- 1. 輪播圖：原生JS+CSS3
- 2. 完整html +css +原生js輪播圖
- 3. 原生js,兼容
- 4. 原生JS的兼容性問題
- 5. 原生JS輪播圖
- 6. 瀏覽器兼容性(js、html、css)
- 7. js___原生js輪播
- 8. 原生 js 輪播圖（8）
- 9. 輪播圖 JS原生
- 10. JS原生輪播圖
- 更多相關文章...
- • Docker 容器連接 - Docker教程
- • Docker 容器使用 - Docker教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • Docker容器實戰(六) - 容器的隔離與限制
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 輪播圖：原生JS+CSS3
- 2. 完整html +css +原生js輪播圖
- 3. 原生js,兼容
- 4. 原生JS的兼容性問題
- 5. 原生JS輪播圖
- 6. 瀏覽器兼容性(js、html、css)
- 7. js___原生js輪播
- 8. 原生 js 輪播圖（8）
- 9. 輪播圖 JS原生
- 10. JS原生輪播圖