您的位置：首页 > Web前端 > JQuery

轮播效果可套用图片文本 jquery

2014-12-03 10:05 162 查看

<style type="text/css">
body,ul,li { padding:0; margin:0}
ul,li { list-style:none}
.bg{
padding:30px;
background-color:rgba(244,92,147,0.4);
}
.scroll_main {
position:relative;
margin:0 auto;
width:960px;
}
.scroll_main .prev,.scroll_main .next {
cursor: pointer;
margin-top: -50px;
position: absolute;
top: 50%;
width:50px;
height:100px;
z-index: 1000;
font-size:40px;
font-weight:bold;
color:#F45C93;
text-align:center;
line-height:100px;
}
.scroll_main .prev {
left:-80px;
}
.scroll_main .next {
right:-80px;
}
.scroll_list {
position:relative;
width:960px;
overflow:hidden;
}
.scroll_list ul {
width:9999px;
}
.scroll_list ul li {
float:left;
margin-left:20px;

}
.scroll_list li:first-child {
margin-left:0;
}
.model{
width:176px;
height:176px;
margin-top:20px;
background-color:rgb(244,92,147);
}
</style>
</head>
<body>
<div class="bg">
<div class="scroll_main">
<div class="prev"> < </div>
<div class="next"> > </div>
<div class="scroll_list">
<ul>
<li><div class="model"></div><div class="model"></div></li>
<li><div class="model"></div><div class="model"></div></li>
<li><div class="model"></div><div class="model"></div></li>
<li><div class="model"></div><div class="model"></div></li>
<li><div class="model"></div><div class="model"></div></li>
<li><div class="model"></div><div class="model"></div></li>
</ul>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="http://img3.cache.netease.com/utf8/assets/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
function pic_scroll(prev,next,img)
{
var prev = $(prev),
next = $(next),
img = $(img).find('ul');
var w = img.find('li').outerWidth(true);
var locked;     //设置锁标志，防止快速点击多次时，轮播等候队列过长。一张图片轮播未结束时点击切换键不进行轮播。

next.click(function(){
if(!locked) {
locked = true;
img.animate({'margin-left':-w},400,function(){
img.find('li').eq(0).appendTo(img);
img.css({'margin-left':0});
locked = false;
});
}
});
prev.click(function(){
if(!locked) {
locked = true;
img.find('li:last').prependTo(img);
img.css({'margin-left':-w});
img.animate({'margin-left':0},400,function(){
locked = false;
});
}
});
}
pic_scroll('.prev','.next','.scroll_list');
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

轮播 效果 可套用图片 文本 jquery

轮播效果可套用图片文本 jquery