仿5sing图片轮播，向5Sing致敬_5sing主页标题图尺寸-优快云博客

本文链接：https://blog.youkuaiyun.com/aiyishengyishi/article/details/50378060

<!doctype html>
<html>
<head>
<title>中国原创音乐基地5SING</title>
<meta charset='utf-8' />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<style>
.wh20{
width:20px;height: 20px;
}
#adv4 ul,#adv4 li{
list-style: none;
margin:0;
padding:0;
}
.banneradv4{
width: 650px;
height: 220px;
overflow: hidden;
position: relative;
margin:0 auto;
}
#adv4 .banneradv4 img{
vertical-align: middle;
}
#adv4 .banneradv4 li{
width: 650px;
height: 220px;
overflow: hidden;
position: relative;
float: left;
}
#adv4 .banneradv4 li a{
display: block;
width: 100%;
height: 100%;
}
#adv4 .banneradv4 .imgnum{
position:absolute;
left:0;bottom:10px;
text-align:center;
width:100%;
}#adv4 .banneradv4 .imgnum p{
height:18px;
display:inline-block;
margin:0 auto;
padding:0px 5px 2px;
background:rgba(0,0,0,0.5);
filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#60000000',endColorstr='#60000000');
border-radius:4px;
}
#adv4 .banneradv4 .imgnum span{
display:inline-block;
width:8px;
height:8px;
font-size:0;
border-radius:100%;
background:#fff;
margin:0 2px;
vertical-align:middle;
cursor:pointer;
}
#adv4 .banneradv4 .imgnum .curr{
/* background:#66cc00; */
background:#6C0 none repeat scroll 0% 0%;
}
#adv4 .banner_action a{
position:absolute;
display:block; width:30px;
height:60px;
background:rgba(0,0,0,0.3);
filter:progid:DXImageTransform.Microsoft.gradient(enabled = 'true',startColorstr = '#60000000',endColorstr = '#60000000');
top:80px;
}
#adv4 .banner_action a .btn{
margin:21px auto 0;
cursor:pointer;
}
#adv4 .banner_action .banner_action_lt{
left:0px;
}
#adv4 .banner_action .banner_action_rt{
right:0px;
}
#adv4 .btn{
text-indent:-9999em;
display:block;
overflow:hidden;
}
#adv4 .bni{
background:url(leftImg.png) no-repeat;
}
#adv4 .bniHover{
background:url(leftImgHover1.png) no-repeat;
}
#adv4 .bci{
background:url(rightImg.png) no-repeat;
}
#adv4 .bciHover{
background:url(rightImgHover1.png) no-repeat;
}
#adv4 .news_up{
margin-right:12px; background-position:-32px -56px;
}
#adv4 .news_down{
background-position:-48px -56px;
}
#adv4 .news_up:hover,#adv4 .banner_action a:hover .news_up{
background-position:-32px -72px;
}
#adv4 .news_down:hover,#adv4 .banner_action a:hover .news_down{
background-position:-48px -72px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="adv4" style="width:650px;height:220px;background-color: #ccc;position:absolute;left:650px;">
<div class="banneradv4">
<ul style="width:7800px;margin-left:0;" >
<li>
<a target="_blank" href="http://5sing.kugou.com/poster/click?itemId=139&trackId=14199fb97446e53e4c21f48ca6b509b9">
<img width="650" height="220" alt="秦时明月插曲《思归》" src="http://img7.5sing.kgimg.com/m/T11wZ_BXKT1RXrhCrK.jpg"></img>
</a>
</li>
<li>
<a target="_blank" href="http://5sing.kugou.com/poster/click?itemId=136&trackId=d5a2c840f410cb6c10eabcad27f09aa2">
<img width="650" height="220" alt="2015不可错过的编辑推荐——古风篇" src="http://img7.5sing.kgimg.com/m/T1djZAByhT1RXrhCrK.jpg"></img>
</a>
</li>
<li>
<a target="_blank" href="http://5sing.kugou.com/poster/click?itemId=138&trackId=2a29b0b14f3970f90de6fd2289d9d408">
<img width="650" height="220" alt="Be with you 格桑花酒吧 LIVE" src="http://img5.5sing.kgimg.com/m/T1xTd_BXYT1RXrhCrK.jpg"></img>
</a>
</li>
<li>
<a target="_blank" href="http://5sing.kugou.com/poster/click?itemId=131&trackId=07a5fd6085d9766afbe31e6aceb4e74a">
<img width="650" height="220" alt="九阙重华众筹" src="http://img4.5sing.kgimg.com/m/T102KlByKT1RXrhCrK.jpg"></img>
</a>
</li>
<li>
<a target="_blank" href="http://5sing.kugou.com/poster/click?itemId=137&trackId=8c9efd5714cb5c7484995cdd616bf782">
<img width="650" height="220" alt="sing女团灵儿想叮当单曲首发" src="http://img10.5sing.kgimg.com/m/T1Ag_qByAT1RXrhCrK.jpg"></img>
</a>
</li>
<li>
<a target="_blank" href="http://5sing.kugou.com/poster/click?itemId=119&trackId=1766976f0dee5e41c7d86f1edbd616fa">
<img width="650" height="220" alt="残墨书画意，细雨漾华年" src="http://img1.5sing.kgimg.com/m/T1x9dvBCJT1RXrhCrK.jpg"></img>
</a>
</li>
<li>
<a target="_blank" href="http://5sing.kugou.com/poster/click?itemId=139&trackId=14199fb97446e53e4c21f48ca6b509b9">
<img width="650" height="220" alt="秦时明月插曲《思归》" src="http://img7.5sing.kgimg.com/m/T11wZ_BXKT1RXrhCrK.jpg"></img>
</a>
</li>
<li>
<a target="_blank" href="http://5sing.kugou.com/poster/click?itemId=136&trackId=d5a2c840f410cb6c10eabcad27f09aa2">
<img width="650" height="220" alt="2015不可错过的编辑推荐——古风篇" src="http://img7.5sing.kgimg.com/m/T1djZAByhT1RXrhCrK.jpg"></img>
</a>
</li>
<li>
<a target="_blank" href="http://5sing.kugou.com/poster/click?itemId=138&trackId=2a29b0b14f3970f90de6fd2289d9d408">
<img width="650" height="220" alt="Be with you 格桑花酒吧 LIVE" src="http://img5.5sing.kgimg.com/m/T1xTd_BXYT1RXrhCrK.jpg"></img>
</a>
</li>
<li>
<a target="_blank" href="http://5sing.kugou.com/poster/click?itemId=131&trackId=07a5fd6085d9766afbe31e6aceb4e74a">
<img width="650" height="220" alt="九阙重华众筹" src="http://img4.5sing.kgimg.com/m/T102KlByKT1RXrhCrK.jpg"></img>
</a>
</li>
<li>
<a target="_blank" href="http://5sing.kugou.com/poster/click?itemId=137&trackId=8c9efd5714cb5c7484995cdd616bf782">
<img width="650" height="220" alt="sing女团灵儿想叮当单曲首发" src="http://img10.5sing.kgimg.com/m/T1Ag_qByAT1RXrhCrK.jpg"></img>
</a>
</li>
<li>
<a target="_blank" href="http://5sing.kugou.com/poster/click?itemId=119&trackId=1766976f0dee5e41c7d86f1edbd616fa">
<img width="650" height="220" alt="残墨书画意，细雨漾华年" src="http://img1.5sing.kgimg.com/m/T1x9dvBCJT1RXrhCrK.jpg"></img>
</a>
</li>
</ul>
<div class="banner_action" style="display:none;">
<a class="banner_action_lt prev" href="javascript:void(0);">
<b class="new_up btn bni wh20" title="上一张">123</b>
</a>
<a class="banner_action_rt next" href="javascript:void(0);">
<b class="new_down btn bci wh20" title="下一张"></b>
</a>
</div>
<div id="null" class="imgnum">
<p id="indexBar">
<span class="">1</span>
<span class="">2</span>
<span class="">3</span>
<span class="">4</span>
<span class="">5</span>
<span class="">6</span>
</p>
</div>
<span class="next" style="display:none;"></span>
<span class="prev" style="display:none;"></span>
</div>
</div>
<script type="text/javascript">
var imgTimer="";
$(function(){
$("ul").children("li:eq(0)").addClass("currentImg");
$("#indexBar").children("span:eq(0)").addClass("curr");

setTimeout("", 4500 );
imgTimer=setInterval("getImgGun('left')",5000);
});

var firstPosition=0;

function getImgGun(direction){
var currentImgIndex=$("ul li.currentImg").index();
if(currentImgIndex == 11 && direction== "left"){
currentImgIndex=5;
/* $("ul").css("margin-left",0-currentImgIndex*650+"px");*/
}else if(currentImgIndex == 0 && direction== "right"){
currentImgIndex=6;
}

//如果点击的按钮是向右的
if(direction == "left"){
firstPosition=0-(currentImgIndex+1)*650;
$("ul").animate({marginLeft:firstPosition+"px"},500);
$("li").each(function(){
$(this).attr("class","");
});
$("#indexBar span").each(function(){
$(this).attr("class","");
});
$("li:eq("+parseInt(currentImgIndex+1)+")").attr("class","currentImg");
$("#indexBar span:eq("+parseInt((currentImgIndex+1)%6)+")").attr("class","curr");
}
//如果点击的按钮是向左的
else{
firstPosition=0-(currentImgIndex-1)*650;
$("ul").animate({marginLeft:firstPosition+"px"},500);
$("li").each(function(){
$(this).attr("class","");
});
$("#indexBar span").each(function(){
$(this).attr("class","");
});
$("li:eq("+parseInt(currentImgIndex-1)+")").attr("class","currentImg");
$("#indexBar span:eq("+parseInt((currentImgIndex-1)%6)+")").attr("class","curr");
}

console.info(currentImgIndex);
}

/* function getImgLeft(){
clearInterval(imgTimer);
getImgGun(left);
setTimeout("", 4500 );
imgTimer=setInterval("getImgGun()",5000);
}

function getImgRight(){
clearInterval(imgTimer);
setTimeout("", 4500 );
imgTimer=setInterval("getImgGun()",5000);
}*/

$(".banner_action_rt").click(function(){
clearInterval(imgTimer);
getImgGun("left");
setTimeout("", 4500 );
imgTimer=setInterval("getImgGun('left')",5000);
});
$(".banner_action_lt").click(function(){
clearInterval(imgTimer);
getImgGun("right");
setTimeout("", 4500 );
imgTimer=setInterval("getImgGun('left')",5000);
});

/* $("#indexBar span").each(function(){
$(this).click(function(){
console.info($(this).index());
clearInterval(imgTimer);

var currentImgIndex=$(this).index();
firstPosition=0-currentImgIndex*650;
$("ul").animate({marginLeft:firstPosition+"px"},500);
$("li").each(function(){
$(this).attr("class","");
});
$("#indexBar span").each(function(){
$(this).attr("class","");
});
$("li:eq("+parseInt(currentImgIndex)+")").attr("class","currentImg");
$("#indexBar span:eq("+parseInt((currentImgIndex)%6)+")").attr("class","curr");

setTimeout("", 4500 );
imgTimer=setInterval("getImgGun('left')",5000);
});
});*/

$("#indexBar span").each(function(){
$(this).mouseover(function(){
console.info($(this).index());
clearInterval(imgTimer);

var currentImgIndex=$(this).index();
firstPosition=0-currentImgIndex*650;
$("ul").animate({marginLeft:firstPosition+"px"},500);
$("li").each(function(){
$(this).attr("class","");
});
$("#indexBar span").each(function(){
$(this).attr("class","");
});
$("li:eq("+parseInt(currentImgIndex)+")").attr("class","currentImg");
$("#indexBar span:eq("+parseInt((currentImgIndex)%6)+")").attr("class","curr");

setTimeout("", 4500 );
imgTimer=setInterval("getImgGun('left')",5000);
});
});

$(".banner_action_lt").mouseover(function () {
$(this).children().removeClass("bni");
$(this).children().addClass("bniHover");
});
$(".banner_action_lt").mouseout(function () {
$(this).children().addClass("bni");
$(this).children().removeClass("bniHover");
});

$(".banner_action_rt").mouseover(function () {
$(this).children().removeClass("bci");
$(this).children().addClass("bciHover");
});
$(".banner_action_rt").mouseout(function () {
$(this).children().addClass("bci");
$(this).children().removeClass("bciHover");
});

$(".banneradv4").mouseover(function () {
$(".banner_action").show();
});
$(".banneradv4").mouseout(function () {
$(".banner_action").hide();
});
</script>
</body>
</html>