jQuery带播放暂停的焦点图轮播插件jquery.slider.js

一款jQuery带播放暂停的焦点图轮播插件jquery.slider.js，可以点击左右的箭头按钮来切换不同的图片，也可点击播放暂停按钮来控制图片的播放或暂停，当轮播为暂停状态时不会自动循环轮播，只有播放状态且鼠标未悬停时才会循环轮播（图片底部有时间进度条效果）。

分类：图片代码 > 图片轮播难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需引入轮播样式文件、jQuery库（注意：版本为1.7.1）和轮播插件，并启用插件设置好相关参数，代码如下：

<link type="text/css" rel="stylesheet" href="css/jquery.slider.css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.slider.js"></script>
<style type="text/css">
	body{background-color: #212121}
</style>
<script type="text/javascript">
jQuery(function($){
	$(".slider").slideshow({
		width: 722,
		height: 267,
		transition: ['bar', 'Rain', 'square', 'squareRandom', 'explode']
	});
});
</script>

页面的body部分，设置好div容器里的轮播图片即可，代码如下：

<div style="width:722px;margin:0 auto;margin-top: 100px">
	<div class="slider">
		<div><a href="#"><img src="images/datouwang1.jpg" alt=""></a></div>
		<div><a href="#"><img src="images/datouwang2.jpg" alt=""></a></div>
		<div><a href="#"><img src="images/datouwang3.jpg" alt=""></a></div>
		<div><a href="#"><img src="images/datouwang4.jpg" alt=""></a></div>
		<div><a href="#"><img src="images/datouwang5.jpg" alt=""></a></div>
	</div>
</div>