這篇文章主要為大家詳細介紹了js圖片輪播手動切換效果,具有一定的參考價值,有興趣的朋友們可以參考一下
利用ScrollPicLeft.js這個庫實現圖片的前後切換,適用於網頁中的證書展示、推薦商品之類的欄位。它不像傳統的marquee滾動那樣,而是可以手動的去點擊前後切換箭頭按鈕,進行圖片的翻頁,從而達到瀏覽上一張,下一張的效果。
不需要呼叫jquery,初始化簡單,使用非常的簡單,便利。
實例效果:
js程式碼:
<script type="text/javascript"> var scrollPhoto = new ScrollPicleft(); scrollPhoto.scrollContId = "ISL_Photo"; // 内容容器ID"" scrollPhoto.arrLeftId = "Left_Photo";//左箭头ID scrollPhoto.arrRightId = "Right_Photo"; //右箭头ID scrollPhoto.frameWidth = 450;//显示框宽度 scrollPhoto.pageWidth = 150; //翻页宽度 scrollPhoto.speed = 10; //移动速度(单位毫秒,越小越快) scrollPhoto.space = 10; //每次移动像素(单位px,越大越快) scrollPhoto.autoPlay = false; //自动播放 scrollPhoto.autoPlayTime = 3; //自动播放间隔时间(秒) scrollPhoto.initialize(); //初始化 </script>
本文實例講述了js圖片輪播手動切換效果。分享給大家供大家參考。具體如下:
這是一款基於js圖片輪播手動切換效果程式碼,實作過程很簡單。
為大家分享的js圖片輪播手動切換效果代碼如下
js图片轮播手动切换效果
以上是js圖片輪播手動切換效果實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!