css+HTML+Js:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>轮播图</title>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/slide.js"></script>
<style>
/*<!--美化页面元素,形成最终页面效果-->*/
*{
margin:0;
padding:0;
}
/*轮播图水平居中显示*/
#focus{
width:730px;
height:450px;
margin:50px auto;
position:relative;
overflow: hidden;
}
#page-con li{
display:inline-block;
font-size:12px;
/*border:1px solid red;*/
width:18px;
height:18px;
line-height:18px;
/*以百分比定义圆角形状*/
border-radius:50%;
color:white;
background-color:#3e3e3e;
/*鼠标形状由箭头变成小手形状*/
cursor:pointer;
}
#page-con{
/*border:1px solid red;*/
position: absolute;
bottom:10px;
text-align: center;
width: 100%;
}
img{
display: none;
}
</style>
</head>
<body>
<div id="focus">
<img src="img/focus.jpg"/>
<img src="img/focus1.jpg"/>
<img src="img/focus2.jpg"/>
<img src="img/focus3.jpg"/>
<img src="img/focus4.jpg"/>
<ul id="page-con">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
js:// JavaScript Document
/**
文档创建于2017年8月10日
*/
/**
* Created by kgc on 2017/8/10.
*/
//轮播代码
$(function(){
//设置轮播图片的下标
var page = -1;
var stop = true; //设置轮播是否要停止或继续
//定义轮播函数
function slide(){
if(stop){
page++;
//到了最后一张,再从第一张重新开始轮播
if(page == 5){
page = 0;
}
//首先把所有图片都隐藏,同时所有按钮都是灰色未选中状态
$("#focus img").fadeOut(200);
$("#page-con li").css({"background":"#3e3e3e"});
//单独让下标为page的那张图片显示出来,同时让page按钮选中状态
$("#focus img").eq(page).fadeIn();
$("#page-con li").eq(page).css({"background":"#b61b1f"});
}
setTimeout(slide,1000);
}
slide();
//鼠标悬停和离开效果
$("#focus").mouseover(function(){
//停止轮播
stop = false;
}).mouseout(function(){
//继续轮播
stop = true;
});
});
// JavaScript Document
/**
文档创建于2017年8月10日
*/
/**
* Created by kgc on 2017/8/10.
*/
//轮播代码
$(function(){
//设置轮播图片的下标
var page = -1;
var stop = true; //设置轮播是否要停止或继续
//定义轮播函数
function slide(){
if(stop){
page++;
//到了最后一张,再从第一张重新开始轮播
if(page == 5){
page = 0;
}
//首先把所有图片都隐藏,同时所有按钮都是灰色未选中状态
$("#focus img").fadeOut(200);
$("#page-con li").css({"background":"#3e3e3e"});
//单独让下标为page的那张图片显示出来,同时让page按钮选中状态
$("#focus img").eq(page).fadeIn();
$("#page-con li").eq(page).css({"background":"#b61b1f"});
}
setTimeout(slide,1000);
}
slide();
//鼠标悬停和离开效果
$("#focus").mouseover(function(){
//停止轮播
stop = false;
}).mouseout(function(){
//继续轮播
stop = true;
});
});
代码中用的jquery库没有上传,需要自己去官网下载
jquery-1.10.0.min.js下载地址:https://code.jquery.com/jquery-1.10.0.min.js