3種jQuery圖片無縫滑動輪播特效

來源:http://www.nxriimxh.cn/js/4905.html 2019-11-04 12:00瀏覽(529) 收藏

3種jQuery圖片無縫滑動輪播特效,分別是淡出淡入、上下滑動和左右滑動輪播效果。
3種jQuery圖片無縫滑動輪播特效
分類:圖片代碼 > 圖片輪播 難易:初級
查看演示 下載資源: 13 下載資源 下載積分: 50 積分

js代碼

<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="pike.min.js"></script>
    <script>
       var myPi = new Pike(".pi", {
	       	type: 1, // 輪播的類型(1漸隱)
	       	automatic: true, //是否自動輪播 (默認false)
	       	autoplay: 2000, //自動輪播毫秒 (默認3000)
	       	hover: true, //鼠標懸停輪播 (默認false)
	       	arrowColor: "yellow", //箭頭顏色 (默認綠色)
	       	arrowBackgroundType: 2, //箭頭背景類型 (1: 方形, 2:圓形)
	       	arrowBackground: 1, //箭頭背景色 (1:白色,2:黑色, 默認:無顏色)
	       	arrowTransparent: 0.2, //箭頭背景透明度 (默認: 0.5)
       		spotColor: "white",//圓點顏色 (默認: 白色)
       		spotType: 1, //圓點的形狀 (默認: 圓形, 1:圓形, 2.矩形)
       		spotSelectColor: "red", //圓點選中顏色 (默認綠色)
       		spotTransparent: 0.8, //圓點透明度 (默認0.8)
       		mousewheel: true, //是否開啟鼠標滾動輪播(默認false)
       		drag: false, //是否開啟鼠標拖動 (默認為: true, 如不需要拖動設置false即可)
       		loop: true, //是否循環輪播 (默認為: false)
       });

       var myPi1 = new Pike(".pi1", {
   			// automatic: true, //是否自動輪播 (默認false)
	       	type: 2, // 輪播的類型(2左右滑動)
	       	slide: 500, //輪播滑動的速度(默認800)
	       	autoplay: 2000, //自動輪播毫秒 (默認3000)
	       	hover: true, //鼠標懸停輪播 (默認false)
	       	arrowList: { //自定義箭頭圖片
	       		left: "img/left.png",
	       		right: "img/right.png",
	       		width: 70, //如果不設置寬高,則按照圖片默認寬高顯示
	       		height: 70,
	       	},
	       	spotList: { //自定義圓點
	       		width: 12, //寬
	       		height: 12, //高
	       		borderRadius: 50, //圓角邊框
	       		opacity: 0.6,//透明度
	       		color: "white",//顏色
	       		select: { //自定義圓點選中樣式
	       			width: 18, //寬
	       			borderRadius: 50, //圓角邊框
	       			height: 18, //高
	       			color: "blue",
	       			backgroundImg: "img/haha.png"
	       		}
	       	},
	       	mousewheel: true, //是否開啟鼠標滾動輪播(默認false)
	       	// loop: true, //是否循環輪播 (默認為: false)
	       	spotDirection: "bottom", //圓點的方向(left:左, right:右, top:上, bottom:下, 默認:bottom)
       });

       var myPi2 = new Pike(".pi2", {
	       	type: 3, // 輪播的類型(3上下滑動)
	       	slide: 500, //輪播滑動的速度(默認800)
	       	// automatic: true, //是否自動輪播 (默認false)
	       	autoplay: 2000, //自動輪播毫秒 (默認3000)
	       	hover: true, //鼠標懸停輪播 (默認false)
	       	arrowColor: "white", //箭頭顏色 (默認綠色)
	       	arrowBackground: 2, //箭頭背景色 (1:白色,2:黑色, 默認:無顏色)
	       	spotList: { //自定義圓點
	       		width: 20, //寬
	       		height: 20, //高
	       		borderRadius: 50, //圓角邊框
	       		opacity: 0.8,//透明度
	       		color: "white",//顏色
	       		backgroundImg: "img/red.png",
	       		select: { //自定義圓點選中樣式
	       			width: 20, //寬
	       			borderRadius: 50, //圓角邊框
	       			height: 20, //高
	       			color: "red",
	       			backgroundImg: "img/blue.png", //圖片
	       		}
	       	},
	       	spotDirection: "right", //圓點的方向(left:左, right:右, top:上, bottom:下, 默認:bottom)
	       	mousewheel: true, //是否開啟鼠標滾動輪播(默認false)
	       	// loop: true, //是否循環輪播 (默認為: false)
       });

    
    </script>
評論0
頭像

系統已開啟自動識別垃圾評論機制,識別到的自動封號,下載出錯或者資源有問題請聯系全棧客服QQ 3007547952

1 2
机选七乐彩号码一注