js輪播怎麼寫
直接給你JS代碼吧,HTML自己寫$(document).ready(function(){ var arr = new Array(); arr[0] = document.getElementById("to1").style.src="images/001.png"; arr[1] = document.getElementById("to2").style.src="images/002.png"; arr[2] = document.getElementById("to3").style.src="images/003.png"; arr[3] = document.getElementById("to4").style.src="images/004.png"; var curIndex = 0; //定義開始索引 setInterval(changeImg,1000); //設定輪播,間隔時間function changeImg() { var obj = document.getElementById("bei"); //獲得所要設置的元素 if (curIndex == arr.length - 1) { curIndex = 0; } else { curIndex += 1; } obj.style.background = "url(" + arr[curIndex] + ")";//設置獲得元素的背景圖片 } });原理就是把要輪播圖片的路徑設為一個集合,然後用遍歷集合的方式把圖片一個一個的顯示出來。
還有好多輪播的方法,這個比較簡單,HTML代碼自己寫吧,不難。
2. 簡單的HTML+js圖片輪播h5代碼:
<div id="wrap">
<ul id="list">
<li>10</li>
<li>9</li>
<li>8</li>
<li>7</li>
<li>6</li>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
</ul>
</div>
css代碼:
<style type="text/css">
@-webkit-keyframes move{
0%{left:-500px;}
100%{left:0;}
}
#wrap{width:600px;height:130px;border:1px solid #000;position:relative;margin:100px auto;
overflow: hidden;}
#list{position:absolute;left:0;top:0;padding:0;margin:0;
-webkit-animation:5s move infinite linear;width:200%;}
#list li{list-style:none;width:120px;height:130px;border:1px solid red;background: pink;
color:#fff;text-align: center;float:left;font:normal 50px/2.5em '微軟雅黑';}
#wrap:hover #list{-webkit-animation-play-state:paused;}
</style>
擴展資料:
輪播圖就是一種網站在介紹自己的主打產品或重要信息的傳播方式。説的簡單點就是將承載着重要信息的幾張圖片,在網頁的某一部位進行輪流的呈現,從而做到讓瀏覽者很快的瞭解到網站想要表達的主要信息。以及各種新聞網站的頭版頭條都是用這種方式呈現的重要信息。
輪播圖的實現方式:例如:有5張輪播的圖片,每張圖片的寬度為1024px、高度為512px.那麼輪播的窗口大小就應該為一張圖片的尺寸,即為:1024*512。之後將這5張圖片0px水平相接組成一張寬度為:5120px,高度依然為:512px。最後將這張合成後的大圖每次向左移動1024px即可實現輪播圖。
3. 用jquery實現圖片輪播怎麼寫呢求指教*{ margin: 0; padding: 0; } ul{ list-style:none; } .slideShow{ width: 620px; height: 700px; /*其實就是圖片的高度*/ border: 1px #eeeeee solid; margin: 100px auto; position: relative; overflow: hidden; /*此處需要將溢出框架的圖片部分隱藏*/ } .slideShow ul{ width: 2500px; position: relative; /*此處需注意relative : 對象不可層疊,但將依據left,right,top,bottom等屬性在正常文檔流中偏移位置,如果沒有這個屬性,圖片將不可左右移動*/ } .slideShow ul li{ float: left; /*讓四張圖片左浮動,形成並排的橫着佈局,方便點擊按鈕時的左移動*/ width: 620px; } .slideShow .showNav{ /*用絕對定位給數字按鈕進行佈局*/ position: absolute; right: 10px; bottom: 5px; text-align:center; font-size: 12px; line-height: 20px; } .slideShow .showNav span{ cursor: pointer; display: block; float: left; width: 20px; height: 20px; background: #ff5a28; margin-left: 2px; color: #fff; } .slideShow .showNav .active{ background: #b63e1a; } js代碼規範: 主體代碼:[html] view plain copy print?<body> <!--圖片佈局開始--> <!--圖片佈局結束--> <!--按鈕佈局開始--> 1 2 3 4 <!--按鈕佈局結束-->