图片轮播代码参考
主要是css和JS 的代碼編打，特別是圖片的寬度在css里面的寫法，在html里面 要給圖片一個class和id方便設置js代碼，在自動輪播的效果下要設置 圖片的方向和每一次移動的位置（即像素）；在css里要給最外層的選擇器設置寬和高 和圖片的所在位置，然后再給裝圖片的class設置每一張圖片加起來的總寬度…
開發工具與關鍵技術：DW（js 、 css）
撰寫時間：2019.01.17
知識總結 輪播的基本樣式
HTML 代碼部分
CSS 樣式代碼
@charset "utf-8"; /* CSS Document */ .left_div{width: 1000px;height: 100%;margin: 0 auto; } .container{width: 1080px;/*圖片的寬*/height: 1920px;/*高*/margin: 0 auto;overflow: hidden;/*超出部分隱藏*/position: relative; } .container .list{width: 7560px;/*五張圖片的寬的總像素*/height: 100%;position: absolute; } .container img{/*圖片的浮動和寬高*/float: left;width: 1080px;height: 1920px; } .container a{width: 60px;line-height: 60px;font-size: 45px;text-align: center;color: red;background: #C3C3C3;position: absolute;top: 40%;display: none;text-decoration: none; } .container a.prev{left: 0px; } .container a.next{right: 0px; } .container .buttons{position: absolute;bottom: 8px;right: 25px; } .container .buttons span{width: 23px;line-height: 23px;border-radius: 50%;/*圓形的效果*/float: left;text-align: center;background: #c3c3c3;margin-left: 8px;font-size: 18px;color: red; } .container .buttons span.on{color: green;/*發生移動的圖片 偽類on 顏色發生改變*/background-color: #8D7D7D; } .container:hover a{display: block; } .left_div .list img{cursor: pointer; } .left_div .buttons span{cursor: pointer;/*手的圖標出現*/ }JS 代碼部分
// JavaScript Document var blswitch=false; var index=1; var timer=null; window.onload=function(){var container=document.getElementById("container");var prev=document.getElementById("prev");var next=document.getElementById("next");var buttons = document.getElementById("buttons").getElementsByTagName("span");next.onclick=function(){/*右邊按鈕的點擊事件*/if(blswitch){return false;}if(index===5){index=1;}else{index++;/*向右移動*/}animate(-1080);/*圖片的像素*/showButton();/*每次圖片的位置發生變化，底部的頁碼數也隨之變化*/};prev.onclick=function(){/*左邊按鈕的點擊事件*/if(blswitch){return false;}if(index===1){index=5;}else{index--;/*向左移動*/}animate(1080);/*像素*/showButton();/*每次圖片的位置發生變化，底部的頁碼數也隨之變化*/};for(var i=0;i<buttons.length;i++){buttons[i].onclick=function(){if(this.className==="on"){return;}var myindex=this.getAttribute("index");var offset=-1080*(myindex-index);if(!blswitch){animate(offset);}index=myindex;showButton();}}function play(){timer=setInterval(function(){next.onclick();},3000)/*以毫秒為單位*/}play();function stoptime(){clearInterval(timer);}container.onmousemove = stoptime;/*鼠標移到圖片上，輪播停止*/container.onmouseout = play;/*移開繼續開始*/ }; function animate(offset){var list=document.getElementById("list");var time=1080;var interval=10;var speed=offset/(time/interval);var newleft=parseInt(list.style.left)+offset;blswitch=true;function go(){if((speed<0&&parseInt(list.style.left)>newleft)||(speed>0&&parseInt(list.style.left)<newleft)){list.style.left=parseInt(list.style.left)+speed+"px";setTimeout(go,interval);}else{/*注意別打亂、錯*/list.style.left=newleft+"px";if(newleft<-(1080*5)){list.style.left=-1080+"px";}if(newleft>-1080){list.style.left=-(1080*5)+"px";}blswitch=false;}}go();/*不可少*/ } function showButton(){var buttons=document.getElementById("buttons").getElementsByTagName("span");for(var i=0;i<buttons.length;i++){if(buttons[i].className==="on"){buttons[i].className="";break;}}buttons[index-1].className="on";/*給偽類class為on的一個高亮效果*/ }總結
- 上一篇： java awt 教程,Java AWT
- 下一篇： java.awt.color,AWT C