一、代码分两个部分：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" alt=""/></div>
<div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517841171_mthumb.jpg" alt=""/></div>
<div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517843343_mthumb.jpg" alt=""/>
</div>
<div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517845828_mthumb.jpg" alt=""/>
</div>
<div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517848093_mthumb.jpg" alt=""/>
</div>
<div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517850750_mthumb.jpg" alt=""/>
</div>
<div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517853171_mthumb.jpg" alt=""/>
</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版轮播图
猜你喜欢
转载自www.cnblogs.com/gushixianqiancheng/p/10967124.html
今日推荐
周排行