首页 > 代码库 > jQuery无缝滚动轮播图
jQuery无缝滚动轮播图
//html部分
<div class="lunbo right">
<div class="show">
<a href=http://www.mamicode.com/"#"><img src=http://www.mamicode.com/"images/cbda425ea72ec5013b8388ae982e9a52.jpg" alt=""/></a>
<a href=http://www.mamicode.com/"#"><img src=http://www.mamicode.com/"images/5fe7763e7458e23e6ebeaa682e25a472.jpg" alt=""/></a>
<a href=http://www.mamicode.com/"#"><img src=http://www.mamicode.com/"images/9e5d942d12063976efcfff0c6c0d1f52.jpg" alt=""/></a>
<a href=http://www.mamicode.com/"#"><img src=http://www.mamicode.com/"images/45a94c6843a097d5984cabbf2489e41f.jpg" alt=""/></a>
<a href=http://www.mamicode.com/"#"><img src=http://www.mamicode.com/"images/748072bc51445e5c2c1f0a2184e95142.jpg" alt=""/></a>
<a href=http://www.mamicode.com/"#"><img src=http://www.mamicode.com/"images/230289326a4063dee5e4b7d0cb5c4c81.jpg" alt=""/></a>
<a href=http://www.mamicode.com/"#"><img src=http://www.mamicode.com/"images/f2c22e6ec669000ba5765971005b53aa.jpg" alt=""/></a>
<a href=http://www.mamicode.com/"#"><img src=http://www.mamicode.com/"images/d139797b6e1ecd8185f0f7ca771cf9be.jpg" alt=""/></a>
</div>
<div class="point">
<span>1</span><span>2</span><span>3</span><span>4</span>
<span>5</span><span>6</span><span>7</span><span>8</span>
</div>
<div class="btn btn_l"><</div>
<div class="btn btn_r">></div>
</div>
//css部分
.banner{width: 100%;height: 480px;}
.banner1{width: 1200px;height: 100%;margin: 0 auto;}
.lunbo{width: 1000px;height: 100%;position: relative;overflow: hidden;}
.show{width: 10000px;height: 100%;position: absolute;top: 0;left: 0;}
.show a{float: left;}
.point{position: absolute;left: 400px;bottom: 10px;}
.point span{float: left;width: 25px;height: 25px;margin:0 5px;cursor: pointer; border-radius: 100%;color: #fff;text-align: center;line-height: 25px; background: #555;opacity: 0.8;filter: alpha(opacity=80);}
.point .on{background-color: #ff6a00;}
.btn {width: 40px;height: 70px;background-color: #808080;opacity: 0.7; filter:alpha(opacity=70); position:absolute;top:50%;margin-top:-35px;cursor:pointer;text-align:center;line-height:70px;font-size:60px;color:#fff;font-family:simsun;display:none;
}
.btn_l { left:0;}
.btn_r { right:260px;}
.lunbo:hover .btn {display:block;}
//js部分
function lunbo(oshow,olunbo,opoint,obtl,obtr,oleft) {
var i = 0;
var clone = $("a",oshow).first() .clone();//克隆第一张图片
$(oshow).append(clone);//复制到列表最后
var size = $("a",oshow).size();
$("span",opoint).first().addClass("on");
/*自动轮播*/
var t = setInterval(function () { i++; move();},3000);
/*鼠标悬停事件*/
$(olunbo).hover(function () {
clearInterval(t);//鼠标悬停时清除定时器
}, function () {
t = setInterval(function () { i++; move(); }, 3000); //鼠标移出时清除定时器
});
/*鼠标滑入圆点事件*/
$("span",opoint).hover(function () {
var index = $(this).index();//获取当前索引值
i = index;
$(oshow).stop().animate({ left: -index * oleft }, 500);
$(this).addClass("on").siblings().removeClass("on");
});
/*左右按钮*/
$(obtl).click(function () {i++;move();});
$(obtr).click(function () {i--;move();});
/*滚动事件*/
function move() {
if (i == size) {
$(oshow).css({ left: 0 });
i = 1;
}
if (i == -1) {
$(oshow).css({ left: -(size - 1) * oleft });
i = size - 2;
}
$(oshow).stop().animate({ left: -i * oleft }, 500);
if (i == size - 1) {
$("span",opoint).eq(0).addClass("on").siblings().removeClass("on");
} else {
$("span",opoint).eq(i).addClass("on").siblings().removeClass("on");
}
}
}
lunbo(".show",".lunbo",".point",".btn_l",".btn_r",1000);
jQuery无缝滚动轮播图
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。