<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<style>
#lunbobox {
width:500px;
height:300px;
position:relative;
}
.lunbo {
width:500px;
height:300px;
}
.lunbo img {
width:500px;
height:300px;
position:absolute;
top:0px;
left:0px;
}
#lunbobox ul {
width:285px;
position:absolute;
bottom:10px;
right:0px;
z-index:5;
}
#lunbobox ul li {
cursor:pointer;
width:10px;
height:4px;
border:1px solid #cccccc;
float:left;
list-style:none;
background:#cccccc;
text-align:center;
margin:0px 5px 0px 0px;
}
#toleft {
display:none;
width:30px;
height:100px;
font-size:40px;
line-height:100px;
text-align:center;
color:#f4f4f4;
/*background:#cccccc;
*/
/*background:url("../images/toleft.jpg")no-repeat center;
*/
position:absolute;
top:90px;
left:12px;
cursor:pointer;
z-index:99;
opacity:0.4;
}
#toright {
display:none;
width:30px;
height:100px;
font-size:40px;
line-height:100px;
text-align:center;
color:#f4f4f4;
/*background:#cccccc;
*/
position:absolute;
top:90px;
right:0px;
cursor:pointer;
z-index:99;
opacity:0.4;
}</style>
</head>
<body>
<div class="middle_right">
<div id="lunbobox">
<div id="toleft">
<</div>
<div class="lunbo">
<a href="#"><img src="images/bangcheng.png"></a>
<a href="#"><img src="images/bangcheng.png"></a>
<a href="#"><img src="images/bangcheng.png"></a>
</div>
<div id="toright">></div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<span></span>
</div>
</div>
<script>
///轮播
$(function() {
//$("#toright").hide();
//$("#toleft").hide();
$('#toright').hover(function() {
$("#toleft").hide()
}, function() {
$("#toleft").show()
})
$('#toleft').hover(function() {
$("#toright").hide()
}, function() {
$("#toright").show()
})
})
var t;
var index = 0;
/////自动播放
t = setInterval(play, 1000)
function play() {
index++;
if (index > 2) {
index = 0
}
// console.log(index)
$("#lunbobox ul li").eq(index).css({
"background": "#999",
"border": "1px solid #ffffff"
}).siblings().css({
"background": "#cccccc",
"border": ""
})
$(".lunbo a ").eq(index).fadeIn(1000).siblings().fadeOut(1000);
};
///点击鼠标 图片切换
$("#lunbobox ul li").click(function() {
//添加 移除样式
//$(this).addClass("lito").siblings().removeClass("lito"); //给当前鼠标移动到的li增加样式 且其余兄弟元素移除样式 可以在样式中 用hover 来对li 实现
$(this).css({
"background": "#999",
"border": "1px solid #ffffff"
}).siblings().css({
"background": "#cccccc"
})
var index = $(this).index(); //获取索引 图片索引与按钮的索引是一一对应的
// console.log(index);
$(".lunbo a ").eq(index).fadeIn(1000).siblings().fadeOut(1000); // siblings 找到 兄弟节点(不包括自己）
});
/////////////上一张、下一张切换
$("#toleft").click(function() {
index--;
if (index <= 0) //判断index<0的情况为：开始点击#toright index=0时 再点击 #toleft 为负数了 会出错
{
index = 2
}
console.log(index);
$("#lunbobox ul li").eq(index).css({
"background": "#999",
"border": "1px solid #ffffff"
}).siblings().css({
"background": "#cccccc"
})
$(".lunbo a ").eq(index).fadeIn(1000).siblings().fadeOut(1000); // siblings 找到 兄弟节点(不包括自己）必须要写
}); // $("#imgbox a ")获取到的是一个数组集合 。所以可以用index来控制切换
$("#toright").click(function() {
index++;
if (index > 2) {
index = 0
}
console.log(index);
$(this).css({
"opacity": "0.5"
})
$("#lunbobox ul li").eq(index).css({
"background": "#999",
"border": "1px solid #ffffff"
}).siblings().css({
"background": "#cccccc"
})
$(".lunbo a ").eq(index).fadeIn(1000).siblings().fadeOut(1000); // siblings 找到 兄弟节点(不包括自己）
});
$("#toleft,#toright").hover(function() {
$(this).css({
"color": "black"
})
},
function() {
$(this).css({
"opacity": "0.3",
"color": ""
})
})
///
///////鼠标移进 移出
$("#lunbobox ul li,.lunbo a img,#toright,#toleft ").hover(
////////鼠标移进
function() {
$('#toright,#toleft').show()
clearInterval(t);
},
///////鼠标移开
function() {
//$('#toright,#toleft').hide()
//alert('aaa')
t = setInterval(play, 3000)
function play() {
index++;
if (index > 2) {
index = 0
}
$("#lunbobox ul li").eq(index).css({
"background": "#999",
"border": "1px solid #ffffff"
}).siblings().css({
"background": "#cccccc"
})
$(".lunbo a ").eq(index).fadeIn(1000).siblings().fadeOut(1000);
}
})</script>
</body>
</html>
