轮播图架构
Posted chuangzi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了轮播图架构相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slider</title>
<style type="text/css">
body, p, img, dl, dt, dd, ul, ol, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; }
body { position: relative; font: 12px/1.5 Simsun, Arial; color: #666; text-align: left; background: #000; }
ul, ol { list-style: none; }
img { border: 0 none; }
input, select { vertical-align: middle; }
table { border-collapse: collapse; }
s, em, i { font-style: normal; text-decoration: none; }
a { outline: none; text-decoration: none; }
a:hover { text-decoration: underline; }
.clear { *zoom: 1; }
.clear:after { clear: both; content: "."; display: block; height: 0; overflow: hidden; visibility: hidden; zoom: 1; }
.slideBox {
position: relative;
width: 600px;
height: 300px;
overflow: hidden;
}
.slideBox ul.items {
position: absolute;
width: 8000px;
height: 300px;
}
.slideBox ul.items li {
float: left;
/*position: absolute;*/
width: 600px;
height: 300px;
/*display: none;*/
}
.arrows .arrow-left {
background: url(images/sprite-arrow-prev.png) no-repeat;
width: 22px;
height: 32px;
position: absolute;
left: 10px;
top: 110px;
}
.arrows .arrow-right {
background: url(images/sprite-arrow-next.png) no-repeat;
width: 22px;
height: 32px;
position: absolute;
right: 10px;
top: 110px;
}
</style>
</head>
<body>
<div id="slide" class="slideBox">
<ul class="items J-items">
<li>
<a href="#" target="_blank">
<img src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201304/jiaoben828/img/1.jpg">
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201304/jiaoben828/img/2.jpg">
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201304/jiaoben828/img/3.jpg">
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201304/jiaoben828/img/4.jpg">
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201304/jiaoben828/img/5.jpg">
</a>
</li>
</ul>
<div class="arrows">
<a class="arrow-left J-arrow-left" href="javascript:;" target="_self"></a>
<a class="arrow-right J-arrow-right" href="javascript:;" target="_self"></a>
</div>
</div>
<br/>
<div id="slide2" class="slideBox">
<ul class="items J-items">
<li>
<a href="#" target="_blank">
<img src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201304/jiaoben828/img/1.jpg">
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201304/jiaoben828/img/2.jpg">
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201304/jiaoben828/img/3.jpg">
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201304/jiaoben828/img/4.jpg">
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201304/jiaoben828/img/5.jpg">
</a>
</li>
</ul>
<div class="arrows">
<a class="arrow-left J-arrow-left" href="javascript:;" target="_self"></a>
<a class="arrow-right J-arrow-right" href="javascript:;" target="_self"></a>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function () {
function Slide(opts) { //创建类 构造函数 opts选项options
this.init(opts);
}
Slide.prototype = {
$slide: null,
$arrowLeft: null,
$arrowRight: null,
$items: null,
$li: null,
index: 0, //当前图片下标
timeOutId: 0, //定时器ID
speed: 0, //切换动画的速度
delay: 0, //切换动画的延迟
autoPlay: true,
init: function (opts) { //初始化函数
var _this = this; //this 指向当前的对象slide
_this.$slide = opts.$target;
_this.$arrowLeft = _this.$slide.find(‘.J-arrow-left‘);
_this.$arrowRight = _this.$slide.find(‘.J-arrow-right‘);
_this.$items = _this.$slide.find(‘.J-items‘);
_this.$li = _this.$items.find(‘li‘);
_this.index = 0;
_this.speed = opts.speed;
_this.delay = opts.delay;
_this.autoPlay = opts.autoPlay;
_this.addEvents();
_this.autoMove();
},
addEvents: function () {
var _this = this;
_this.$arrowLeft.click(function () { //左箭头侦听事件
_this.move(‘left‘);
});
_this.$arrowRight.click(function () { //右箭头侦听事件
_this.move(‘right‘);
});
},
move: function (direction) { //direction 方向left right
var _this = this;
if (direction == ‘left‘) {
_this.index--;
} else {
_this.index++;
}
if (_this.index < 0) {
_this.index = _this.$li.length - 1;
}
if (_this.index > _this.$li.length - 1) {
_this.index = 0;
}
clearTimeout(_this.timeOutId); //清空setTimeOut函数
_this.$items.animate({
marginLeft: _this.$li.width() * -_this.index
}, _this.speed, function () {
_this.autoMove();
});
},
autoMove: function () {
var _this = this;
if (_this.autoPlay){
_this.timeOutId = setTimeout(function () {
_this.move(‘right‘)
}, _this.delay)
}
}
};
var slide = new Slide({
$target: $(‘#slide‘),
speed: 1000,
delay: 2000,
autoPlay: false
});
var slide2 = new Slide({
$target: $(‘#slide2‘),
speed: 3000,
delay: 4000,
autoPlay: true
});
})
</script>
</body>
</html>
以上是关于轮播图架构的主要内容，如果未能解决你的问题，请参考以下文章