<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 730px;
height: 450px;
position: relative;
left: 20%;
}
#loop{
width: 100%;
height: 100%;
}
#loop img{
width: 100%;
height: 100%;
}
ul{
height: 50px;
position: absolute;
left: 20%;
bottom: 0;
list-style: none;
}
li{
float: left;
width: 50px;
height: 50px;
border-radius: 50%;
background: #CCCCCC;
margin-left: 15px;
text-align: center;
line-height: 50px;
cursor: pointer;
}
.next{
width: 25px;
height: 48px;
opacity: .8;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
background: url(img/swit.png);
background-position: -56px -5px !important;
position: absolute;
top: 40%;
right: 0;
cursor: pointer;
}
.prev{
width: 25px;
height: 48px;
opacity: .8;
background: url(img/swit.png);
background-position: -4px -5px !important;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
position: absolute;
left: 0;
top: 40%;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<div id="loop">
<img src="img/0.jpg" alt="" id="img"/>
</div>
<ul id="circle">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<div class="next"></div>
<div class="prev"></div>
</div>
<script type="text/javascript">
var img = document.getElementById("img"); // 定义轮播图
var list = document.getElementById("circle").getElementsByTagName("li"); //定义所有的导航标
var index = 0;
list[index].style.background = 'red'; //使第一个导航的背景为红色
//制作一个定时器
var timer = setInterval(fun,1000);
function fun(){
index++; //循环所有的导航
if(index == 6){ //不间断循环
index = 0;
}
img.src = "img/"+index+".jpg"; //改变图片src值 这里因为我的图片就是从0~5命名的(为了方便下面操作) 有需要可以拼接字符串
back(); //使所有的导航背景回到初始值
list[index].style.background = 'red'; //使当前的导航背景为红色
}
//通过一个for循环实现鼠标移入移出改变导航背景和图片的src值
for(var i = 0; i<list.length; i++){
list[i].onmouseover = function(){ //鼠标移入触发函数
back(); //先使所有的导航背景回到初始值
this.style.background = 'red'; //给当前鼠标移入的导航背景替换颜色(这里的this可以输出一下看看是什么，对下面会好理解)
clearInterval(timer); //清除定时器
index = this.innerHTML-1; //因为img是从 0~5命名的 导航内容是1~6所以减一
img.src = "img/"+index+".jpg";
}
list[i].onmouseout = function(){ //鼠标移出触发函数重新开启定时器
timer = setInterval(fun,1000);
}
}
//使所有的导航背景回到初始值
function back(){
for(var j=0; j<list.length; j++){
list[j].style.background = '#ccc';
}
}
//制作左右点击触发跳转事件
var next = document.getElementsByClassName("next")[0]; //定义下一页
var prev = document.getElementsByClassName("prev")[0]; //定义上一页
next.onclick = function nex(){ //下一页点击触发效果
index = index+1; //index加1即可
if(index == 6){
index = 0;
}
img.src = "img/"+index+".jpg";
clearInterval(timer);
back()
list[index].style.background = 'red';
}
prev.onclick = function pre(){ //下一页点击触发效果
index = index-1; //index减1即可
if(index == -1){
index = 5;
}
img.src = "img/"+index+".jpg";
clearInterval(timer);
back()
list[index].style.background = 'red';
}
next.onmouseout = function(){ //鼠标移出事件 继续滚动
clearInterval(timer);
timer = setInterval(fun,1000);
}
prev.onmouseout = function(){
clearInterval(timer);
timer = setInterval(fun,1000);
}
</script>
</body>
</html>
jq
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
#box{
width: 730px;
height: 450px;
position: relative;
left: 20%;
}
#loop{
width: 100%;
height: 100%;
}
#loop img{
width: 100%;
height: 100%;
}
ul{
height: 50px;
position: absolute;
left: 20%;
bottom: 0;
list-style: none;
}
li{
float: left;
width: 50px;
height: 50px;
border-radius: 50%;
background: #CCCCCC;
margin-left: 15px;
text-align: center;
line-height: 50px;
cursor: pointer;
}
.next{
width: 25px;
height: 48px;
opacity: .8;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
background: url(img/swit.png);
background-position: -56px -5px !important;
position: absolute;
top: 40%;
right: 0;
cursor: pointer;
}
.prev{
width: 25px;
height: 48px;
opacity: .8;
background: url(img/swit.png);
background-position: -4px -5px !important;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
position: absolute;
left: 0;
top: 40%;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<div id="loop">
<img src="img/0.jpg" alt="" id="img"/>
</div>
<ul id="circle">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<div class="next"></div>
<div class="prev"></div>
</div>
</body>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
//使所有的导航背景回到初始值
function back(){
list.css("background",'#ccc' );
console.log(1)
}
var img = $("#img"); // 定义轮播图
var list = $("#circle li"); //定义所有的导航标
var index = 0;
list.eq(index).css("background",'red' ); //使第一个导航的背景为红色
//制作一个定时器
var timer = setInterval(fun,1000);
function fun(){
index++; //循环所有的导航
if(index == 6){ //不间断循环
index = 0;
}
img.prop("src","img/"+index+".jpg"); //改变图片src值 这里因为我的图片就是从0~5命名的(为了方便下面操作) 有需要可以拼接字符串
back(); //使所有的导航背景回到初始值
list.eq(index).css("background",'red' ); //使当前的导航背景为红色
}
list.mouseover(function(){ //鼠标移入触发函数
back(); //先使所有的导航背景回到初始值
$(this).css("background",'red' ); //给当前鼠标移入的导航背景替换颜色(这里的this可以输出一下看看是什么，对下面会好理解)
clearInterval(timer); //清除定时器
index = this.innerHTML-1; //因为img是从 0~5命名的 导航内容是1~6所以减一
img.prop("src","img/"+index+".jpg");
})
list.mouseout(function(){ //鼠标移出触发函数重新开启定时器
timer = setInterval(fun,1000);
})
//制作左右点击触发跳转事件
var next = $(".next"); //定义下一页
var prev = $(".prev"); //定义上一页
next.click(function nex(){ //下一页点击触发效果
index = index+1; //index加1即可
if(index == 6){
index = 0;
}
img.prop("src","img/"+index+".jpg");
clearInterval(timer);
back();
list.eq(index).css("background",'red' );
})
prev.click(function pre(){ //下一页点击触发效果
index = index-1; //index减1即可
if(index == -1){
index = 5;
}
img.prop("src","img/"+index+".jpg");
clearInterval(timer);
back();
list.eq(index).css("background",'red' );
})
next.mouseout(function(){ //鼠标移出事件 继续滚动
clearInterval(timer);
timer = setInterval(fun,1000);
})
prev.mouseout(function(){
clearInterval(timer);
timer = setInterval(fun,1000);
})
</script>
</html>
