自帶按鈕無縫滾動圖片

阿新 • • 發佈：2019-01-16

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script><!--引用自己路徑的jquery.js檔案-->
		<script src="js/right.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.laws_culture_right{
				width: 380px;
				height: 340px;
				float: left;
				margin-left: 6px;
				border: 1px solid #FF0000;
				position: relative;
			}
			.laws_culture_right_main{
				width: 100%;
				height: 290px;
				overflow: hidden;
				margin: 5px 0;
				position: relative;
			}
			.laws_culture_right ul{
				width: 100%;
				padding: 0px;
				height: 490px;
				position: absolute;
				top: -100px;
			}
			.laws_culture_right ul li{
				list-style: none;
				height: 90px;
				width: 90%;
				margin: 0 auto;
				margin-bottom: 10px;
			}
			.laws_culture_right ul li img{
				width: 100%;
				height: 100%;
			}
			.up,.down{
				width: 100%;
				height: 20px;
				background-color: #000000;
				opacity: 0.5;
				cursor: pointer;
				font: 600 18px/14px arial;
				color: #FFF;
				text-align: center;
			}
			.down{
				font: 600 18px/26px arial !important;
			}
		</style>
	</head>
	<body>
		<div class="laws_culture_right">
			<div class="up">︽</div>
			<div class="laws_culture_right_main" id="laws_culture_id">
				<ul>
					<li><img src="image/default/default_09.png"/></li>
					<li><img src="image/default/default_10.png"/></li>
					<li><img src="image/default/default_14.png"/></li>
					<li><img src="image/default/default_15.png"/></li>
					<li><img src="image/default/default_16.png"/></li>
				</ul>
			</div>
			<div class="down">︾</div>
		</div>
	</body>
</html>

$(function(){
	 setInterval('moveCulture("#laws_culture_id")', 3000);//每3S呼叫一次下面的函式
})
function moveCulture(obi) {
$(obi).find("ul:first").animate({
marginTop: "-100px"
}, 1500, function() {
$(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
});


$('.up').click(function(){
    $('#laws_culture_id').find("ul:first").stop().animate({
    marginTop:"100px"
    },500,function(){
    $(this).css({ marginTop: "0px" }).find("li:last").prependTo(this);
    });
    });
$('.down').click(function(){
$('#laws_culture_id').find("ul:first").stop().animate({
    marginTop:"-100px"
    },500,function(){
    $(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
    });
});
}

樣式展示：

自帶按鈕無縫滾動圖片

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-

金蝶bos 獲取標準產品分錄自帶按鈕的監聽及繫結的事件

protected void addLines() throws BOSException{ if(tabName != null && !tabName.equals("")){

利用Windows系統自帶的軟體修改圖片格式和解析度

使用SpringMV自帶的CommonsMultipartFile實現圖片上傳功能

說明 1.前端上傳檔案必須用表單上傳 /** * 上傳圖片 * * @param params * @return */ @RequestMapping(value = "/uploadImage"

使用Windows自帶畫圖工具修改圖片大小

一、開啟Windows再帶的畫圖工具開啟方式： 1、【開始】-【所有程式】-【附件】-【畫圖】或者 2、開啟執行命令框-輸入mspaint-單擊確定二、用畫圖開啟要修改大小的圖片三、修改圖片大小單擊左上角【重新調整大小】有兩種調整大小的方式可以選：1、按照百

JS呼叫瀏覽器自帶下載功能下載圖片

function download(src) { var $a = document.createElement('a'); $a.setAttribute("href", src);

android 呼叫自帶的相簿檢視圖片

現在的大部分手機自帶的相簿功能都比較完善，瀏覽圖片完全可以呼叫自帶的相簿。搜尋了不少關於這方面的程式碼---短短几行，如下所示： Intent intent2 = new Intent(Intent.ACTION_VIEW); uri = Uri.par

VC/MFC中如何替換自帶滾動條控制元件的圖片

Introduction This is my first article. At first, I must express my thanks to CodeProject and all the selfless people. I have tried to look for a sample to

banner無縫滾動動畫，支持左右按鈕和小點

眼睛移動 on() ner wid 表示 margin val float HTML： <div class="box"> 　　<ul> 　　　　<li class="img_cur" > 　　　　　　<a h

ckeditor添加自定義按鈕整合swfupload實現批量上傳圖片

下載了解 nbsp 文件 mouseover 去掉 dial size pro ckeditor添加自定義按鈕整合swfupload實現批量上傳圖片給ckeditor添加自定義按鈕，由於ckeditor只能上傳一張圖片，如果要上傳多張圖片就要結合ckfinder，而ckf

CKEditor 自定義按鈕插入服務端圖片

自定義按鈕 asp lap .get extra 版本 icp java conf CKEditor 富文本編輯器很好用，功能很強大，在加上支持服務端圖片上傳的CKFinder更是方便，最近在使用CKFinder的時候發現存在很多問題，比如上傳圖片的時候，圖片不能按時間

Qt自定義按鈕及不同狀態下圖片的切換

q自定義窗體、任意形狀的窗體、qt自定義按鈕好久沒有使用Qt了，最近在做窗體時做了一個自定義的鈕銨，剛開始是想通過修改其MASK和ICON的方式來實現。確發現效果總是不太如意，如是幹脆自已定義了一個XPushButton。也將其實現方式記錄發布出來。以方便日後自已使用和給有相應問題的朋友一個小小的

jquery 圖片自動無縫滾動

javascrip oat mar image charset ext 函數 oct meta <!DOCTYPE html><html><head> <meta charset="utf-8"> <m

圖片的無縫滾動效果

-- adding margin image left offset mage lang cti 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <met

關於ThinkCMF自帶插件上傳不了圖片的解決方法

.cn 方法插件 thinkcmf 解決方法刪除打開 blog 文件原因:是因為刪除了存放圖片的文件夾,這是cmf在windows的一個BUG 解決方法: 再到php.ini裏把這個打開就解決了關於ThinkCMF自帶插件上傳不了圖片的解決方法

網站開發，推薦使用SuperSlide 插件-Tab標簽切換，圖片滾動，無縫滾動，焦點圖

更新 www 展示部分 rdquo 標簽網上幻燈片 dex SuperSlide 致力於解決網站大部分特效展示問題，使網站代碼規範整潔，方便維護更新。網站上常用的“焦點圖/幻燈片”“Tab標簽切換”“圖片滾動

【常見】移動端實例——圖片無縫滾動

+= get math view ack sta chan ole 寬度 <!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <meta name

jquery實現圖片無縫滾動，蒙版遮蔽效果

1、無縫連線：通過對li設定屬性float：left；消除標籤之間的間隔 2、通過對ul整體進行偏移設定，使圖片整體滾動， 3、設定圖片切換時機， 4、蒙版遮罩移入時機的選擇程式碼片. <!DOCTYPE html> <html> <head>

文字、圖片左右無縫滾動效果--支援拖拽

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>文字、圖片無縫滾動效果--廣告</t

Android 系統自帶圖片裁剪功能（適配7.0、8.0、對了還有小米手機）

前段時間寫了如何獲取相簿和拍照之後的照片並且進行顯示和上傳，這一次是如何進行圓形影象製作，經常看我寫的筆記的人會知道，我很懶。那麼我就懶的自定義了，目前需求就用原生的就好了，大神的輪子，我會在後面進行推薦。這篇筆記是依賴於：Android呼叫相簿、相機（相容6.0、7.0、8.0）文

自帶按鈕無縫滾動圖片

相關推薦