海南苯概企业管理有限公司

0712-2888027 189-8648-0214
微信公眾號(hào)

孝感風(fēng)信網(wǎng)絡(luò)科技有限公司微信公眾號(hào)

當(dāng)前位置:主頁(yè) > 技術(shù)支持 > Javascript/JQuery > jquery點(diǎn)擊圖標(biāo)滾動(dòng)同時(shí)自動(dòng)播放

jquery點(diǎn)擊圖標(biāo)滾動(dòng)同時(shí)自動(dòng)播放

時(shí)間:2015-11-11來源:風(fēng)信官網(wǎng) 點(diǎn)擊: 574次

<div class="Links">
<h3>123</h3>
<span class="prex">上一頁(yè)</span><span class="next">下一頁(yè)</span>

<div class="picBd">
<ul>
<li><a href="#"><img src='#' border='0' width='89' height='103'/></a></li>
<li><a href="#"><img src='#' border='0' width='89' height='103'/></a></li>
</ul>
</div>
</div>

jquery代碼

<script>
$(function(){
var page = 1;
var i = 11;

var $pre = $('.brands span.pre')
var $next = $('.brands span.next');
var $showMoney = $(".showMoney");
var $autoFun;
//@Mr.Think***調(diào)用自動(dòng)滾動(dòng)
autoSlide();
//@Mr.Think***向前滾動(dòng)
$next.click(function(){

var $parent = $(this).parents("div.all");
var $p_show = $parent.find("div.showMoney");
var $content = $parent.find("div.brands");
var p_width = $content.width();
var len = $p_show.find("li").length;
var page_count = Math.ceil(len / i);
if(!$p_show.is(":animated")){
if(page == page_count){
$p_show.animate({left:"0px"},"slow");
page = 1;
}else{
$p_show.animate({left:'-='+p_width},"slow");
page++;
}
}
});
//@Mr.Think***停止?jié)L動(dòng)
clearFun($showMoney);
clearFun($pre);
clearFun($next);
clearFun($num);
//@Mr.Think***事件劃入時(shí)停止自動(dòng)滾動(dòng)
function clearFun(elem){
elem.hover(function(){
clearAuto();
}, function(){
autoSlide();
});
}
function autoSlide(){
$next.trigger('click');
$autoFun = setTimeout(autoSlide, 1000);//此處不可使用setInterval,setInterval是重復(fù)執(zhí)行傳入函數(shù),這會(huì)引起第二次劃入時(shí)停止失效
}
//@Mr.Think***清除自動(dòng)滾動(dòng)
function clearAuto(){
clearTimeout($autoFun);
}

$pre.click(function(){
var $parent = $(this).parents("div.all");
var $p_show = $parent.find("div.picBd");
var $content = $parent.find("div.brands");
var p_width = $content.width();
var len = $p_show.find("li").length;
var page_count = Math.ceil(len / i);
if( !$p_show.is(":animated") ){
if( page == 1 ){
$p_show.animate({ left : '-='+p_width*(page_count-1) }, "slow");
page = page_count;
}else{
$p_show.animate({ left : '+='+p_width }, "slow");
page--;
}
}
});
});

</script>

您可能感興趣的相關(guān)文章:

欄目列表
推薦內(nèi)容
熱點(diǎn)內(nèi)容
展開
德清县| 哈尔滨市| 习水县| 漳州市| 湖北省| 遂川县| 云安县| 安宁市| 克拉玛依市| 蓝山县| 淳化县| 航空| 金华市| 茶陵县| 乌拉特前旗| 堆龙德庆县| 通山县| 南昌县| 甘南县| 玉屏| 易门县| 驻马店市| 水城县| 吉林市| 麻栗坡县| 彭阳县| 苍山县| 阿拉尔市| 正蓝旗| 儋州市| 灌云县| 伊吾县| 富川| 读书| 巴林右旗| 忻城县| 东城区| 湾仔区| 霞浦县| 缙云县| 城市|