<!DOCTYPE html><html><head><meta charset="utf-8" /><title>jQuery无缝轮播插件 - 站长素材</title><link rel="stylesheet" href="css/ft-carousel.css" /><style>body{margin: 0;font-family: "微软雅黑";}.example {width: 100%;height:356px;margin-top: 20px;background-color: #F6F6F6;}.carousel-item{color: black;}ul,ol,li,div { margin: 0; padding: 0;}ul,ol { list-style: none;}.ft-carousel { position: relative; width: 100%; height: 407px; }.ft-carousel .carousel-inner { position: absolute; left: 0; height: 100%;}.ft-carousel .carousel-inner .carousel-item { float: left; height: 100%; /*width: 1200px;*/}.list_li { position: relative; width: 1200px; height: 356px; /*border: 1px solid;*/ margin: 0 auto 0;}.list_z { position: absolute; top: 30px; display: inline-block;}.list_z li { font-size: 20px; line-height: 40px;}.list_img1 { position: absolute; left: 555px;}.list_m { position: absolute; left: 616px; /*border: 1px solid;*/ display: inline-block;}.list_p { font-size: 50px; color: black;}.list_p span { display: inline-block; width: 55px; height: 98px; border-bottom: 4px solid blue;}.list_p1 { font-size: 16px;}.list_img2 { position: absolute; right: 0; top: 10px;}.ft-carousel .carousel-indicators { position: absolute; left: 0; bottom: 10px; width: 100%; text-align: center; font-size: 0;}.ft-carousel .carousel-indicators span { display: inline-block; width: 10px; height: 10px; margin: 0 5px; background-image: url(../images/hy.png); *display: inline; *zoom: 1;}.ft-carousel .carousel-indicators span.active { width: 30px; background-image: url(../images/lcy.png);}.ft-carousel .carousel-btn { position: absolute; top: 100%; width: 50px; height: 45px; margin-top: -25px; cursor: pointer;}.ft-carousel .carousel-prev-btn { left: 44%; background: url(../images/ljz.png) no-repeat;}.ft-carousel .carousel-next-btn { right: 42%; background: url(../images/ljy.png) no-repeat;}</style></head><body><div class="example"> <div class="ft-carousel" id="carousel_2"> <ul class="carousel-inner"> <li class="carousel-item"> <div class=" list_li"> <ul class="list_z"> <li><img src="images/zy.png"/> 1、 靠垄断来做企业的未来将没有生命力</li> <li><img src="images/zy.png"/> 2、 速度为王成为现代企业生存发展的关键因素</li> <li><img src="images/zy.png"/> 3、 企业跟上科技发展才能拥有未来</li> <li><img src="images/zy.png"/> 4、 创造价值是企业的核心使命</li> </ul> <img src="images/gao.png" class="list_img1"/> <div class="list_m"> <p class="list_p"><span>代</span>用名</p> <p class="list_p1">不知名的有限公司董事长</p> </div> <img src="images/gao2.png" class="list_img2"/> </div> </li> <li class="carousel-item"><div class=" list_li"> <ul class="list_z"> <li><img src="images/zy.png"/> 1、 靠垄断来做企业的未来将没有生命力</li> <li><img src="images/zy.png"/> 2、 速度为王成为现代企业生存发展的关键因素</li> <li><img src="images/zy.png"/> 3、 企业跟上科技发展才能拥有未来</li> <li><img src="images/zy.png"/> 4、 创造价值是企业的核心使命</li> </ul> <img src="images/gao.png" class="list_img1"/> <div class="list_m"> <p class="list_p"><span>代</span>用名</p> <p class="list_p1">不知名的有限公司董事长</p> </div> <img src="images/gao2.png" class="list_img2"/> </div></li> <li class="carousel-item"><div class=" list_li"> <ul class="list_z"> <li><img src="images/zy.png"/> 1、 靠垄断来做企业的未来将没有生命力</li> <li><img src="images/zy.png"/> 2、 速度为王成为现代企业生存发展的关键因素</li> <li><img src="images/zy.png"/> 3、 企业跟上科技发展才能拥有未来</li> <li><img src="images/zy.png"/> 4、 创造价值是企业的核心使命</li> </ul> <img src="images/gao.png" class="list_img1"/> <div class="list_m"> <p class="list_p"><span>代</span>用名</p> <p class="list_p1">不知名的有限公司董事长</p> </div> <img src="images/gao2.png" class="list_img2"/> </div></li> <li class="carousel-item"><div class=" list_li"> <ul class="list_z"> <li><img src="images/zy.png"/> 1、 靠垄断来做企业的未来将没有生命力</li> <li><img src="images/zy.png"/> 2、 速度为王成为现代企业生存发展的关键因素</li> <li><img src="images/zy.png"/> 3、 企业跟上科技发展才能拥有未来</li> <li><img src="images/zy.png"/> 4、 创造价值是企业的核心使命</li> </ul> <img src="images/gao.png" class="list_img1"/> <div class="list_m"> <p class="list_p"><span>代</span>用名</p> <p class="list_p1">不知名的有限公司董事长</p> </div> <img src="images/gao2.png" class="list_img2"/> </div></li> <li class="carousel-item"><div class=" list_li"> <ul class="list_z"> <li><img src="images/zy.png"/> 1、 靠垄断来做企业的未来将没有生命力</li> <li><img src="images/zy.png"/> 2、 速度为王成为现代企业生存发展的关键因素</li> <li><img src="images/zy.png"/> 3、 企业跟上科技发展才能拥有未来</li> <li><img src="images/zy.png"/> 4、 创造价值是企业的核心使命</li> </ul> <img src="images/gao.png" class="list_img1"/> <div class="list_m"> <p class="list_p"><span>代</span>用名</p> <p class="list_p1">不知名的有限公司董事长</p> </div> <img src="images/gao2.png" class="list_img2"/> </div></li> <li class="carousel-item"><div class=" list_li"> <ul class="list_z"> <li><img src="images/zy.png"/> 1、 靠垄断来做企业的未来将没有生命力</li> <li><img src="images/zy.png"/> 2、 速度为王成为现代企业生存发展的关键因素</li> <li><img src="images/zy.png"/> 3、 企业跟上科技发展才能拥有未来</li> <li><img src="images/zy.png"/> 4、 创造价值是企业的核心使命</li> </ul> <img src="images/gao.png" class="list_img1"/> <div class="list_m"> <p class="list_p"><span>代</span>用名</p> <p class="list_p1">不知名的有限公司董事长</p> </div> <img src="images/gao2.png" class="list_img2"/> </div></li> <li class="carousel-item"><div class=" list_li"> <ul class="list_z"> <li><img src="images/zy.png"/> 1、 靠垄断来做企业的未来将没有生命力</li> <li><img src="images/zy.png"/> 2、 速度为王成为现代企业生存发展的关键因素</li> <li><img src="images/zy.png"/> 3、 企业跟上科技发展才能拥有未来</li> <li><img src="images/zy.png"/> 4、 创造价值是企业的核心使命</li> </ul> <img src="images/gao.png" class="list_img1"/> <div class="list_m"> <p class="list_p"><span>代</span>用名</p> <p class="list_p1">不知名的有限公司董事长</p> </div> <img src="images/gao2.png" class="list_img2"/> </div></li> </ul> </div><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><!--<script src="js/jquery.min.js"></script>--><!--<script src="js/ft-carousel.min.js"></script>--><script type="text/javascript"> ! function(t) { function i(t, i) { this.init(t, i) } i.prototype = { init: function(i, n) { this.ele = i, this.opts = t.extend({}, { index: 0, auto: !0, time: 4e3, indicators: !0, buttons: !0 }, n), this.index = this.opts.index, this.render(), this.eventBind(), this.opts.auto && this.loop() }, render: function() { this.renCas(), this.opts.indicators && this.renIns(), this.opts.buttons && this.renBtns() }, renCas: function() { var t = this.ele.find(".carousel-inner"), i = t.find(".carousel-item"), n = i.length, e = i.eq(n - 1).clone(), s = i.eq(0).clone(), o = this.ele.width(); this.index = this.index < 0 || this.index > n - 1 ? 0 : this.index, t.width((n + 2) * o).prepend(e).append(s).css("left", (this.index + 1) * -o), t.find(".carousel-item").width(o) }, renIns: function() { for(var t = this.ele.find(".carousel-item").length - 2, i = '<div class="carousel-indicators">', n = 0; n < t; n++) i += '<span data-index="' + n + '"></span>'; i += "</div>", this.ele.append(i).find(".carousel-indicators span").eq(this.index).addClass("active") }, renBtns: function() { this.ele.append('<span class="carousel-btn carousel-prev-btn"></span><span class="carousel-btn carousel-next-btn"></span>') }, animate: function(t) { var i = this, n = this.ele.find(".carousel-inner"), e = this.ele.width(), s = n.find(".carousel-item").length; this.opts.indicators; n.stop(!0, !0).animate({ left: n.position().left + t }, function() { var o = n.position().left; t < 0 && o < -e * (s - 2) && n.css("left", -e), t > 0 && o > -e && n.css("left", -e * (s - 2)), i.index = n.position().left / -e - 1, i.opts.buttons && i.showBtn() }) }, showBtn: function() { this.ele.find(".carousel-indicators span").removeClass("active").eq(this.index).addClass("active") }, loop: function() { var t = this.ele.find(".carousel-next-btn"); this.timer = setInterval(function() { t.trigger("click") }, this.opts.time) }, eventBind: function() { var i = this, n = this.ele.find(".carousel-prev-btn"), e = this.ele.find(".carousel-next-btn"), s = this.ele.find(".carousel-indicators"), o = this.ele.width(), a = (this.ele.find(".carousel-item").length, this.opts.auto); e.on("click", function() { i.animate(-o) }), n.on("click", function() { i.animate(o) }), s.on("click", "span", function() { i.animate((t(this).data("index") - i.index) * -o) }), a && this.ele.hover(function() { clearInterval(i.timer) }, function() { i.loop() }) } }, t.fn.FtCarousel = function(n) { return this.each(function() { new i(t(this), n) }) } $("#carousel_2").FtCarousel({ index: 1, auto: false });}(jQuery);</script></body></html>
- 2 回答
- 0 关注
- 2042 浏览
添加回答
举报
0/150
提交
取消