js实现轮播图效果

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>轮播图</title>
		<style type="text/css">
			.focusBox{
				position: absolute;
				top: 340px;
				width: 120px;
				left: 50%;
				margin-left: -60px;
				list-style: none;
				margin-top: 0px;
				margin-bottom: 0px;
			}
			.focusBox li{
				float: left;
				margin-right:10px;
				width: 15px;
				height: 15px;
				border-radius: 10px;
				background: gray;
				cursor: pointer;
			}
			.focusBox li.cur{
				background: #f60;
				opacity: 0.6;
				filter: alpha(opacity=60);
			}
			#focus{
				margin: 0 auto;
				padding: 0px;
				text-align: center;
				border: red solid 1px;
				width: 710px;
			}
		</style>
	</head>
	<body>
		
			
		<div id="focus">
			
		
			<img src="img/index/pic1.jpg" width="690px" height="350px" id="focusImg"/>
			<ul class="focusBox">
				<li onclick="showPic(1);"></li>
				<li onclick="showPic(2);"></li>
				<li onclick="showPic(3);"></li>
			</ul>
		</div>
			
		
		<script src="js/pictureSlide.js" type="text/javascript" charset="utf-8"></script>
		<!--<script>
			var sign=2;
			function showPic (index) {
				var focusImg=document.getElementById("focusImg");
				var imgSrc="img/index/pic";
				imgSrc=imgSrc+index+".jpg";
				focusImg.src=imgSrc;
				var lis =document.getElementsByClassName("focusBox")[0].getElementsByTagName("li");
				for (var i=0;i<lis.length;i++) {
					lis[i].className="";
				}
				lis[index-1].className="cur";
				
				
			}
			
			function setCurrentPic () {
				showPic(sign);
				sign++;
				if (sign==4) {
					sign=1;
				}
			}
			
			window.onload=function  () {
				showPic(1);
			}
			
			window.setInterval("setCurrentPic()",2000);
			
		</script>-->
	</body>
</html>

js代码

// 图片轮播效果
//用于标识当前轮播到第几幅图片
var sign = 2;
//显示轮播图片
function showPic(index) {
	//轮播效果，中当前显示的图片
    var focusImg = document.getElementById("focusImg");
	//图片路径
    var imgSrc = "img/index/pic";
    imgSrc =imgSrc+ index + ".jpg";
	//更换轮播图片
	focusImg.src = imgSrc;
	//获取圆点列表
    var lis = document.getElementsByClassName("focusBox")[0].getElementsByTagName("li");    
    //移除所有轮播按钮的css样式
    for (var i = 0; i < lis.length; i++) {
        lis[i].className = "";
    }
	//设置轮播图片对应的轮播按钮样式
    lis[index - 1].className = "cur";
}
//对轮播图片进行计算处理
function setCurrentPic() {
    showPic(sign);
    sign++;
    if (sign == 4) {
        sign = 1;
    }
}
//窗体加载时，指定显示的图片
window.onload = function () {
    showPic(1);
}
//设置定时器
window.setInterval("setCurrentPic()",1500);

js实现轮播图效果

猜你喜欢