84JS插件：jQuery版轮播图
Posted gushixianqiancheng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了84JS插件：jQuery版轮播图相关的知识，希望对你有一定的参考价值。
一、代码分两个部分：1、html部分，根据注释处理即可；2、基于jQuery的play.js插件部分，这里为了展示效果，直接写在<html></html>下的<script></script>标签里。3、效果包含：自动轮播，焦点对齐，前进后退，直走不返，鼠标进入、轮播停止且前进后退图标出现，鼠标离开、轮播重启且前进后退图标隐藏。4、这里可以预览效果。
二、轮播图原理说明：
（1）轮播图（假设）有7张图片，“一”字排列，把第1张图片复制一次，放到第8张的位置，这样共有8张图片；轮播开始后，
（2）整个第2秒内，第2张图片从开始出现到完全出现，耗时700毫秒，完全出现后再停留300毫秒；
（3）整个第3秒内，第3张图片从开始出现到完全出现，耗时700毫秒，完全出现后再停留300毫秒；以此类推
（4）整个第8秒内，第8张图片从开始出现到完全出现，耗时700毫秒，完全出现后再停留300毫秒；注意
（5）整个第9秒内，轮播图急速回到第1张图片完全出现的状态，耗时约0毫秒（即运行autoMove方法中if语句块的耗时），然后立即开始（2）步骤。
三、也可以用命名空间的方式进行扩展：
<script>
$.myPlugin = banner: function (width, height) ----插件代码---- ;
</script>
<script>
$.myPlugin.banner(‘500px‘, ‘250px‘);
</script>
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>/*style标签及其内的内容，在实际项目中可以不要*/
*
margin: 0;
padding: 0;
</style>
</head>
<body>
<!--body标签里的内容，没说可以增减或更改的，不要增减或更改-->
<div id="box">
<div>
<!--以下是可增减区域-->
<div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517838828_mthumb.jpg" /></div>
<div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517841171_mthumb.jpg" /></div>
<div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517843343_mthumb.jpg" />
</div>
<div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517845828_mthumb.jpg" />
</div>
<div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517848093_mthumb.jpg" />
</div>
<div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517850750_mthumb.jpg" />
</div>
<div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517853171_mthumb.jpg" />
</div>
<!--以上是可增减区域-->
</div>
</div>
</body>
</html>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<script>
(function($)
$.fn.extend(
banner: function (width, height)
var $oBox = $("#box");
/*以下最外层div*/
$oBox.css(
"height": height,
"width": width,
"margin": "0 auto",
"overflow": "hidden",
"position": "relative"
);
/*以下轮播区的div*/
var $oBoxInner = $oBox.children(‘div‘);
var aDiv = $oBoxInner[0].innerHTML;
/* 轮播区内部原来的值*/
var aDiv0 = $oBoxInner.children(‘div‘)[0].outerHTML;
/*第一个轮播图片的外部*/
$oBoxInner.html(aDiv + aDiv0);
/* 用jQuery的方法给轮播区内部重新赋值*/
var $width = parseFloat(width) * $oBoxInner.children(‘div‘).length + "px";
$oBoxInner.css(
"height": height,
"width": $width,
"position": "absolute",
"left": 0,
"right": 0,
"float": "left"
);
$oBoxInner = $oBox.children(‘div‘);
var $aDiv = $oBoxInner.children("div");
$aDiv.css("width": width, "height": height, "float": "left");
$aDiv.children(‘img‘).css("width": "100%", "height": "100%");
/*以下是焦点区部分（定位在轮播区的右下方）*/
$oBox.append("<ul></ul>");
var $ul = $oBox.children("ul");
var $li = "";
$aDiv.each(function (index)
if (index < $aDiv.length - 1)
$li += ‘<li></li>‘;
);
$ul.append($li);
$ul = $oBox.children("ul");
$ul.css("position": "absolute", "right": "10px", "bottom": "10px");
$li = $ul.children("li");
$li.css(
"width": "18px",
"height": "18px",
"float": "left",
"listStyle": "none",
"background": "green",
"borderRadius": "50%",
"marginLeft": "10px",
"cursor": "pointer"
);
/*以下是向左向右两个箭头式按钮*/
var $a = "<a href = ‘javascript:;‘></a><a href = ‘javascript:;‘></a>";
$oBox.append($a);
/*以下是左按钮（点击它，图片向左运动）*/
var $oBtnL = $oBox.children(‘a‘).eq(0);
$oBtnL.css(
"width": "30px",
"height": "30px",
"position": "absolute",
"top": (parseFloat(height) / 2 - 15) + "px",
"left": "30px",
"border": "10px solid red",
"borderLeft": "none",
"borderBottom": "none",
"opacity": 0.6,
"filter ": "alpha(opacity=60)",
"display": "none",
"transform": "rotate(-135deg)"
);
$oBtnL.click(function ()
if ($step <= 0)
$step = $aDiv.length - 1;
$oBoxInner.css(‘left‘, -$step * parseFloat(width));
$step--;
$oBoxInner.animate(left: -$step * parseFloat(width));
$bannerTip();
);
/*以下是右按钮（点击它，图片向右运动）*/
var $oBtnR = $oBox.children(‘a‘).eq(1);
$oBtnR.css(
"width": "30px",
"height": "30px",
"position": "absolute",
"top": (parseFloat(height) / 2 - 15) + "px",
"right": "30px",
"border": "10px solid red",
"borderLeft": "none",
"borderBottom": "none",
"opacity": 0.6,
"filter": "alpha(opacity=60)",
"display": "none",
"transform": "rotate(45deg)"
);
$oBtnR.click(function ()
if ($step >= $aDiv.length - 1)
$step = 0;
$oBoxInner.css(‘left‘, 0)
$step++;
$oBoxInner.animate(left: -$step * parseFloat(width), 1000);
$bannerTip();
);
var $step = 0;//记录每次运动
var $timer = null;//定时器
$init();//初始化轮播图
function $init()
/*1.开启自动轮播*/
$timer = setInterval(function ()
$autoMove();
, 2000);
/*2.开启焦点，每个焦点与每张轮播图对应*/
$bannerTip();
/*3.鼠标移入轮播区，轮播暂停；鼠标移出轮播区，轮播恢复*/
$over_out();
$li.each(function (index)
$(this).on(‘click‘, function ()
$step = index;
$oBoxInner.animate(left: -$step * parseFloat(width), 1000);
$bannerTip();
)
);
function $autoMove()
if ($step >= $aDiv.length - 1)
$step = 0;
$oBoxInner.css(‘left‘, 0)
$step++;
$oBoxInner.animate(left: -$step * parseFloat(width), 1000);
$bannerTip();
function $bannerTip()
var tmpStep = $step >= $li.length ? 0 : $step;
$li.each(function (index)
$li.eq(index).attr("class",index === tmpStep ? ‘on‘ : null);
if ($li.eq(index).attr("class") === "on")
$li.eq(index).css("background","red");
else
$li.eq(index).css("background","green");
)
function $over_out()
$oBox.mouseover(function ()
clearInterval($timer);
$oBtnL.css("display": "block");
$oBtnR.css("display": "block");
);
$oBox.mouseout(function ()
$timer = setInterval(function ()
$autoMove()
, 2000);
$oBtnL.css("display": "none");
$oBtnR.css("display": "none");
);
)
)(jQuery)
</script>
<script>
$("#box").banner(‘500px‘, ‘250px‘);
</script>
```
以上是关于84JS插件：jQuery版轮播图的主要内容，如果未能解决你的问题，请参考以下文章