结合YII的JQUERY新闻滚动 - 话题

落叶 2011-07-22 10:25:01 6791次浏览 18条回复 0 0 0

[attach]267[/attach]使用方法：把文件[attach]267[/attach]解压到extensions 在view中使用方法

<?php 
$this->widget('application.extensions.newsSlider.NewsSlider',array(
    'class'=>'#newsticker-demo',					
    'config'=>array(
        'vertical'=>true,
        'hoverPause'=>true,
        'btnPrev'=> ".previous",
        'btnNext'=> ".next",
        'visible'=> 3,
        'auto'=>3000,
        'speed'=>500	
    )
))?>
<img src="news-arrow-previous.png" class="previous" style="display:none;" />
<div id="newsticker-demo">
    <ul>
        <li>
            <p>
                <span class="title">Tip: </span><a href="http://www.scriptbreaker.com">Looking for new scripts?</a><br>
                Visit our homepage to see the latest scripts.
            </p>
        </li>
        <li>
            <p>
                <span class="title">Find: </span><a href="http://www.scriptbreaker.com">Scripts by category?</a><br>
                A collection of popular scripts by category
            </p>
        </li>
        <li>
            <p>
                <span class="title">Help: </span><a href="http://www.scriptbreaker.com">Say hello?</a><br>
                Need some help?  Just drop us a line.
            </p>
        </li>
        <li>
            <p>
                <span class="title">Wow: </span><a href="http://www.scriptbreaker.com">Navigation?</a><br>
                Looking for some cool navigation scripts
            </p>
        </li>
        <li>
            <p>
                <span class="title">Request: </span><a href="http://www.scriptbreaker.com">Need a script?</a><br>
                Can't find the the script you're looking for'?  Ask us!
            </p>
        </li>
    </ul>
</div>
<img src="news-arrow.png" class="next" style="display:none;"/>

效果 [attach]266[/attach]

jquery

╃巡洋艦㊣回复于 2011-07-22 10:26 举报

很好很强大，抢沙发！

回复 0 0

落叶回复于 2011-07-22 10:29 举报

不过现在有点小问题就是如果在juquery里有before()方法插入那两个三角形图片，点击事事件就会消失，
如果把视图里的代码改成

<img src="news-arrow-previous.png" class="previous" /> <!-- 后添加的img标签-->
 <div id="newsticker-demo">
    <ul>
        <li>
            <p>
                <span class="title">Tip: </span><a href="http://www.scriptbreaker.com">Looking for new scripts?</a><br>
                Visit our homepage to see the latest scripts.
            </p>
        </li>
        <li>
            <p>
                <span class="title">Find: </span><a href="http://www.scriptbreaker.com">Scripts by category?</a><br>
                A collection of popular scripts by category
            </p>
        </li>
        <li>
            <p>
                <span class="title">Help: </span><a href="http://www.scriptbreaker.com">Say hello?</a><br>
                Need some help?  Just drop us a line.
            </p>
        </li>
        <li>
            <p>
                <span class="title">Wow: </span><a href="http://www.scriptbreaker.com">Navigation?</a><br>
            Looking for some cool navigation scripts
            </p>
        </li>
        <li>
            <p>
                <span class="title">Request: </span><a href="http://www.scriptbreaker.com">Need a script?</a><br>
            Can't find the the script you're looking for'?  Ask us!
            </p>
        </li>
    </ul>
</div>
<img src="news-arrow.png" class="next" /><!-- 后添加的img标签-->