效果图html模块
html模块
<html>
<head>
<meta http-equiv="x-ua-compatible" content="IE=9" >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>焦点图test</title>
<link href="res/css/css.css" rel=‘stylesheet‘ type=‘text/css‘ />
<script src="res/js/slide.js" rel=‘stylesheet‘ type=‘text/javascript‘ defer="defer"></script>
</head>
<body>
<div class="banner">
<div class="btn">
<a class="btn_left" href="javascript:changeImgleft();;" id="turnleft"></a>
<a class="btn_right" href="javascript:changeImg();" id="turnright"></a>
</div>
<div class="view" id="imglist">
<a href="http://www.baidu.com" style="background-image:url(res/images/1.jpg)"></a>
<a href="http://www.google.com" style="background-image:url(res/images/2.jpg)"></a>
<a href="http://www.bozechina.com" style="background-image:url(res/images/3.jpg)"></a>
<a href="http://www.123.com" style="background-image:url(res/images/4.jpg)"></a>
</div>
<div class="dot" id="dot" >
<a href="javascript:void(0)" id="0" onmouseover="ding(this)" class="bluedot"></a>
<a href="javascript:void(0)" id="1" onmouseover="ding(this)" class="normal"></a>
<a href="javascript:void(0)" id="2" onmouseover="ding(this)" class="normal"></a>
<a href="javascript:void(0)" id="3" onmouseover="ding(this)" class="normal"></a>
</div>
</div>
</body>
</html>
css模块
*{
margin:0px;
padding:0px;
}
body{
height:100%;
text-align:center;
}
.banner{
width:100%;
height:400px;
float:left;
margin-top:30px;
border:1px solid #E8E8FF;
position:relative;
}
.banner .view{
width:100%;
height:400px;
overflow:hidden;
}
.banner .view a{
display:block;
width:100%;
height:400px;
background-position:center;
}
.banner .btn a.btn_left{
display:block;
width:11px;
height:18px;
background-image:url("../images/left.png");
position:absolute;
top:200px;
left:30%;
}
.banner .btn a.btn_left:hover{
background-image:url("../images/left_hover.png");
}
.banner .btn a.btn_right{
display:block;
width:11px;
height:18px;
background-image:url("../images/right.png");
position:absolute;
top:200px;
right:30%;
}
.banner .btn a.btn_right:hover{
background-image:url("../images/right_hover.png");
}
.banner .dot{
height:5px;
position:absolute;
display:inline-block;
bottom:30px;
width:100%;
}
.banner .dot .normal{
display:block;
width:5px;
height:5px;
float:left;
background-image:url("../images/gray.png");
margin-right:20px;
}
.banner .dot a:hover{
background-image:url("../images/blue.png");
}
.bluedot{
display:block;
width:5px;
height:5px;
float:left;
margin-right:20px;
background-image:url("../images/blue.png");
}
js模块
var dot=document.getElementById("dot");
var dotlist=dot.getElementsByTagName(‘a‘);
/*控制图片定时切换*/
var piclist=new Array();
var linklist=new Array();
var alist=document.getElementById("imglist");
var imglist=alist.getElementsByTagName(‘a‘);
for(var i=0;i<imglist.length;i++){
piclist[i]=imglist[i].style.backgroundImage;
linklist[i]=imglist[i].href;
}
var curIndex=0;
var timeInterval=5000;
var efunt;
efunt=setInterval(changeImg,timeInterval);
function changeImg(){
if (curIndex==piclist.length-1){
curIndex=0;
}else{
curIndex+=1;
}
imglist[0].style.backgroundImage=piclist[curIndex];
imglist[0].href=linklist[curIndex];
for(var m=0;m<dotlist.length;m++){
if(m==curIndex){
dotlist[m].className=‘bluedot‘;
}else{
dotlist[m].className=‘normal‘;
}
}
}
function changeImgleft(){
if (curIndex!=0){
curIndex-=1;
}else{
curIndex=piclist.length-1;
}
imglist[0].style.backgroundImage=piclist[curIndex];
imglist[0].href=linklist[curIndex];
}
/*控制图片左右切换*/
var turnleft=document.getElementById("turnleft");
var turnright=document.getElementById("turnright");
turnleft.onmouseover=function(){clearInterval(efunt)};
turnleft.onmouseout=function(){efunt=setInterval(changeImg,timeInterval)};
turnright.onmouseover=function(){clearInterval(efunt)};
turnright.onmouseout=function(){efunt=setInterval(changeImg,timeInterval);};
/*控制点点*/
var dotWidth=dot.clientWidth;
var viewWidth=document.body.clientWidth;
marginWidth=(viewWidth-dotWidth)/2;
dot.style.marginLeft=marginWidth+"px";
function ding(k){
ddnum=k.id;
clearInterval(efunt);
imglist[0].style.backgroundImage=piclist[ddnum];
imglist[0].href=linklist[ddnum];
for(var m=0;m<dotlist.length;m++){
if(m==ddnum){
dotlist[m].className=‘bluedot‘;
}else{
dotlist[m].className=‘normal‘;
}
}
}
document.getElementById("0").onmouseout=function(){efunt=setInterval(changeImg,timeInterval)};
document.getElementById("1").onmouseout=function(){efunt=setInterval(changeImg,timeInterval)};
document.getElementById("2").onmouseout=function(){efunt=setInterval(changeImg,timeInterval)};
document.getElementById("3").onmouseout=function(){efunt=setInterval(changeImg,timeInterval)};
window.onresize = function(){
var dotWidth=dot.clientWidth;
var viewWidth=document.body.clientWidth;
marginWidth=(viewWidth-dotWidth)/2;
dot.style.marginLeft=marginWidth+"px";
};
tips:第一次写还有很多地方需要改善~望多多指教~^-^
时间： 2024-11-09 04:54:18