友们，下午好！

都说一张美美的图能为文章增色三分！

那如果是一个交互的图片样式 + 几张美美图呢？这能为文章增色多少呢？

比如这种（样式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

外话：实在是闹不明白头条是怎么对文章进行推荐的，头大...

好了，进入今天的主题，利用定时器设计出网站经常会使用到的效果——图片无缝滚动展示。

图片无缝滚动效果

一、设计思路

1、设计图片滚动前的样式

//这是页面的内容，用到的图片大家可以去我的网盘下载

<p>图片无缝滚动</p>

<div id="img_move">

<ul>

<li><img src="./images/dhb.jpg" alt=""></li>

<li><img src="./images/hnrb.jpg" alt=""></li>

<li><img src="./images/rmrb.jpg" alt=""></li>

<li><img src="./images/jzrb.jpg" alt=""></li>

<li><img src="./images/nmrb.jpg" alt=""></li>

</ul>

</div>

//CSS设计样式，只是最简单的展示，大家也可以添加自己喜欢的

<style>

*{margin:0; padding: 0;}

p{

margin:0 auto;

text-align: center;

font-size:30px;

}

#img_move{

width:400px;

height:28px;

background-color: red;

margin:30px auto;

position: relative; //相对定位

overflow: hidden; //表示溢出这个元素大小的内容全部隐藏

}

#img_move ul{

position: absolute; //相对于img_move这个元素进行绝对定位

left:0;

top:0;//距离左为0，上为0，我理解的意思是ul的左上角与img_move这个元素的左上角重合了。

}

#img_move ul li{

width: 80px;

height:28px;

list-style: none;

float:left;

}

</style>

2、让图片动起来。这里需要用到offsetLeft（左右滚动用的），当然还有对应的offsetTop（上下滚动用的）。

（1）首先获取到页面上的各个元素

var oDiv = document.getElementById("img_move");

var oUl = oDiv.getElementsByTagName("ul")[0];

var aLi = oUl.getElementsByTagName("li");

（2）选择对oUl这个元素进行滚动（主要是考虑到li过多，如果选择li滚动会让问题复杂起来）

function img_move(){

oUl.style.left = oUl.offsetLeft - 2 + "px"; //表示让oUl元素向左移动2个像素

（3）让oUl每隔30毫秒向左移动一次。你问我为什么选择30毫秒，等做完整个例子后你可以修改一下这个毫秒数，看看有什么效果吧^_^

setInterval(img_move, 30);

二、扩展完善

做完上边的步骤你会发现oUl这个元素动起来了，但是问题又出现了，你会发现oUl在移动过后漏出了img_move的背景色红色，我们先来分析一下为什么会出现这种情况，看下图

图1 目前的布局

这个图片表示当时了当时的运动场景，当oUl向左移动时，因为它就这么长，往左走后边没有东西了自然就意味着要漏出div的红色。怎么办？首先想到的肯定是在它后边继续加一组图片，想法是绝对正确的，但下一组也走完了怎么办？继续加？O(∩_∩)O哈哈~估计你的网站空间很快就被图片给用完了。我们只加一组图片，怎么加？其实就是加了一个oUl自身内部的所有内容。

oUl.innerHTML += oUl.innerHTML

oUl.style.width = aLi[0].offsetWidth * aLi.length + "px"; //修改oUl的宽度

这样就得到了下面这张图

图2 加了一组图片的布局

接下来怎么办呢？大家都知道，我们肉眼看东西也是有一定的时间延误的，小于这个时间延误大家是看不出来变化的，思路来了。看下图

图3 ul左移动到超过一半时

当oUl向左移动超过一半的时候，我们立马把oUl的left设定为0，这样oUl就又跳回到图2的状态继续左移动。

function img_move()

{

if(oUl.offsetLeft < -oUl.offsetWidth/2)

{

oUl.style.left = 0;

}

//右移动时候的判断条件

if(oUl.offsetLeft > 0)

{

oUl.style.left = -oUl.offsetWidth/2 + "px";

}

oUl.style.left = oUl.offsetLeft - 2 + "px"; //表示让oUl元素向左移动2个像素，向右移动变成+2

}

再看看效果吧。

4、添加鼠标移入、移出效果

oDiv.onmouseover = function()

{

clearInterval(timer);

}

oDiv.onmouseout = function()

{

timer = setInterval(img_move, 30);

}

到此为止，图片无缝滚动的展示效果就做出来了，是不是很简单，O(∩_∩)O哈哈~再复杂的问题，你把它拆开来看，其实都很简单。

<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

不吹牛逼，不吹质量，我们开放了数10节主体课程，看过这些课程以后，如果你做过对比，我相信你心中自有答案。作者qierukou，主页 http://www.qierukou.com