android爱奇艺轮播图,jquery代码实现爱奇艺轮播图效果

爱奇艺轮播图效果的jquery代码实现。

html部分：

• 梦想的声音:老萧神曲燃爆全场
• 超模:欢欢时装周遭哄抢成秀霸
• 灵魂摆渡3:结局赵吏去向成谜

css部分：

#banner{position: relative;}

#banner-pic li{display: none;width: 100%;overflow: hidden;}

#banner-pic img{width: 100%;height: auto;}

#banner-pic li.selected{display: block;}

#banner-text{width: 300px;position: absolute;top: 80px;right: 100px;z-index: 99999;background: rgba(0,0,0,0.6);border-radius: 9px;text-align: center;}

#banner-text li{display: block;margin: 10px auto;}

#banner-text a{background: url(img/zuobai.png) no-repeat;background-position: left top;background-size: contain;width: 100%;display: block;color: rgb(255,255,255);opacity: 0.5;}

#banner-text p{position: absolute;bottom: 0px;right: 350px;display: none;color: green;font-size: 30px;}

#banner-text p.show{display: block;}

#banner-text a.selected-a{color: red;opacity: 1;}

jquery部分：

$(function(){

var i=0;

var timepic=null;

function a_noselected(){

$('#banner-text a').each(function(){

if($(this).hasClass('selected-a')) $(this).removeClass('selected-a');

})

}

function pic_noselected(){

$('#banner-pic li').each(function(){

if($(this).hasClass('selected')) $(this).removeClass('selected');

})

}

function pic_show(index){

$('#banner-pic li').eq(index).addClass('selected');

}

function auto(){

timepic=setInterval(function(){

var piclength=$('#banner-pic li').length;

pic_noselected();

a_noselected()

pic_show(i);

$('#banner-text a').eq(i).addClass('selected-a');

i++;

if(i==piclength) i=0;

},2000)

}

auto();

$('#banner-text a').on('mouseover',function(){

clearInterval(timepic)

a_noselected();

$(this).addClass('selected-a');

})

$('#banner-text a').on('mouseout',function(){

auto();

hidep();

})

function hidep(){

$('#banner-text p').each(function(){

if($(this).hasClass('show')) $(this).removeClass('show');

})

}

$('#banner-text a').on('click',function(){

hidep();

pic_noselected();

a_noselected();

$(this).addClass('selected-a');

$(this).parent().find('p').addClass('show');

var j=$(this).parent().index();

pic_show(j);

})

$('#owl-slide').owlCarousel({

items: 1,

slideSpeed: 300,

autoPlay: true,

autoPlayTimeout: 1000,

autoPlayHoverPause: true

})

})