带有缩略图和文字提示的轮播图
Posted 鹿
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了带有缩略图和文字提示的轮播图相关的知识，希望对你有一定的参考价值。
这也是轮播图做了好久，还是刚进入前端岗位工作不久，自己空余时间写的。
下面是代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lubo</title>
<script type="text/javascript" src="js/jquery-1.12.3.js"></script>
<!--<script type="text/javascript" src="js/headerBg.js"></script>-->
<style>
a, img { border: none; }
#headerBg { position: relative; margin: 40px auto 0 auto; width: 750px; height: 460px; overflow: hidden; border-radius: 10px 10px;}
#headerBg .imgbox { width: 4500px; height: 380px; position: absolute; left: 5px; top: 4px; }
#headerBg .imgbox img { float: left; width: 750px; height: 380px; }
#headerBg .btnbox { width: 750px; height: 120px; position: absolute; top: 395px; bottom: 0px;}
#headerBg .btnbox a { cursor: pointer; display: inline-block; float: left; width: 120px; height: 64px; margin: 0 0 0 4px;}
#headerBg .btnbox a img { position: relative; display: inline; width: 116px; height: 58px; float: left; border: 3px solid gray; border-radius: 5px 5px; }
#headerBg .btnbox a .img_hover { border: 3px solid ghostwhite; border-radius: 5px 5px; }
#headerBg .btn {
width: 40px;
height: 90px;
">rgba(0, 0, 0, 0.5);
position: absolute;
font-size: 80px;
color: white;
font-family: "宋体";
margin-top: 250px;
display: none;
}
#headerBg .btn:hover { ">rgba(0, 0, 0, 0.7); cursor: pointer; }
#headerBg .btn_left { left: 0px; top: -105px; }
#headerBg .btn_right { left: 710px; top: -105px; }
body{ background: black ; }
#headerBg .move_text{overflow:hidden;width:750px;height:40px;position:absolute;top:345px;">rgba(0, 0, 0, 0.5); }
#headerBg .move_text h3{margin:10px 0 10px 0;font-size:20px;text-indent: 3em;Letter-spacing: 1em;color:ghostwhite;}
</style>
</head>
<body>
<div id="headerBg">
<div class="imgbox">
<img alt="Danx" src="img/1.jpg" width="750" height="380"/>
<img alt="Danx" src="img/2.jpg" width="750" height="380"/>
<img alt="Danx" src="img/3.jpg" width="750" height="380"/>
<img alt="Danx" src="img/4.jpg" width="750" height="380"/>
<img alt="Danx" src="img/5.jpg" width="750" height="380"/>
<img alt="Danx" src="img/6.jpg" width="750" height="380"/>
</div>
<div class="move_text">
<div id="move_text0" class="move_text_div">
<h3>标题1</h3>
</div>
<div id="move_text1" class="move_text_div">
<h3>标题2</h3>
</div>
<div id="move_text2" class="move_text_div">
<h3>标题3</h3>
</div>
<div id="move_text3" class="move_text_div">
<h3>标题4</h3>
</div>
<div id="move_text4" class="move_text_div">
<h3>标题5</h3>
</div>
<div id="move_text5" class="move_text_div">
<h3>标题5</h3>
</div>
</div>
<div class="btnbox">
<a onmouseover="btn_m_over(0)"><img alt="Danx" id="btn_img0" class="thumb img_hover" src="img/1.jpg"/></a>
<a onmouseover="btn_m_over(1)"><img alt="Danx" id="btn_img1" class="thumb" src="img/2.jpg"/></a>
<a onmouseover="btn_m_over(2)"><img alt="Danx" id="btn_img2" class="thumb" src="img/3.jpg"/></a>
<a onmouseover="btn_m_over(3)"><img alt="Danx" id="btn_img3" class="thumb" src="img/4.jpg"/></a>
<a onmouseover="btn_m_over(4)"><img alt="Danx" id="btn_img4" class="thumb" src="img/5.jpg"/></a>
<a onmouseover="btn_m_over(5)"><img alt="Danx" id="btn_img5" class="thumb" src="img/6.jpg"/></a>
</div>
<div class="btn btn_left"><</div>
<div class="btn btn_right">></div>
</div>
<script type="text/javascript">
$( "#headerBg" ).hover( function()
{
$( ".btn" ).css( "display", "block" );
}, function()
{
$( ".btn" ).css( "display", "none" );
} );
var nub=$(".imgbox img" ).size();
var count=nub-1;
$(".move_text_div").hide();
$("#move_text0").show();
$(".img_hover").animate({bottom:‘10px‘});
var i=1;
var m_over=true;
function zx_slider(){
if(m_over){
if(i<0){i=count;}
//p
$(".move_text_div").hide();
$("#move_text"+i).show();
//p end
//btn
$(".btnbox img").stop(true,true);
$(".btnbox img").removeClass("img_hover");
$(".btnbox img").animate({bottom:‘0px‘},200);
$("#btn_img"+i).addClass("img_hover");
$("#btn_img"+i).animate({bottom:‘10px‘},200);
//btn end
$(".imgbox").stop();
$(".imgbox").animate({left:‘-750‘*i+‘px‘});
/*if(i<count){
i++;
}else{
i=0;
}*/
i++;
console.log( i );
if(i ===count+1){
i = 0;
}
}
}
$(".btn_left").click(function(){
m_over=true;
if(i==0){i=count-1}else{i=i-2;}
zx_slider();
m_over=false;
});
$(".btn_right").click(function(){
m_over=true;
zx_slider();
m_over=false;
});
//鼠标悬停动画
function btn_m_over(btn_i){
if(i-1!=btn_i){
m_over=true;
i=btn_i;
zx_slider();
m_over=false;
}
}
zx_timer = setInterval( "zx_slider();", 2000 );
$( "#headerBg" ).mouseover( function()
{
m_over = false;
} );
$( "#headerBg" ).mouseout( function()
{
m_over = true;
} );
</script>
</body>
</html>
以上是个人写的，可供参考。
以上是关于带有缩略图和文字提示的轮播图的主要内容，如果未能解决你的问题，请参考以下文章
前端javascript实现带有子菜单和控件的轮播图slider