淘宝装修特效代码之文字滚动轮播

1、打开文本编辑器，复制以下这段样例代码：

<div  class="J_TWidget scroll-news" data-widget-type="Slide" 

data-widget-config="{'contentCls':'news-items','hasTriggers':false,'effect':'scrolly','easing':'easeOutStrong','interval':3,'duration':0.2}">

    <ul class="news-items">

<li>

<a target="_blank" href="#">

明天是星期天，买一送一了。

</a>

</li>

<li>

<a target="_blank" href="#">

下个星期回家乡了

</a>

</li>

<li>

<a target="_blank" href="#">

明天哥哥娶新娘子，真高兴。

</a>

</li>

    </ul>

</div>

2、样例代码中有三句话，分别为1.2.3 ，修改成自己想要说的话，然后将要链接的地址“#”修改，不链接就不用改。

3、现在， 我们要定义滚动文字显示的范围。<div class="J_TWidget"></div>中添加

style="width:300px; heigth:30px;"

<ul></ul>中添加style="list-style:none; margin:0; padding:0;  width:300px; height:30px; line-height:30px;"

如下图所示

4、最终代码如下：

<div  class="J_TWidget scroll-news" data-widget-type="Slide" 

data-widget-config="{'contentCls':'news-items','hasTriggers':false,'effect':'scrolly','easing':'easeOutStrong','interval':3,'duration':0.2}" style="width:300px; height:30px; ">

    <ul class="news-items" style="list-style:none; margin:0; padding:0;  width:300px; height:30px; line-height:30px;">

<li >

<a target="_blank" href="#" >

明天是星期天，买一送一了。

</a>

</li>

<li>

<a target="_blank" href="#">

下个星期回家乡了

</a>

</li>

<li>

<a target="_blank" href="#">

明天哥哥娶新娘子，真高兴。

</a>

</li>

    </ul>

</div>

打开装修后台，测试代码生效。