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

最新推荐文章于 2020-09-08 17:13:24 发布

binglingnew

最新推荐文章于 2020-09-08 17:13:24 发布

阅读量1.5k

点赞数

分类专栏： js 插件

本文链接：https://blog.youkuaiyun.com/binglingnew/article/details/17042895

版权

js 同时被 2 个专栏收录

18 篇文章

订阅专栏

插件

3 篇文章

订阅专栏

本文介绍了一个简单的图片轮播插件实现方法，包括HTML、CSS和JS代码，通过鼠标操作控制播放，并实现了循环播放功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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下载