码迷,mamicode.com
首页 > 其他好文 > 详细

【技术】轮播

时间:2015-01-15 12:47:00      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:

技术分享

<div class="slide" id="slide">
<b class="slide_prev slide_prev1 prev" ><img src="images/slide_l_button.jpg" title="上一页" /></b>
<b class="slide_next slide_next1 next" ><img src="images/slide_r_button.jpg" title="下一页"/></b>
<div class="slide_main" id="slide_main">
<div class="products">
<span>
<a href="http://v.wudao.com/20140115/79153.html" class="slide_main_a1" target="_blank"><img src="images/more_dance1.jpg" /><div class="play_icon2"></div></a>
</span>
<span>
<a href="http://v.wudao.com/20140304/79689.html" class="slide_main_a1" target="_blank"><img src="images/more_dance2.jpg" /><div class="play_icon2"></div></a>
</span>
<span>
<a href="http://v.wudao.com/20140516/81751.html" class="slide_main_a1" target="_blank"><img src="images/more_dance3.jpg" /><div class="play_icon2"></div></a>
</span>
<span>
<a href="http://v.wudao.com/20141028/101503.html" class="slide_main_a1" target="_blank"><img src="images/more_dance4.jpg" /><div class="play_icon2"></div></a>
</span>
</div>
<div class="products">
<span>
<a href="http://news.wudao.com/20141016/100987.html" class="slide_main_a1" target="_blank"><img src="images/more_dance5.jpg" /><div class="play_icon2"></div></a>
</span>
<span>
<a href="http://news.wudao.com/20141021/101157.html" class="slide_main_a1" target="_blank"><img src="images/more_dance6.jpg" /><div class="play_icon2"></div></a>
</span>
<span>
<a href="http://v.wudao.com/20141203/102916.html" class="slide_main_a1" target="_blank"><img src="images/more_dance7.jpg" /><div class="play_icon2"></div></a>
</span>
<span>
<a href="http://v.wudao.com/20150113/103622.html" class="slide_main_a1" target="_blank"><img src="images/good_boy.jpg" /><div class="play_icon2"></div></a>
</span>
</div>
</div>
</div>

 

.slide{width:1000px;height:auto;margin:0 auto;overflow:hidden;position:relative;}
.slide_main{height:189px;width:10000px;overflow:hidden;position:relative;z-index:1;}
.slide_main div{width:1000px;height:189px;float:left;}
.slide_main div span{width:246px;padding:0 2px;height:189px;display:block;float:left;}
.slide_main div span a{display:block;}
.slide_main_a1{padding-left:4px;}
.slide_main_a1 , .slide_main_a1 img{width:236px;height:189px;}
.slide .slide_prev1 ,.slide .slide_next1{display:block;width:50px;height:189px;position:absolute;cursor:pointer;z-index:2;top:0;opacity:0.7;.filter:alpha(opacity=70)}
.slide .slide_prev1 img ,.slide .slide_next1 img{width:50px;height:189px;}
.slide .slide_prev1:hover ,.slide .slide_next1:hover{opacity:1;.filter:alpha(opacity=100)}
.slide .slide_prev1{left:0px;}
.slide .slide_next1{left:950px;}
.slide_main span{position: relative;}
.slide_main span div.play_icon2{position:absolute;background: url("http://s001.wudaotv.com/t1/css/zt/zghwd/image/play-btn.png") no-repeat scroll 0% 0% transparent; background-size: 70%; width: 82px;height: 80px;left: 50%;margin-left: -28px;top: 50%;margin-top: -28px;}

 

$(function(){

var lb = $("#slide_main"),
lb_cur = 1,
lbp_w = lb.find(".products").width();
lb_timer = null;
t = 1;
function showLimitBuyProducts(){
if(lb_cur < 1){
lb_cur = 2;
} else if(lb_cur > 2){
lb_cur = 1;
}
var products = $("#slide_main .products").hide().eq(lb_cur-1).show(),
ta = products.find("textarea");

if(ta.length){
products.html(ta.val());
}
}
lb_timer = setInterval(function(){
lb_cur++;
showLimitBuyProducts();
}, 4000);

$(".prev, .btn-prev").click(function(){
lb_cur--;
showLimitBuyProducts();
});
$(".next, .btn-next").click(function(){
lb_cur++;
showLimitBuyProducts();
});
$("#slide").hover(function(){
clearInterval(lb_timer);
lb_timer = null;
$("#slide .btn-prev, #slide .btn-next").show();
}, function(){
lb_timer = setInterval(function(){
lb_cur++;
showLimitBuyProducts();
}, 10000);
$("#slide .btn-prev, #slide .btn-next").hide();
});

})

【技术】轮播

标签:

原文地址:http://www.cnblogs.com/ybingbing_1213/p/4225839.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!