javascript無縫滾動

阿新 • • 發佈：2018-12-11

滑鼠滑過左側按鈕向左滑動，滑鼠滑過右側按鈕，向右滑動。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>無縫滾動</title>
	<style>
		@font-face {
		  font-family: 'iconfont';
		  src: url('font/iconfont.eot');
		  src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
		  url('font/iconfont.woff') format('woff'),
		  url('font/iconfont.ttf') format('truetype'),
		  url('font/iconfont.svg#iconfont') format('svg');
		}
		.iconfont{
		  font-family:"iconfont" !important;
		  font-size:80px;font-style:normal;
		  -webkit-font-smoothing: antialiased;
		  -webkit-text-stroke-width: 0.2px;
		  -moz-osx-font-smoothing: grayscale;
		}
		*{
			padding: 0;
			margin: 0;
		}
		.box{
			position: relative;
			width: 900px;
			height: 200px;
			overflow: hidden;
			margin:20px auto 0;
		}
		ul{
			list-style: none;
			height: 200px;
			position: absolute;
			top: 0;
			left: 0;
		}
		li{display: inline-block;
			width: 300px;
			height: 200px;
		}
		img{
			width: 100%;
			height: 100%;
		}
		a{
			display: inline-block;
			position: fixed;
			right: 90px;
			top: 20px;
			width: 80px;
			height: 200px;
			overflow: auto;
			z-index: 1;
			background:rgba(0,0,0,0.8);
			text-decoration: none;
			color: #fff;
			line-height: 200px;
			text-align: center;
		}
		.le{
			left: 90px;
			transform: rotate(180deg);
		}
	</style>
	<script>
		window.onload=function(){
			var roll=document.getElementById("roll");
			var oUl=document.getElementsByTagName("ul")[0];
			var oli=document.getElementsByTagName("li");
			var btn=document.getElementsByTagName("a");
			var iSpend=-2;
			var timer=null;
			oUl.style.width=oli[0].offsetWidth*oli.length+34+"px";
			timer=setInterval(function(){
				oUl.style.left=oUl.offsetLeft+iSpend+"px";

				if (oUl.offsetLeft<-oUl.offsetWidth/2) {
					oUl.style.left='0px';
				}
				else if (oUl.offsetLeft>0){
					oUl.style.left=-oUl.offsetWidth/2+'px';
				}
			},10)
			btn[0].onmouseover=function(){
				iSpend=2;
			}
			btn[1].onmouseover=function(){
				iSpend=-2;
			}
			oUl.onmouseover=function(){
				clearInterval(timer);
			}
			oUl.onmouseout=function(){
				timer=setInterval(function(){
				oUl.style.left=oUl.offsetLeft+iSpend+"px";

				if (oUl.offsetLeft<-oUl.offsetWidth/2) {
					oUl.style.left='0px';
				}
				else if (oUl.offsetLeft>0){
					oUl.style.left=-oUl.offsetWidth/2+'px';
				}
			},10)
			}
			
		}
			
	</script>
</head>
<body>
	<div class="box" id="roll">
		<a href="#" class="iconfont">&#xe62d;</a>
		<a href="#" class="le iconfont">&#xe62d;</a>
		<ul>
			<li><img src="images/1.jpg" alt=""></li>
			<li><img src="images/2.jpg" alt=""></li>
			<li><img src="images/3.jpg" alt=""></li>
			<li><img src="images/5.jpg" alt=""></li>
			<li><img src="images/1.jpg" alt=""></li>
			<li><img src="images/2.jpg" alt=""></li>
			<li><img src="images/3.jpg" alt=""></li>
			<li><img src="images/5.jpg" alt=""></li>
		</ul>
	</div>
</body>
</html>

效果展示：

javascript無縫滾動

滑鼠滑過左側按鈕向左滑動，滑鼠滑過右側按鈕，向右滑動。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>無縫滾動&l

JavaScript-無縫滾動(offset)

無縫滾動用以網站圖片橫向自動滾動瀏覽 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</titl

利用JavaScript做無縫滾動

tps hid blank nts ner pos 下載 http osi <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> <style

javascript實現圖片無縫滾動左右

一個能“動”的網站瀏覽起來看著就美觀大氣。今天我就實現四張圖片的無縫滾動，滑鼠進入滾動停止，點選圖片顯示提示資訊。工具/原料電腦一臺方法/步驟設定圖片的樣式： img { height:

原生javascript寫的無縫滾動輪播圖

html程式碼 <div id="box"> <ul> <li><img src="imgs/1.jpg" /></li>

JavaScript實現垂直向上無縫滾動特效

一、迴圈向上滾動的文字，如上面的滾動效果二、實現的思路 1、建立三個層dome、dome1、dome2 2、垂直滾動的文字在dome1上 3、通過層的滾動來實現文字滾動三、原始碼 <html> <head> <title>迴圈

Javascript基礎——利用定時器實現的圖片無縫滾動(offsetLeft)

1、無縫滾動原理：（1）讓div動起來，讓ul一直向左/向右移動；（2）即利用定時器讓物體從左到右或從右到左進行滾動。採用offsetLeft——如oUl.style.left=oUl.offsetLeft-2+'px';（由左向右）注意：offsetL

JavaScript—原生輪播和無縫滾動

meta 滾動 idt asc over head for anim ive <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

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

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

CSS3實現無限循環的無縫滾動

css有時候在頁面的某個模塊中，需要無限循環的滾動一些消息。那麽如果我們用js實現無縫銜接滾動的思路是什麽呢（比如我們這個模塊是向上滾動的）？克隆A一份完全一樣的數據B放在原數據A的後面；使用setInterval向上滾動A的父級容器；當向上滾動的距離L正好的A的高度時(L==A.height())，L=0，

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

簡單的無縫滾動

sel else border rip utf tle tor htm ring <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <t

JS 實現無縫滾動動畫原理（初學者入）

padding absolute hidden 高度 pos sof add align meta 　　這段時間在教培訓班的學生使用原生javascript實現無縫滾動的動畫案例，做了這個原理演示的動畫，分享給自學JS的朋友！博主希望對你們有幫助！在講解之前先看一下de

js實現無縫滾動

tab ntb asc list chrome webkit form ack target 代碼： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/

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

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

Jquery無縫滾動

rip dir padding 文件新聞 -- ora spa js文件  <style> *{margin:0;padding:0;} body{font-size:12px; font-family:"微軟

jq封裝-無縫滾動效果

over == line tac 表示動效 dir app timer <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <

面向對象無縫滾動輪播(附帶面向過程代碼)

js代碼內部 ++ 封裝面向圓點 link amp blog <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>ba

列表上下無縫滾動

上下 true into 輪播 app mouse num scrip var var innerHeight = $(window).innerHeight(); $(".block").height(innerHeight - 190); //設定高度 var T

javascript無縫滾動

相關推薦