爱奇艺轮播图效果的jquery代码实现。
html部分:
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
})
})