仿电商平台做的小案例,欢迎批评指正!记得换图片,引入jQuery插件。
布局:
<div id="box">
<div id="l">
<div id="l_t">
<img src="./img/a.jpg" alt="">
</div>
<div id="l_m">
距离20191209还有
</div>
<div id="l_b">
<p>
<span>1</span>
<span>2</span>
<span>3</span>
</p>
</div>
</div>
<div id="c">
<ul>
<li>
<div>
<img src='./img/c.jpg'>
<p>笑的像花一样</p>
</div>
<div>
<img src='./img/c.jpg'>
<p>笑的像花一样</p>
</div>
<div>
<img src='./img/c.jpg'>
<p>笑的像花一样</p>
</div>
<div>
<img src='./img/c.jpg'>
<p>笑的像花一样</p>
</div>
</li>
<li>
<div>
<img src='./img/l.jpg'>
<p>神仙眷侣</p>
</div>
<div>
<img src='./img/l.jpg'>
<p>神仙眷侣</p>
</div>
<div>
<img src='./img/l.jpg'>
<p>神仙眷侣</p>
</div>
<div>
<img src='./img/l.jpg'>
<p>神仙眷侣</p>
</div>
</li>
<li>
<div>
<img src='./img/c.jpg'>
<p>笑的像花一样</p>
</div>
<div>
<img src='./img/c.jpg'>
<p>笑的像花一样</p>
</div>
<div>
<img src='./img/c.jpg'>
<p>笑的像花一样</p>
</div>
<div>
<img src='./img/c.jpg'>
<p>笑的像花一样</p>
</div>
</li>
<li>
<div>
<img src='./img/l.jpg'>
<p>神仙眷侣</p>
</div>
<div>
<img src='./img/l.jpg'>
<p>神仙眷侣</p>
</div>
<div>
<img src='./img/l.jpg'>
<p>神仙眷侣</p>
</div>
<div>
<img src='./img/l.jpg'>
<p>神仙眷侣</p>
</div>
</li>
<li>
<div>
<img src='./img/c.jpg'>
<p>笑的像花一样</p>
</div>
<div>
<img src='./img/c.jpg'>
<p>笑的像花一样</p>
</div>
<div>
<img src='./img/c.jpg'>
<p>笑的像花一样</p>
</div>
<div>
<img src='./img/c.jpg'>
<p>笑的像花一样</p>
</div>
</li>
</ul>
<p class="c_l">
<
</p>
<p class="c_r">
>
</p>
</div>
<div id="r">
<ul>
<li>
<img src="./img/r.jpg" alt="">
</li>
<li>
<img src="./img/a.jpg" alt="">
</li>
<li>
<img src="./img/r.jpg" alt="">
</li>
<li>
<img src="./img/a.jpg" alt="">
</li>
<li>
<img src="./img/r.jpg" alt="">
</li>
</ul>
<ol>
<li class="dk"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</div>
</body>
</html>
样式:
html,body,p,ul,li,ol{
margin: 0;
padding: 0;
list-style: none;
}
#box{
width: 1200px;
height: 300px;
position: relative;
margin: 50px auto;
}
/* 左 */
#box>#l{
width: 20%;
height: 100%;
position: relative;
background: red;
float: left;
}
#box>#l>#l_t{
width: 240px;
height: 200px;
}
#box>#l>#l_t>img{
width: 100%;
height: 100%;
}
#box>#l>#l_m{
width: 240px;
height: 50px;
color: #ffffff;
line-height: 50px;
text-align: center;
font-size: 20px;
}
#box>#l>#l_b{
width: 240px;
height: 50px;
line-height: 50px;
text-align: center;
}
#box>#l>#l_b>p{
padding: 0 30px;
}
#box>#l>#l_b>p>span{
width: 40px;
height: 40px;
display: block;
background: gray;
float: left;
line-height: 40px;
margin-left: 10px;
color: #ffffff;
font-size: 20px;
}
/* 中 */
#box>#c{
width: 60%;
height: 100%;
position: relative;
background: blue;
float: left;
overflow: hidden;
}
#box>#c>ul{
width: 36000px;
height: 300px;
position: absolute;
}
#box>#c>ul>li{
width: 720px;
float: left;
}
#box>#c>ul>li>div{
width: 180px;
height: 300px;
float: left;
}
#box>#c>ul>li>div>img{
width: 175px;
height: 200px;
padding-top: 16px;
padding-left: 3px;
}
#box>#c>ul>li>div>p{
text-align: center;
width: 100%;
height: 50px;
line-height: 50px;
color: #ffffff;
font-size: 20px;
}
#box>#c>.c_l{
width: 50px;
height: 50px;
position: absolute;
background: black;
opacity: 0.8;
z-index: 2;
top: 50%;
left: 0;
color: #ffffff;
font-size: 20px;
line-height: 50px;
text-align: center;
}
#box>#c>.c_r{
width: 50px;
height: 50px;
position: absolute;
background: black;
opacity: 0.8;
z-index: 2;
top: 50%;
right: 0;
color: #ffffff;
font-size: 20px;
line-height: 50px;
text-align: center;
}
/* 右 */
#box>#r{
width: 20%;
height: 100%;
position: relative;
float: left;
overflow: hidden;
}
#box>#r>ul{
width: 1200px;
height: 100%;
position: absolute;
}
#box>#r>ul>li{
width: 240px;
height: 100%;
float: left;
}
#box>#r>ul>li>img{
width: 240px;
height: 100%;
}
#box>#r>ol{
width: 100%;
height: 50px;
line-height: 50px;
position: absolute;
left: 30px;
top: 85%;
}
#box>#r>ol>li{
width: 25px;
height: 25px;
background: #ffffff;
float: left;
border-radius: 50%;
margin-left: 10px;
}
#box>#r>ol>li.dk{
background: red;
}
js逻辑代码:
// 倒计时
function djs(){
var n = new Date('2019-12-09 00:00:00');
var o = new Date();
var dif = n - o;
//时
var hour = parseInt(dif/1000/60/60);
//分
var min = parseInt((dif/1000/60)%60);
//秒
var sec = parseInt((dif/1000)%60%60);
$('#l_b>p>span').eq(0).html(hour)
$('#l_b>p>span').eq(1).html(min)
$('#l_b>p>span').eq(2).html(sec)
}
djs();
var time = setInterval(djs,1000);
// 左切换
var index = 0;
$('.c_l').click(function(){
index++;
if(index > 4){
index = 0;
}
$("#c>ul").animate({ left: -720 * index + "px" }, 800);
})
// 右切换
$('.c_r').click(function(){
index--;
if(index < 0){
index = 4;
}
$("#c>ul").animate({ left: -720 * index + "px" }, 800);
})
// 点击小圆点
$('#r>ol>li').click(function(){
var ind = $(this).index();
$(this)
.addClass("dk")
.siblings()
.removeClass("dk");
$("#r>ul>li")
.eq(ind)
.show()
.siblings()
.hide();
})
//自动轮播功能
var tim = setInterval(auto,2000);
function auto(){
var ind = $('.dk').index();
ind++;
if(ind > 4){
ind = 0;
}
$("#r>ul>li").eq(ind).fadeIn().siblings().fadeOut();
$("#r>ol>li").eq(ind).addClass("dk").siblings().removeClass("dk");
}
//右边轮播图鼠标滑过,轮播图停止。
$('#r').hover(function(){
clearInterval(tim);
},function(){
tim = setInterval(auto,2000);
})