轮播图的小圆点不流畅，点击不能跳着点，点击后没显示相对应，圆点的点击不流畅
<!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_董吧_02回答
-
qq_杀意隆_0
这些代码是你自己写的吗?如果不是先把基础学好吧 -
黄小凡
看到这种问题又无可奈何，抱歉，我相信再牛的大神也不会回答这种无聊的问题，动不动贴一大串代码出来，问问题不问重点，真的很无语
随时随地看视频慕课网APP
相关分类
JQuery