第一种
轮播图, 没有耳朵, 自动轮播, 鼠标放上去会停止, 只需在body里面更改图片宽高和图片路径
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一种轮播图，没有耳朵，自动轮播，鼠标放上去会停止，只需在body里面更改图片宽高和图片路径</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.wrap {
margin: 60px auto;
overflow: hidden;
position: relative;
margin: 100px auto;
}
.wrap ul {
position: absolute;
width: 100%;
height: 100%;
}
.wrap ul li {
height: 100%;
}
.wrap ul li img {
width: 100%;
height: 100%;
}
.wrap ol {
position: absolute;
width: inherit;
display: flex;
justify-content: center;
bottom: 10px;
}
.wrap ol li {
height: 5px;
width: 30px;
background: #c5c0c0;
border-radius: 10px;
margin-left: 5px;
float: left;
line-height: center;
text-align: center;
cursor: pointer;
}
.wrap ol .on {
background: white;
}
</style>
<!-- 轮播图处理的事件 -->
<script type="text/javascript">
window.onload = function () {
var wrap = document.getElementsByClassName('wrap')[0],
pic = document.getElementById('pic').getElementsByTagName("li"),
list = document.getElementById('list').getElementsByTagName('li'),
index = 0,
timer = null;
// 定义并调用自动播放函数
timer = setInterval(autoPlay, 2000);
// 鼠标划过整个容器时停止自动播放
wrap.onmouseover = function () {
clearInterval(timer);
}
// 鼠标离开整个容器时继续播放至下一张
wrap.onmouseout = function () {
timer = setInterval(autoPlay, 2000);
}
// 遍历所有数字导航实现划过切换至对应的图片
for (let i = 0; i < list.length; i++) {
list[i].onmouseover = function () {
clearInterval(timer);
index = i;
changePic(index);
};
};
// 自动播放
function autoPlay() {
if (++index >= pic.length) index = 0;
console.log('-------------')
changePic(index);
}
// 定义图片切换函数
function changePic(curIndex) {
console.log(curIndex)
for (var i = 0; i < pic.length; ++i) {
pic[i].style.display = "none";
list[i].className = "";
}
pic[curIndex].style.display = "block";
list[curIndex].className = "on";
}
};
</script>
</head>
<body>
<div class="wrap" style="height: 324px; width: 324px;">
<ul id="pic">
<li><img src="img/1.jpg" alt=""></li>
<li><img src="img/2.jpg" alt=""></li>
<li><img src="img/3.jpg" alt=""></li>
<li><img src="img/4.jpg" alt=""></li>
</ul>
<ol id="list">
<li class="on"></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</body>
</html>第二种
第二种轮播图，有耳朵，功能基本齐全，只需在body里面更改图片宽高和图片路径
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第二种轮播图，有耳朵，功能基本齐全，只需在body里面更改图片宽高和图片路径</title>
<style>
#mlBox {
position: relative;
margin: 50px auto;
border: 1px #ececec solid;
}
#mlImg {
width: 100%;
height: 100%;
}
#mlImg img {
width: 100%;
height: 100%;
display: none;
}
#mlSpan {
width: inherit;
height: 10px;
position: absolute;
bottom: 10px;
display: flex;
justify-content: center;
}
#mlSpan span {
display: block;
float: left;
width: 32px;
height: 4px;
background: white;
border-radius: 2px;
margin: 0 2px;
z-index: 100;
opacity: 0.4;
}
#mlImg #mlShow {
display: block;
}
#mlSpan #mlOn {
opacity: 1;
}
#mlLeft {
width: 30px;
height: 30px;
background: rgb(245, 245, 245, 0.3);
position: absolute;
border-radius: 50%;
left: 0;
top: 47%;
display: none;
text-align: center;
line-height: 30px;
}
#mlRight {
width: 30px;
height: 30px;
background: rgb(245, 245, 245, 0.3);
position: absolute;
border-radius: 50%;
right: 0;
top: 47%;
display: none;
text-align: center;
line-height: 30px;
}
#mlLeft span,
#mlRight span {
color: rgb(255, 255, 255);
}
#mlLeft:hover {
background: rgb(245, 245, 245, 0.7);
}
#mlRight:hover {
background: rgb(245, 245, 245, 0.7);
}
</style>
</head>
<body>
<div id="mlBox" style="width: 324px; height: 324px;">
<div id="mlImg">
<img src="img/1.jpg" alt="" id="mlShow">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
</div>
<p id="mlSpan">
<span id="mlOn"></span>
<span></span>
<span></span>
<span></span>
</p>
<div id="mlLeft">
<span><</span>
</div>
<div id="mlRight">
<span>></span>
</div>
</div>
<script>
ml(true); //调用ml函数 注:传参是否需要左右指示 默认false
function ml(indicator) {
var oMlBox = document.getElementById('mlBox'); //获取id:mlBox
var oMlImg = document.getElementById('mlImg'); //获取id:mlImg
var oMlSpan = document.getElementById('mlSpan'); //获取id:mlSpan
var aSpan = oMlSpan.getElementsByTagName('span'); //获取id:mlSpan里面的span标签
var aImg = oMlImg.getElementsByTagName('img'); //获取id:mlImg里面的img标签
var oMlLeft = document.getElementById('mlLeft'); //获取id:mlLeft
var oMlRight = document.getElementById('mlRight'); //获取id:mlRight
var u = 0; //当前照片位置
var shut = null; //定时器的名字
function f1() {
for (var i = 0; i < aSpan.length; i++) { //循环id:mlSpan里面的span标签
aSpan[i].id = ''; //让span标签的id等于空
aImg[i].id = ''; //让id:mlImg里面img标签id等空
}
aSpan[u].id = 'mlOn'; //当前位置的span标签id等于mlOn
aImg[u].id = 'mlShow'; //当前位置的img标签id等于mlShow
}
for (var f = 0; f < aSpan.length; f++) { //循环id:mlSpan里面的span标签
aSpan[f].index = f; //span标签第f个的index等于f
aSpan[f].onclick = function () { //点击span标签 注:照片下面的三个点
u = this.index; //当前位置等于当前span标签index的位置
f1(); //调用f1函数
}
}
oMlBox.onmousemove = function () { //鼠标悬浮id:mlBox
clearInterval(shut); //关闭定时器
if (indicator) { //是否显示左右指示 注:调用ml函数传参
oMlLeft.style.display = 'block'; //显示左指示
oMlRight.style.display = 'block'; //显示右指示
oMlRight.onclick = function () { //点击右指示
u++; //当前位置加一
if (u >= aImg.length) { //当前位置大于照片的数量就等于0
u = 0;
}
f1(); //调用f1函数
};
oMlLeft.onclick = function () { //点击左指示
u--; //当前位置减一
if (u < 0) { //当前位置小于0时就让当前位置等于照片数量减一
u = aImg.length - 1; //注:因为计算机从零开始数所以要减一
}
f1(); //调用f1函数
};
} else {
oMlLeft.style.display = 'none'; //左指示消失
oMlRight.style.display = 'none'; //右指示消失
}
};
oMlBox.onmouseout = function () { //当鼠标移出id:mlBox
f2(); //调用f2函数
oMlLeft.style.display = 'none'; //左指示消失
oMlRight.style.display = 'none'; //右指示消失
};
function f2() {
shut = setInterval(function () { //定时器
u++; //每3秒当前位置加一
if (u >= aImg.length) { //当前位置大于等于照片的数量当前位置等于0
u = 0;
}
f1(); //调用f1函数
}, 3000);
}
f2(); //调用f2函数
}
</script>
</body>
</html>第三种
第三种轮播图，功能也基本齐全，问题是图片多宽就得多款，否则容易出问题，要改匿名函数里面的循环值，在body里面改宽高和路径
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第三种轮播图，功能也基本齐全，问题是图片多宽就得多款，否则容易出问题，要改匿名函数里面的循环值，在body里面改宽高和路径</title>
<style>
* {
margin: 0;
padding: 0;
text-decoration: none;
}
#container {
margin: 20px auto;
overflow: hidden;
position: relative;
}
#list {
height: 100%;
width: 30000px;
position: absolute;
z-index: 1;
}
img {
display: block;
float: left;
}
#buttons {
position: absolute;
width: inherit;
height: 10px;
z-index: 2;
bottom: 25px;
display: flex;
justify-content: center;
}
#buttons span {
float: left;
border: 1px solid #fff;
width: 10px;
height: 10px;
border-radius: 50%;
margin: 0 5px;
color: #333;
cursor: pointer;
}
#buttons .on {
background: white;
}
.arrow {
cursor: pointer;
display: none;
width: 30px;
height: 30px;
position: absolute;
z-index: 2;
top: 45%;
background-color: RGBA(0, 0, 0, .2);
border-radius: 50%;
}
.arrow:hover {
background-color: RGBA(0, 0, 0, .5);
}
#container:hover .arrow {
display: block;
}
#prev {
left: 10px;
}
#next {
right: 10px;
}
</style>
<!-- 事件哦~ -->
<script>
(function (window, document) {
// 默认的图片宽高
let defaultSetting = {
"width": "500",
"height": "500"
}
function Carousel(options) {
var self = this;
self.setting = Object.assign(defaultSetting, options);
self.container = document.querySelector(self.setting.container);
// 设置container的宽高，才能看到，否则一篇空白
self.container.style.width = options.width + 'px';
self.container.style.height = options.height + 'px';
self.list = document.querySelector("#list");
self.sliderItems = self.list.getElementsByTagName('img');
self.buttons = document.querySelector("#buttons").getElementsByTagName('span');
self.prev = document.querySelector("#prev");
self.next = document.querySelector("#next");
self.index = 1;
self.prev.onclick = function () { // 点击按钮调用rotate方法切换到上一张
self.rotate('left');
}
self.next.onclick = function () { // 点击按钮调用rotate方法切换到下一张
self.rotate('right');
}
// 打开页面就循环轮播
}
Carousel.prototype = {
rotate: function (dir) { // 定义rotate方法
let self = this;
let newLeft; // 变化后的left值
let selfLeft = self.list.style.left; // 原left值
let sliderWidth = parseInt(self.setting.width); // 可见视口宽度，这里也是一张图片宽度
let len = self.sliderItems.length; // 图片总张数
let totalWidth = len * sliderWidth
// 点击左按钮，往前一张
if (dir === 'left') {
if (!selfLeft) {
newLeft = selfLeft + sliderWidth;
} else {
newLeft = parseInt(selfLeft) + sliderWidth
self.index--;
}
if (newLeft > 0) { // 如果是第一张图片往前切换，则切换到最后一张
newLeft = -totalWidth + sliderWidth;
self.index = len;
}
self.list.style.left = newLeft + 'px' // 改变left值
showButtons();
}
// 点击右按钮，往后一张, 则left值增加一个负sliderWidth
if (dir === 'right') {
if (!selfLeft) {
newLeft = selfLeft - sliderWidth
self.index++;
} else {
newLeft = parseInt(selfLeft) - sliderWidth
self.index++;
}
if (newLeft <= -totalWidth) {
newLeft = 0;
self.index = 1;
}
self.list.style.left = newLeft + 'px' // 改变left值
showButtons();
}
function showButtons() { // rotate方法里面又定义了showButtons方法
for (let i = 0; i < self.buttons.length; i++) {
if (self.buttons[i].className === 'on') {
self.buttons[i].className = ''; // 清除原圆点高亮状态
break;
}
}
self.buttons[self.index - 1].className = 'on';
}
}
}
window.Carousel = Carousel; // 暴露出去，供全局对象使用
})(window, document);
</script>
</head>
<body>
<div id="container">
<div id="list">
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
</div>
<div id="buttons">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
</div>
<a href="javascript:;" class="arrow" id="prev"></a>
<a href="javascript:;" class="arrow" id="next"></a>
<script>
// 初始化
var Carousel = new Carousel({
container:"#container",
// 图片的宽高
width:"324",
height:"324"
});
</script>
</div>
</body>
</html>第四种
第四种轮播图，功能也挺齐全，适合图片宽的，问题是下面滚动的小圆点没变色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第四种轮播图，功能也挺齐全，适合图片宽的，问题是下面滚动的小圆点没变色</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.box {
margin: 20px auto;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.box>* {
position: absolute;
}
.side-btns {
width: inherit;
height: 100px;
display: flex;
justify-content: space-between;
z-index: 2;
}
.side-btns>div {
width: 50px;
height: inherit;
text-align: center;
line-height: 100px;
font-size: 18px;
background-color: rgba(0, 0, 0, .3);
color: white;
cursor: pointer;
user-select: none;
}
.btns {
width: inherit;
height: 20px;
display: flex;
justify-content: center;
z-index: 2;
position: absolute;
bottom: 20px;
}
.btns>li {
width: 16px;
height: 16px;
border-radius: 50%;
margin-right: 12px;
cursor: pointer;
background-color: rgba(0, 0, 0, .4);
}
.btn>li .on {
background-color: white;
}
.wins {
width: 100%;
height: 100%;
display: flex;
}
.wins>li {
width: 100%;
height: 100%;
flex-grow: 0;
flex-shrink: 0;
}
.wins>li img {
width: 100%;
height: 100%;
}
</style>
<script>
(function(window, undefined) {
// 获取元素css属性值
function getCss(elem, attr) {
return elem.currentStyle ?
elem.currentStyle[attr] :
window.getComputedStyle(elem, null)[attr];
}
// 去除字符串中的非数字，不包括负号
function toInt(str) {
var rex = /[^0-9]/ig;
return Number((str[0] === '-' && str[1] !== '=') ? '-' + str.replace(rex, '') : str.replace(rex, ''));
}
// 封装动画函数，参数：dom对象、css属性值对象、动画执行时间、动画完成后回调
function animation(elem, params, speed, callback) {
for(var param in params) {
(function(param) {
var elemValue = toInt(getCss(elem, param)),
targetValue = toInt(params[param]),
currentDis = elemValue,
unit = params[param].substr(params[param].indexOf('[A-Za-z]+') - 1);
if(params[param].length > 2) {
var prefix = params[param].substr(0, 2);
if(prefix === '+=')
targetValue = elemValue + targetValue;
else if(prefix === '-=')
targetValue = elemValue - targetValue;
}
var dis = (targetValue - elemValue) / speed,
sizeFlag = targetValue < elemValue;
var timer = setInterval(function() {
elemValue = toInt(getCss(elem, param));
if(sizeFlag) {
if(currentDis <= targetValue) {
clearInterval(timer);
elem.style[param] = targetValue + unit;
} else {
currentDis += dis;
elem.style[param] = currentDis + unit;
}
} else {
if(currentDis >= targetValue) {
clearInterval(timer);
elem.style[param] = targetValue + unit;
} else {
currentDis += dis;
elem.style[param] = currentDis + unit;
}
}
}, 1);
})(param);
}
if(typeof callback === 'function') {
callback();
}
};
// 向右轮播数组移动
function rightRoundArrayMove() {
var winsLen = wins.length;
var lastWin = wins[winsLen - 1];
for(var i = winsLen - 1; i > 0; i--) {
wins[i] = wins[i - 1];
}
wins[0] = lastWin;
}
// 向左轮播
function rightRound(time) {
rightRoundArrayMove();
wins.forEach(function(win, index) {
(index === 0) ?
win.style.left = index * winWidth - winWidth + 'px':
animation(win, {
left: '+=' + winWidth + 'px'
}, time ? time : animationTime);
});
}
// 向右轮播
function leftRound(time) {
var winsLen = wins.length;
var firstWin = wins[0];
for(var i = 0; i < winsLen - 1; i++) {
wins[i] = wins[i + 1];
}
wins[winsLen - 1] = firstWin;
wins.forEach(function(win, index) {
(index === wins.length - 1) ?
win.style.left = index * winWidth - winWidth + 'px':
animation(win, {
left: '-=' + winWidth + 'px'
}, time ? time : animationTime);
});
}
var
// wins, btns, sbtns用于保存构造函数的参数
wins,
btns,
sbtns,
// 窗口的宽度
winWidth,
// 过渡动画时间(毫秒)，默认为100
animationTime = 100,
// 点击按钮轮播间隔
clickInterval = animationTime << 2,
// 保存自动轮播定时器、定时器间隔、是否向右轮播
autoRoundTimer,
qinterval,
qisRight,
// slide构造函数，参数：窗口数组，按钮数组，侧边按钮数组
slide = function(wins, btns, sbtns) {
return new slide.prototype.init(wins, btns, sbtns);
};
slide.prototype = {
// 初始化窗口元素
init: function(awins, abtns, asbtns) {
if(!awins) {
throw new Error('The window array cannot be empty.');
}
wins = Object.values(awins), btns = abtns, sbtns = asbtns;
// 处理窗口少于3个的情况
if(wins.length === 1) {
var winParent = wins[0].parentNode;
var winHTML = wins[0].outerHTML;
winParent.innerHTML += winHTML + winHTML;
wins = Object.values(winParent.children);
} else if(wins.length === 2) {
var winParent = wins[0].parentNode;
winParent.innerHTML += wins[0].outerHTML + wins[1].outerHTML;
wins = Object.values(winParent.children);
}
winWidth = wins[0].offsetWidth;
wins.forEach(function(win, index) {
win.style.position = 'absolute';
win.index = index;
});
rightRoundArrayMove();
wins.forEach(function(win, index) {
win.style.left = index * winWidth - winWidth + 'px';
});
},
// 设置过渡动画时间
setAnimationTime: function(time) {
animationTime = time;
clickInterval = animationTime << 2;
},
// 自动轮播，参数：轮播时间间隔、是否为向右轮播
autoRound: function(interval, isRight) {
autoRoundTimer = setInterval(function() {
isRight ? rightRound() : leftRound();
}, interval);
qinterval = interval;
qisRight = isRight;
},
// 侧边按钮点击，参数为侧边按钮元素数组，该参数可在构造函数中传递或现在传递
sideBtnClickRound: function(sabtns) {
var leftBtn = sabtns ? sabtns[0] : sbtns[0],
rightBtn = sabtns ? sabtns[1] : sbtns[1];
var isclick = true;
leftBtn.onclick = function() {
if(isclick) {
isclick = false;
rightRound();
setTimeout(function() {
isclick = true;
}, clickInterval);
}
};
rightBtn.onclick = function() {
if(isclick) {
isclick = false;
leftRound();
setTimeout(function() {
isclick = true;
}, clickInterval);
}
};
},
// 普通按钮点击，参数：普通按钮数组、回调
btnsClickRound: function(abtns, callback) {
var ibtns = abtns ? abtns : btns;
var isclick = true;
ibtns.forEach(function(btn, index) {
btn.onclick = function() {
if(isclick) {
isclick = false;
if(typeof callback === 'function') {
callback(ibtns, btn, index);
}
var poor = index - wins[1].index;
var count = Math.abs(poor);
if(poor < 0) {
var absPoor = count;
var timer = setInterval(function() {
// console.log((absPoor + 1))
rightRound(animationTime / (absPoor + 2));
if((--count) === 0)
clearInterval(timer);
}, animationTime);
} else if(poor > 0) {
var timer = setInterval(function() {
leftRound(animationTime / (poor + 2));
if((--count) === 0)
clearInterval(timer);
}, animationTime);
}
setTimeout(function() {
isclick = true;
}, clickInterval << 1);
}
}
});
},
// 设置鼠标移入取消自动轮播，参数：移入的元素、移入元素回调、移出元素回调
setOverStop: function(box, overCallback, outCallback) {
box.onmouseover = function(e) {
clearInterval(autoRoundTimer);
if(typeof overCallback === 'function') {
overCallback(e);
}
}
box.onmouseout = function(e) {
slide.prototype.autoRound(qinterval, qisRight);
if(typeof outCallback === 'function') {
outCallback(e);
}
}
}
}
slide.prototype.init.prototype = slide.prototype;
window.slide = _slide = slide;
})(window);
</script>
<script>
window.onload = function() {
var wins = document.querySelectorAll('.wins > li');
var btns = document.querySelectorAll('.btns > li');
var sideBtns = document.querySelectorAll('.side-btns > div');
var box = document.querySelector('.box');
var s = slide(wins, btns, sideBtns); // 创建轮播对象，参数：窗口dom数组、下方按钮dom数组（可选）、
s.autoRound(2000); // 设置自动轮播
s.setAnimationTime(200); // 设置过渡动画时间
s.setOverStop(box); // 设置鼠标移入元素时自动轮播停止，参数：移入的dom元素、移入元素回调、移出元素回调
s.sideBtnClickRound(); // 设置点击侧边按钮时轮播，参数：按钮dom数组（可选）
s.btnsClickRound(); // 设置下方按钮点击时轮播，参数：按钮dom数组（可选）、回调
}
</script>
</head>
<body>
<div class="box" style="width: 324px; height: 324px;">
<div class="side-btns">
<div class="left-btn"><</div>
<div class="right-btn">></div>
</div>
<ul class="btns">
<li class="on"></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="wins">
<!-- <li><img src="img/1.png" /></li>
<li><img src="img/2.png" /></li>
<li><img src="img/3.png" /></li>
<li><img src="img/4.png" /></li> -->
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
</ul>
</div>
</body>
</html>第五种
第五种轮播图，功能也基本齐全，问题是图片多宽就得多款，否则容易出问题，要改匿名函数里面的循环值，在body里面改宽高和路径
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第五种轮播图，功能也基本齐全，问题是图片多宽就得多款，否则容易出问题，要改匿名函数里面的循环值，在body里面改宽高和路径</title>
<script src="js/jquery-2.1.0.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
.container {
margin: 100px auto;
position: relative;
overflow: hidden;
}
.slide {
float: left;
}
img {
display: block;
}
.pagination {
width: 160px;
position: absolute;
bottom: 30px;
margin-left: -80px;
left: 50%;
}
.pagination li {
float: left;
width: 20px;
height: 20px;
background-color: rgb(0, 0, 0, .2);
margin: 0 10px;
border-radius: 50%;
}
.button-pre,
.button-next {
width: 22px;
height: 40px;
position: absolute;
top: 50%;
margin-top: -20px;
}
.button-pre {
left: 10px;
width: 30px;
height: 30px;
background-color: rgb(0, 0, 0, .2);
border-radius: 50%;
/* background: url('../image/left.png') no-repeat center center; */
}
.button-next {
right: 10px;
width: 30px;
height: 30px;
background-color: rgb(0, 0, 0, .2);
border-radius: 50%;
/* background: url('../image/right.png') no-repeat center center; */
}
.button-pre:hover, .button-next:hover{
background-color: rgb(0, 0, 0, .5);
}
.pagination .active {
background-color: white;
}
</style>
<script>
; (function ($) {
// 默认设置
var defaults = {
speed: 1000,
interval: 2000,
width: '324',
height: '324'
}
function Banner(ele, options) {
// 获得container元素， 设置container的宽高，才能看到，否则一篇空白
this.container = document.querySelector('.mycontainer');
this.container.style.width = options.width + 'px';
this.container.style.height = options.height + 'px';
// 获取元素对象
this.element = $(ele);
// 合并设置项
this.options = $.extend({}, defaults, options);
// 获取包裹图片的父元素
this.wrapper = this.element.children().first();
// 获取要克隆的元素
this.firstChild = this.wrapper.find('.slide:first');
// 获取一张图片宽度
this.Width = this.firstChild.width();
// 记录图片下标
this.n = 0;
// 获取图片个数
this.len = this.wrapper.find('.slide').length;
// 获取切换导航按钮
this.prev = this.element.find('.button-pre');
this.next = this.element.find('.button-next');
// 获取分页器
this.pagination = this.element.find('.pagination');
// 计时器
this.timer = null;
}
// 初始化
Banner.prototype.init = function () {
var self = this;
(function () {
// 克隆第一张图片并添加到元素的最后边，设置包裹图片父盒子的宽度
self.wrapper.append(self.firstChild.clone(true));
self.wrapper.css({ width: self.Width * (self.len + 1) });
// 生成对应的分页器按钮
for (var i = 0; i < self.len; i++) {
$('<li></li>').appendTo(self.pagination);
}
// 动态设置分页器的样式
self.pagination.find('li:first').addClass('active');
var btnWidth = self.pagination.find('li:first').outerWidth(true) * self.len;
self.pagination.css({ width: btnWidth, marginLeft: -btnWidth / 2 })
})()
// 调用所有绑定的事件
this.nextClick();
this.preClick();
this.btnClick();
this.autoPlay();
this.clearPlay(this.element);
}
// 切换下一张图片事件
Banner.prototype.nextClick = function () {
var self = this;
this.next.click(function () {
self.moveNext();
})
}
// 切换图片，同时也为实现自动播放
Banner.prototype.moveNext = function () {
this.n++;
// 判断重置时机和重置样式
if (this.n > this.len) {
this.n = 1;
this.wrapper.css({ marginLeft: 0 });
}
this.changeBtn(this.n > 3 ? 0 : this.n);
this.wrapper.stop(true, true).animate({ marginLeft: -this.Width * this.n }, this.options.speed)
}
// 点击切换上一张图片
Banner.prototype.preClick = function () {
var self = this;
this.prev.click(function () {
self.n--;
if (self.n < 0) {
self.n = self.len - 1;
self.wrapper.css({ marginLeft: -(self.len) * self.Width });
}
self.changeBtn(self.n < 0 ? self.n = 3 : self.n);
self.wrapper.animate({ marginLeft: -self.Width * self.n }, self.options.speed)
})
}
// 点击分页器切换图片
Banner.prototype.btnClick = function () {
var self = this;
this.pagination.find('li').click(function () {
var index = $(this).index();
self.n = index;
self.changeBtn(index);
self.wrapper.animate({ marginLeft: -self.Width * index }, self.options.speed)
})
}
// 动态修改分页器按钮的样式
Banner.prototype.changeBtn = function (index) {
this.pagination.find('li').eq(index).addClass('active').siblings().removeClass('active');
}
// 自动轮播
Banner.prototype.autoPlay = function () {
var self = this;
/* 计时器中调用函数是，函数中的this 指向 window， 所以需要使用self.timer = setInterval(function(){
self.moveNext();
},2000);
不能直接使用 self.timer = setInterval(self.moveNext(),2000); 形式 */
self.timer = setInterval(function () {
self.moveNext();
}, self.options.interval);
}
// 清除自动播放
Banner.prototype.clearPlay = function (ele) {
var self = this;
ele.mouseenter(function () {
clearInterval(self.timer)
}).mouseleave(function () {
// 再次开启自动轮播
self.timer = setInterval(function () {
self.moveNext();
}, self.options.interval);
})
}
// jQuery插件实现
$.fn.myBanner = function (params) {
// params 是自定义的配置项
var banner = new Banner(this, params);
banner.init();
// 如果需要链式调用
return this;
}
})(jQuery)
</script>
</head>
<body>
<div class="container mycontainer">
<div class="wrapper">
<div class="slide">
<img src="img/1.jpg" alt="">
</div>
<div class="slide">
<img src="img/2.jpg" alt="">
</div>
<div class="slide">
<img src="img/3.jpg" alt="">
</div>
<div class="slide">
<img src="img/4.jpg" alt="">
</div>
</div>
<!-- 分页器 -->
<ul class="pagination"></ul>
<!-- 导航按钮 -->
<div class="button-pre"></div>
<div class="button-next"></div>
</div>
<script>
$(function () {
$('.mycontainer').myBanner({
// speed:图片切换速度 interval：图片切换的时间间隔 width：图片宽 height：图片高
speed: 500,
interval: 3000,
width: '324',
height: '324'
});
})
</script>
</body>
</html>备注：暂时是整理出来这几种，可以根据自己需要的情况使用，都是简单操作，没有太多比较好看的样式，写法略有不同....如有发现，会放在后面，希望对你们有所帮助
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
