- //代码片段(复制即可使用):
- <style>
- .slidePanel{
- }
- .sildeContainer{
- display:block;
- width:300px;
- height:300px;
- overflow: hidden;
- }
- .sildeContainer ul{
- list-style-type: none;
- margin: 0px;
- padding: 0px;
- width: 5000px;
- }
- .sildeContainer ul li{
- float: left;
- width:300px;
- height:300px;
- }
- .sildeContainer ul li img{
- width: 300px;
- height:300px;
- }
- </style>
- <div id="slidePanel" class="slidePanel">
- <div class="sildeContainer">
- <ul class="slideList">
- <li><img src1="images/1364791236f951.jpg"/></li>
- <li><img src1="images/136479026399c7.jpg"/></li>
- <li><img src1="images/13647951670de4.jpg"/></li>
- <li><img src1="images/136479616600ee.jpg"/></li>
- <li><img src1="images/1364795402308b.jpg"/></li>
- <li><img src1="images/1364791236f951.jpg"/></li>
- <li><img src1="images/13647982102730.jpg"/></li>
- <li><img src1="images/1364791236f951.jpg"/></li>
- </ul>
- </div>
- <div class="sildeNav"><a href="javascript:;" class="J_slidePre">上一个</a><a href="javascript:;" class="J_sildeNext">下一个</a></div>
- </div>
- <script>
- window.slide = (function () {
- function _scrollPanel(obj) {
- this.cur_index = 0;
- this.offset = 300;
- this.itemnum = 0;
- this.target = null;
- this.target = obj.target;
- this._init();
- }
- _scrollPanel.prototype._init = function () {
- var _this = this;
- this.itemnum = $(".slideList li", _this.target).length;
- $(".J_slidePre", _this.target).click(function () {
- _this.cur_index = _this.cur_index > 0 ? (_this.cur_index - 1) : (_this.itemnum - 1);
- $(".slideList", _this.target).animate({
- marginLeft: -1 * _this.cur_index * _this.offset
- }, "normal");
- });
- $(".J_sildeNext", _this.target).click(function () {
- _this.cur_index = _this.cur_index < (_this.itemnum - 1) ? (_this.cur_index + 1) : 0;
- $(".slideList", _this.target).animate({
- marginLeft: -1 * (_this.cur_index) * _this.offset
- }, "normal");
- });
- }
- return {
- scrollPanel: _scrollPanel
- }
- })();
- new window.slide.scrollPanel({ target: $("#slidePanel") });
- </script>
- //该片段来自于http://www.codesnippet.cn/detail/191120137289.html
来源: http://www.codesnippet.cn/detail/191120137289.html