JS輪播圖 ...
JS輪播圖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS輪播圖</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
#center {
width: 800px;
height: 600px;
margin: auto;
background-color: black;
background-image: url("http://imgsrc.baidu.com/forum/pic/item/9e3df8dcd100baa1436c441e4710b912c9fc2ed6.jpg");
}
/*左右箭頭*/
#ul1 {
position: relative;
top: 40%;
}
#ul1 li {
font-size: 80px;
color: white;
}
/*四個點*/
#ul2 {
position: relative;
top: 92%;
}
#ul2 li {
width: 20px;
height: 20px;
border: 3px slateblue solid;
/*透明度*/
opacity: 0.7;
/*將li的邊框設置為圓*/
border-radius: 50%;
float: left;
margin-left: 10px;
position: relative;
left: 30%;
}
#ul1 li:hover {
color: aqua;
}
#ul2 li:hover {
background-color: darkseagreen;
}
</style>
<body>
<div id="center">
<ul id="ul1">
<!--綁定單擊事件的方法，上下翻圖-->
<li><span style="float:left" onclick="previous()"><</span></li>
<li><span style="float: right" onclick="next()">></span></li>
</ul>
<ul id="ul2">
<li class="li_dot" style="background-color: darkseagreen;"></li>
<li class="li_dot"></li>
<li class="li_dot"></li>
<li class="li_dot"></li>
</ul>
</div>
<script type="text/javascript">
img1 = "url('http://imgsrc.baidu.com/forum/pic/item/9e3df8dcd100baa1436c441e4710b912c9fc2ed6.jpg')";
img2 = "url('http://www.datongchun.com/upload/image/20150817101824_89175.jpg')";
img3 = "url('http://img2.imgtn.bdimg.com/it/u=1563165482,1097507544&fm=214&gp=0.jpg')";
img4 = "url('http://hiphotos.baidu.com/%D4%C6%C8%B8%B5%C4%B3%E7%B0%DD%D5%DF/pic/item/c6ba270b9a23e670e9248891.jpg')";
// 定時器，每兩秒播放一次
setInterval(next,2000);
// 計算圖片索引
var count = 1;
//獲取圓點
var li_dot = document.getElementsByClassName("li_dot");
//滑鼠懸停在對應圓點時，顯示對應的圖片
li_dot[0].onmouseenter = function () {count=1;show(count)};
li_dot[1].onmouseenter = function () {count=2;show(count)};
li_dot[2].onmouseenter = function () {count=3;show(count)};
li_dot[3].onmouseenter = function () {count=4;show(count)};
//獲取圖片div
var div_img = document.getElementById("center");
//下一張
function next() {
count += 1;
if (count > 4) {
count = 1;
}
show(count);
}
// 上一張
function previous() {
count -= 1;
if (count < 1) {
count = 4
}
show(count);
}
//清除所有圓點的背景顏色
function clearLiBC() {
for(i=0;i<=3;i++){
//背景顏色透明
li_dot[i].style.backgroundColor="transparent";
}
}
// 顯示對應索引的圖
function show(index) {
switch (index) {
case 1:
div_img.style.backgroundImage = img1;
// 清除所有圓點的背景色
clearLiBC();
// 只給當前圖片對應的圓點設置背景色
li_dot[0].style.backgroundColor = "darkseagreen";
break;
case 2:
div_img.style.backgroundImage = img2;
clearLiBC();
li_dot[1].style.backgroundColor = "darkseagreen";
break;
case 3:
div_img.style.backgroundImage = img3;
clearLiBC();
li_dot[2].style.backgroundColor = "darkseagreen";
break;
case 4:
div_img.style.backgroundImage = img4;
clearLiBC();
li_dot[3].style.backgroundColor = "darkseagreen";
break;
}
}
</script>
</body>
</html>
