js圖片輪播手動切換效果實例程式碼

這篇文章主要為大家詳細介紹了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圖片輪播手動切換效果代碼如下

 
 

 

 

 

 

 

 

 

 

 

 
 

 


<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圖片輪播手動切換效果實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！