<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ 730px; height: 450px; position: relative; left: 20%; } #loop{ 100%; height: 100%; } #loop img{ 100%; height: 100%; } ul{ height: 50px; position: absolute; left: 20%; bottom: 0; list-style: none; } li{ float: left; 50px; height: 50px; border-radius: 50%; background: #CCCCCC; margin-left: 15px; text-align: center; line-height: 50px; cursor: pointer; } .next{ 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{ 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{
730px;
height: 450px;
position: relative;
left: 20%;
}
#loop{
100%;
height: 100%;
}
#loop img{
100%;
height: 100%;
}
ul{
height: 50px;
position: absolute;
left: 20%;
bottom: 0;
list-style: none;
}
li{
float: left;
50px;
height: 50px;
border-radius: 50%;
background: #CCCCCC;
margin-left: 15px;
text-align: center;
line-height: 50px;
cursor: pointer;
}
.next{
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{
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>