自动轮播图

最新推荐文章于 2022-12-04 09:00:00 发布

慕容秋水

最新推荐文章于 2022-12-04 09:00:00 发布

阅读量422

点赞数

分类专栏： Javascript 文章标签：前端 Javascript jQuery

本文链接：https://blog.csdn.net/qq50892090/article/details/48004367

版权

Javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

带页码左右按钮

可自动轮播，悬停时停播，离开继续播放

可自动扩展页码数和按钮

缺陷：还没有给按钮块实现自动设置宽度，新加入图片时必须设置其class，ul宽度不知道为什么必须在html页码写入

<!DOCTYLE HTML>
<html>
	<head>
		<title> 轮播图</title>
		<meta charset="uft-8" />
		<link href="lb.css" rel="stylesheet" type="text/css">
		<script src="jquery.js"></script>
		
	</head>
	<body>
		<div id="mid">
			<div id="lb">
				<div id="focus">
					<ul class="read">
						<li><img class="lis" src="1.jpg"/></li>
						<li style="display:none;"><img class="lis" src="2.jpg"/></li>
						<li style="display:none;"><img class="lis" src="3.jpg"/></li>
						<li style="display:none;"><img class="lis" src="4.jpg"/></li>
						<li style="display:none;"><img class="lis" src="2.jpg"/></li>
					</ul>
				</div>				
				<div id="pbtn">
					<ul>
						<li><a href="javascript:void(0)"><img οnmοuseοver="pbtnin(this)" class="btn" src="pic11.png"/></a></li>
						<li><a href="javascript:void(0)"><img οnmοuseοver="pbtnin(this)" class="btn" src="pic10.png"/></a></li>
						<li><a href="javascript:void(0)"><img οnmοuseοver="pbtnin(this)" class="btn" src="pic10.png"/></a></li>
						<li><a href="javascript:void(0)"><img οnmοuseοver="pbtnin(this)" class="btn" src="pic10.png"/></a></li>
						<li><a href="javascript:void(0)"><img οnmοuseοver="pbtnin(this)" class="btn" src="pic10.png"/></a></li>
					</ul>
				</div>	
				<div class="tl"><!--turn left-->
					<a href="javascript:void(0)"><-</a>
				</div>
				<div class="tr">
					<a href="javascript:void(0)">-></a>
				</div>
				<div class="pnum">
					<span id="curnum">1</span>/<span id="num"></span>
				</div>
			</div>
		</div>
		
		<script type="text/javascript">
		var num=$(".read li").size();//焦点图个数
		var lwidth=$(".read li").width();//每个焦点图宽度
		
		$(".read").css("width",lwidth*num);	//设置焦点图总容器宽度
		

		</script>
		<script src="lb.js" type="text/javascript"></script>
	</body>
</html>

外部的CSS样式

*{
	margin:0;
	padding:0;
}
body{
background-color:#EEEEEE;
}
#mid{
	height:1500px;
	width:1000px;
	background-color:white;
	margin:0 auto;
}
#lb{
	width:550px;
	height:360px;
	border:1px solid black;
	margin:0 auto;
	position:absolute;
	top:200px;	
	left:670px;
}
#pbtn{
	width:100px;
	
	position:absolute;
	top:340px;
	left:220px;
	
}
#pbtn ul{
	list-style:none;
	width:100px;
	height:10px;
}
#pbtn li{
	float:left;
	margin-left:9px;
}
#focus{
	
	width:500px;
	height:334px;
	position:absolute;
	top:5px;
	left:25px;
	overflow:hidden;
	
}
.read{
	list-style:none;
	height:334px;
	position:absolute;
}
.read li{
	float:left;
}
.tl{
	width:25px;
	
	
	line-height:334px;	
}
.tl a{
text-decoration:none;
color:#2B2B2B;
}

.tl a:hover{
color:red;
}
.tr{
width:25px;

position:absolute;
left:529px;
top:160px;
}
.tr a{
text-decoration:none;
color:#2B2B2B;
}
.tr a:hover{
color:red;
}
.pnum{
position:absolute;
	left:529px;
	top:180px;
	font-size:12px;
}

外部的JS文件

document.write("<script language='javascript' src='./jquery.js'></script>");
var num=$(".read li").size();//焦点图个数
		var lwidth=$(".read li").width();//每个焦点图宽度
document.getElementById("num").innerHTML=num;
var curnum=document.getElementById("curnum");//当前页码
var j=0;//当前序列号
var btns=document.getElementsByClassName("btn");//获得按钮集合
var lis=document.getElementsByClassName("lis");//获得轮播内容集合
/*播放上一个内容*/
$(".tl").click(function(){
	var marginL=0
	if(j==0)
	{
		j=num-1;
		curnum.innerHTML=num;
		btns[0].src="pic10.png";
		btns[j].src="pic11.png";
		marginL=lwidth*j;
		$(".read").stop(false,true).animate({'left':-marginL},500,function(){
			$(".read li").fadeTo(0,0.1);
			$(".read li").eq(j).fadeTo(500,1);
		});
	}
	else if(j!=0)
	{
		curnum.innerHTML=j;
		
		btns[j].src="pic10.png";
		btns[j-1].src="pic11.png";
		j--;
		marginL=lwidth*j;
		$(".read").stop(false,true).animate({'left':-marginL},500,function(){
			$(".read li").fadeTo(0,0.1);
			$(".read li").eq(j).fadeTo(500,1);
		});
	}
})
/*播放下一个内容函数*/
function turnR(){
	var marginL=0;
	num=parseInt(num);
	if(j==num-1)
	{
		j=0;
		curnum.innerHTML=1;
		btns[num-1].src="pic10.png";
		btns[0].src="pic11.png";
		marginL=lwidth*j;
		$(".read").stop(false,true).animate({'left':-marginL},500,function(){
			$(".read li").fadeTo(0,0.1);
			$(".read li").eq(j).fadeTo(500,1);
		});
	}
	else if(j!=num-1)
	{
		curnum.innerHTML=j+2;
		
		btns[j].src="pic10.png";
		btns[j+1].src="pic11.png";
		j++;
		marginL=lwidth*j;
		$(".read").stop(false,true).animate({'left':-marginL},500,function(){
			$(".read li").fadeTo(0,0.1);
			$(".read li").eq(j).fadeTo(500,1);
		});
	}
}
/*播放下一个内容按钮*/
$(".tr").click(function(){
	turnR();
});
/*移动到按钮*/
function pbtnin(obj)
{
	obj.src="pic11.png";
    var i=0;
    for(i=0;i<btns.length;i++)
    {
        if(obj != btns[i])
        {
            btns[i].src="pic10.png"
        }
        if(obj == btns[i])
        {
            var curnum=document.getElementById("curnum");
            curnum.innerHTML=i+1;
            j=i; //这是第几个按钮
        }
    }
    var marginL=j*lwidth;
    $(".read").stop(false,true).animate({left:-marginL},500,function() {
        $(".read li").fadeTo(0, 0.1);
        $(".read li").eq(j).fadeTo(500, 1);
    });
}
/*自动播放*/
var autolb=setInterval("turnR()",2000);
window.οnlοad=autolb;
$(".read").mouseover(function()
{
	clearInterval(autolb);
})
$(".read").mouseout(function(){
	autolb=setInterval("turnR()",2000);
})