jquery图片滚动插件（可自定义数字样式和左右点击按钮）

来源：互联网发布：ones刻录软件中文版编辑：程序博客网时间：2024/05/01 05:50

在网上找了挺多图片轮播的插件，感觉有些第一次都需要好长时间才能播放，其实也是个简单的东西，自己写了个插件。图片借用了一下哦。

思路：自动播放时，鼠标移上，停止播放，鼠标移开自动播放，向后点击时，图片到最后一张时要切换到第一张。向前点击，图片到第一张时要切换到最后一张。

html代码：

<div class="pic_scroll_box" id="testScroll">        <ul>            <li><a><img src="images/01.jpg" alt="" /></a></li>                <li><a><img src="images/02.jpg" alt="" /></a></li>                <li><a><img src="images/03.jpg" alt="" /></a></li>                <li><a><img src="images/04.jpg" alt="" /></a></li>                <li><a><img src="images/05.jpg" alt="" /></a></li>          </ul>            <div class="nums">                    <span class="on"></span>                    <span></span>                    <span></span>                    <span></span>                    <span></span>            </div>        </div>

css代码：

.pic_scroll_box{ position:relative; width:800px; height:280px; margin:0 auto; overflow:hidden;}.pic_scroll_box ul{ list-style:none; position:absolute; top:0; left:0; width:4000px; height:280px;}.pic_scroll_box ul li{ float:left;}.pic_scroll_box ul li img{ border:none;}.pic_scroll_box .lf_btn{ width:45px; height:100px; position:absolute; top:90px; cursor:pointer; opacity:0.2;          background:url(images/sprite.png) 0 0 no-repeat;  filter:alpha(opacity=20);}.pic_scroll_box .prev{left:0; }.pic_scroll_box .next{right:0; background-position:right top;}.pic_scroll_box .nums{ background:#000;  width:780px; height:20px; position:absolute;           bottom:0; text-align: right; padding:0 10px;opacity:0.5; filter:alpha(opacity=50);}.pic_scroll_box .nums span{ display:inline-block; width:25px; height:10px; margin-left:5px;          background:#fff;opacity:0.4; filter:alpha(opacity=40); }.pic_scroll_box .nums span.on{opacity:1; filter:alpha(opacity=100);}

js代码：

$("#testScroll").pictrueScrollPlugin();

demo下载