<!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>
时间： 2024-07-29 09:28:29