猿问

轮播图的小圆点不流畅，点击不能跳着点，点击后没显示相对应，圆点的点击不流畅

<!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>


qq_董吧_0
浏览 2087回答 2
2回答

qq_杀意隆_0

这些代码是你自己写的吗?如果不是先把基础学好吧
0

黄小凡

看到这种问题又无可奈何，抱歉，我相信再牛的大神也不会回答这种无聊的问题，动不动贴一大串代码出来，问问题不问重点，真的很无语
0
随时随地看视频慕课网APP

相关分类

JQuery
我要回答