<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>京東輪播圖</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.slider {
height: 340px;
width: 790px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.slider ul{
width: 7110px;
}
.slider ul li {
float: left;
/*position: absolute;
display: none;*/
}
.slider ul li.blo {
display: block;
}
.arrow {
display: none;
}
.slider:hover .arrow {
display: block;
}
.arrow-left,
.arrow-right {
font-family: "SimSun", "宋體";
width: 30px;
height: 60px;
background-color: rgba(0, 0, 0, 0.1);
position: absolute;
top: 50%;
margin-top: -30px;
cursor: pointer;
text-align: center;
line-height: 60px;
color: #fff;
font-weight: 700;
font-size: 30px;
}
.arrow-left:hover,
.arrow-right:hover {
background-color: rgba(0, 0, 0, .5);
}
.arrow-left {
left: 0;
}
.arrow-right {
right: 0;
}
.slider ol {
position: absolute;
right: 265px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.slider ol li {
float: left;
width: 20px;
height: 20px;
background: #fff;
border-radius:50%;
margin-left: 10px;
cursor: pointer;
}
/* .slider ol li.current {
background: #DB192A;
}*/
</style>
</head>
<body>
<div class="slider">
<ul>
<li class="blo"><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="images/1.jpg" alt=""></a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="images/2.jpg" alt=""></a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="images/3.jpg" alt=""></a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="images/4.jpg" alt=""></a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="images/5.jpg" alt=""></a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="images/6.jpg" alt=""></a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="images/7.jpg" alt=""></a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="images/8.jpg" alt=""></a></li>
</ul>
<ol>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<!--箭頭-->
<div class="arrow">
<span class="arrow-left"><</span>
<span class="arrow-right">></span>
</div>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script>
var index=0;
//左箭頭
$(".arrow-left").click(function () {
index--;
if(index==-1){
index=$(".slider>ul>li").length-1;
}
$(".slider>ul>li").eq(index).fadeIn().siblings().fadeOut();
});
//右箭頭
$(".arrow-right").click(function () {
index++;
if(index== $(".slider>ul>li").length){
index=0;
}
$(".slider>ul>li").eq(index).fadeIn().siblings().fadeOut();
});
//小圓點
$(".slider>ol>li").mouseenter(function () {
var index= $(this).index();
console.log($(this));
$(this).toggleClass("current").siblings().removeClass("current");
$(".slider>ul>li").eq(index).addClass("blo").siblings().removeClass("blo");
// $(".slider>ul").stop().animate({"left":-790*index+"px"},1500);
});
$(".slider>ol>li").mouseleave(function () {
$(this).css("backgroundColor","");
});
//動畫
function move() {
index++;
$(".slider>ol>li").eq(index).css("backgroundColor","red").siblings("li").css("backgroundColor","");
$(".slider>ul").animate({"margin-left":"-"+790*index+"px"},1500, function () {
if(index==$(".slider>ul>li").length){
index=0;
$(".slider>ul").animate({"margin-left":"0px"},0);
}
});
}
setInterval(move,1500);
</script>
</body>
</html>
