仿淘宝详情页轮播图效果实现
仿淘宝详情页轮播图效果实现
图片路径记得修改、js源文件记得导入!
<!doctype html>
<head>
<meta charset="UTF-8">
<title>jQuery图片轮换效果</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
text-align:center;
}
#banner{
width:730px;
height:454px;
margin:50px auto;
position:relative;/*相对定位,相对于.btn按钮*/
text-align:left;
}
.pic image {
display:block;/*默认有图片不显示*/
position:absolute;/*绝对定位.对应的是.pic这个div*/
top:0px;
left:0px;
}
.pic a{
display:none;
}
.pic{ /*专门显现图片区*/
position:relative;/*相对定位.对应.pic img*/
}
.btn{
position:absolute;/*绝对定位相对于banner div*/
bottom:5px;
right:290px;
}
.btn ul li{
list-style-type:none;
width:18px;
height:18px;
float:left;
text-align:center;
cursor:pointer;/*鼠标移动变手指状态*/
margin-left:65px;
}
.btn ul li.one{
background-color:#ff9966;
}
.btn ul li img{
width: 70px;
height: 70px;
}
</style>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function(){
$("#all li").mouseover(function(){//鼠标进入离开事件
$(this).css("background-color","#ff00ff").siblings().css("background-color","white");
$(this).css({"background-color":"red","font-size":"9px"}).siblings().hide();
});
$(window).scroll(function(){//鼠标滚动事件
var _top=$(window).scrollTop();//获得鼠标滚动的距离
});
//手动播放图片
$(".btn ul li").hover(function(){
$(this).addClass("one").siblings().removeClass("one");
index=$(this).index();
i=index;
$(".pic a").eq(index).stop().fadeIn(500).show().siblings().stop().fadeIn(500).hide();
});
//自动播放图片
var i=0;
var t=setInterval(autoplay,1000);
function autoplay(){
i++;
if(i>5)i=0;
$(".btn ul li").eq(i).addClass("one").siblings().removeClass("one");
$(".pic a").eq(i).stop().fadeIn(500).show().siblings().stop().fadeIn(500).hide();
}
$("#banner").hover(function(){
clearInterval(t);
},function(){
t=setInterval(autoplay,1000);
});
});
</script>
</head>
<body>
<!--<div style="width:600px;height:900px;background-color:#ffcc66">ttt</div>-->
<div id="banner">
<div class="pic">
<a href="#" style="display:block"><img src="img/portfolio-image-2.jpg"/></a>
<a href="#"><img src="img/portfolio-image-3.jpg"/></a>
<a href="#"><img src="img/portfolio-image-4.jpg"/></a>
</div>
<div class="btn">
<ul>
<li class="one"><img src="img/portfolio-image-2.jpg"/></li>
<li><img src="img/portfolio-image-3.jpg"/></li>
<li><img src="img/portfolio-image-4.jpg"/></li>
</ul>
</div>
</div>
</body>
</html>