整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
友們，下午好！
都說一張美美的圖能為文章增色三分！
那如果是一個交互的圖片樣式 + 幾張美美圖呢？這能為文章增色多少呢？
比如這種（樣式ID：90298）
使用這種樣式，即能有效的展示圖片，還能縮小文章空間，而且還與讀者存在互動交互，想不想知道這種樣式怎么做出來呢？
上面兩種樣式都可以在樣式中心輸入ID搜索到。
但是，樣式中心的原樣式，都是四張圖片滑動的，直接進行換圖就可以使用了。
但如果要像三兒上面做的兩個樣式，一個是5張圖，一個是9張圖，就要進HTML進行修改了。
進入到“HTML”模式，找到<section .........> </section>這段代碼，先選擇Ctrl+C復制。
然后在此段代碼結尾處敲回車鍵換行，再選擇Ctrl+V粘貼。
粘貼幾次，樣式就會在原有四張的基礎上多出幾張，胖友們可以根據自己的需求進行多次粘貼。
進入到“HTML”模式，找到<img src=........./>這段代碼，先選擇Ctrl+C復制，然后在此段代碼結尾處，再Ctrl+V粘貼。
同上個樣式，粘貼幾次，樣式就會在原有四張的基礎上多出幾張，胖友們可以根據自己的需求進行多次粘貼。
為了樣式的美感，還是有三點建議給大家。
1、圖片請保持尺寸一致。否則會導致圖片層次不齊。
2、尺寸請500x500以上。否則可能會使圖片不清楚。
3、圖片大小盡可能小點。否則瀏覽時加載會不流暢。
更多好玩樣式，請進樣式中心搜索“滾動”
好了，本次教程就到這里~bye
avascript一種直譯式腳本語言，是一種動態類型、弱類型、基于原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在html（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。
背景：
想要實現圖片持續滾動，既然使用js,就千萬不要加css動畫、過渡等相關樣式，如果想要滾動的平滑一下，可以一像素一像素的感動，則很平滑，如果加了過渡動畫，當圖片重置為0時，會有往回倒的動畫效果，跟預期不符。
原理：
圖片滾動原理同圖片輪播原理，同樣也適用于文字滾動等一系列滾動，通過復制最后一張圖片或最后一堆文字插入第一行，或復制第一張圖片或一堆文字插入在結尾，來實現無縫拼接，前提：1、必須是沒有設置過渡動畫的，2、重置為0的時候與當前已經滾動到的高度對于圖片的位置而言肉眼看上去沒變化。
實現：
html主要包含三塊：
1、最外層盒子，用來展示滾動圖的區域，overflow:hidden;
2、滾動的盒子，主要改變該盒子的定位值，來實現滾動，里面包含所有要滾動的圖片或文字
3、包含圖片或文字的盒子。
代碼：
classRoll{
constructor(opts){
this.elem=opts.elem;//圖片包含滾動長度的元素的
this.elemBox=opts.elemBox;//圖片展示區域元素，為了獲取展示區域的高度
this.direction=opts.direction;
this.time=opts.time;
this.init();
this.roll=this.roll.bind(this)
this.startRoll=this.startRoll.bind(this)
this.stopRoll=this.stopRoll.bind(this)
}
init(){
this.elemHeight=this.elem.offsetHeight;
this.elemHtml=this.elem.innerHTML;
this.elem.innerHTML=this.elem.innerHTML+this.elemHtml+this.elemHtml;
this.speed;
//如果向上滾或者向左滾動每次減1，向下滾或者向右滾動每次加1
if(this.direction==='top'||this.direction==='left'){
this.speed=-1;
}else{
this.speed=1;
}
}
roll(){
switch(this.direction){
case"top":
//如果滾動的盒子的top值超出元素的高度，則值為0
if(Math.abs(this.elemBox.offsetTop)>=this.elemHeight){
this.elemBox.style.top=0;
}else{
this.elemBox.style.top=this.elemBox.offsetTop+this.speed+'px';
}
break;
case"bottom":
//如果滾動的盒子的bottom值超出元素的高度，則值為0
if(Math.abs(this.elemBox.offsetBottom)>=this.elemHeight){
this.elemBox.style.bottom=0;
}else{
this.elemBox.style.bottom=this.elemBox.offsetBottom+this.speed+'px';
}
break;
case"left":
//如果滾動的盒子的left超出元素的高度，則置為0
if(Math.abs(this.elemBox.offsetLeft)>=this.elemHeight){
this.elemBox.style.left=0;
}else{
this.elemBox.style.left=this.elemBox.offsetLeft+this.speed+'px';
}
break;
case"right":
//如果滾動的盒子的right超出元素的高度，則置為0
if(Math.abs(this.elemBox.offsetRight)>=this.elemHeight){
this.elemBox.style.right=0;
}else{
this.elemBox.style.right=this.elemBox.offsetRight+this.speed+'px';
}
break;
default:
//默認向上滾動，如果滾動的盒子的top超出元素的高度，則置為0
if(Math.abs(this.elemBox.offsetTop)>=this.elemHeight){
this.elemBox.style.top=0;
}else{
this.elemBox.style.top=this.elemBox.offsetTop+speed+'px';
}
}
}
stopRoll(){
clearInterval(this.scrollTimer)
}
startRoll(){
this.scrollTimer=setInterval(this.roll,this.time)
}
}
在1995年時，由Netscape公司的BrendanEich，在網景導航者瀏覽器上首次設計實現而成。因為Netscape與Sun合作，Netscape管理層希望它外觀看起來像java，因此取名為JavaScript。但實際上它的語法風格與Self及Scheme較為接近。js實現單張或多張圖片持續無縫滾動。
開課吧Web前端教程
例1: 無縫連續滾動
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
div{
width: 1000px;
height: 130px;
margin: 100px auto;
border: 1px solid #000;
position: relative;
overflow: hidden; /* 防止滾動的圖片溢出 */
}
ul{
width: 2000px;
position: absolute;
left: 0;
top: 0;
}
li{
float: left;
}
img{
display: block;
}
</style>
</head>
<body>
<div>
<ul>
<li><img src="img/1.png"/></li>
<li><img src="img/2.png"/></li>
<li><img src="img/3.png"/></li>
<li><img src="img/4.png"/></li>
<li><img src="img/5.png"/></li>
<!--我們在復制一套出來-->
<li><img src="img/1.png"/></li>
<li><img src="img/2.png"/></li>
<li><img src="img/3.png"/></li>
<li><img src="img/4.png"/></li>
<li><img src="img/5.png"/></li>
</ul>
</div>
<script type="text/javascript">
var ul = document.getElementsByTagName("ul")[0];
setInterval(function(){
if(getStyle(ul,"left")===-1000){
ul.style.left = "0px";//執行這一行代碼需要多長時間???
}
ul.style.left = getStyle(ul,"left") - 1 + "px";
},10)
function getStyle(obj,attr){
if(window.getComputedStyle){
return parseInt(window.getComputedStyle(obj)[attr]);
}else{
return parseInt(obj.currentStyle[attr]);
}
}
</script>
</body>
</html>圖片規格: 200px 130px
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
