无缝轮播
html部分：
<body>
<div class="box">
<div class="show">
<div class="list">
<ul class="clearfix oraign">
<li>
<img src="img/1.jpg" />
<div class="text_box">
<p>2016冬装</p>
<h3>韩庚同款</h3>
<button>了解更多</button>
</div>
</li>
<li>
<img src="img/2.jpg" />
<div class="text_box">
<p>2016冬装</p>
<h3>商务型格</h3>
<button>了解更多</button>
</div>
</li>
<li>
<img src="img/3.jpg" />
<div class="text_box">
<p>2016冬装</p>
<h3>特惠款</h3>
<button>了解更多</button>
</div>
</li>
<li>
<img src="img/4.jpg" />
<div class="text_box">
<p>2016冬装</p>
<h3>韩庚同款</h3>
<button>了解更多</button>
</div>
</li>
<li>
<img src="img/5.jpg" />
<div class="text_box">
<p>2016冬装</p>
<h3>商务型格</h3>
<button>了解更多</button>
</div>
</li>
<li>
<img src="img/6.jpg" />
<div class="text_box">
<p>2016冬装</p>
<h3>特惠款</h3>
<button>了解更多</button>
</div>
</li>
<li>
<img src="img/7.jpg" />
<div class="text_box">
<p>2016冬装</p>
<h3>韩庚同款</h3>
<button>了解更多</button>
</div>
</li>
<li>
<img src="img/8.jpg" />
<div class="text_box">
<p>2016冬装</p>
<h3>商务型格</h3>
<button>了解更多</button>
</div>
</li>
<li>
<img src="img/9.jpg" />
<div class="text_box">
<p>2016冬装</p>
<h3>特惠款</h3>
<button>了解更多</button>
</div>
</li>
</ul>
</div>
</div>
<div class="prev"><</div>
<div class="next">></div>
</div>
</body>
css部分：
.clearfix:after{clear:both; height:0; visibility:hidden; content:"."; display:block;}
.box{width: 1095px; padding: 20px 0 20px 39px; margin: 50px; border: 1px solid #ccc; position: relative;}
.box .show{width: 1095px; height: 506px; position: relative; z-index: 10; overflow: hidden;}
.box .show .list{width:6588px; position: absolute; left: 0px; top: 0;}
.box .show .list ul{float: left;}
.box .show .list li{width: 327px; float: left; margin-right: 39px; position: relative;}
.box .show .list li img{display: block; width: 100%;}
.box .next,.box .prev{height: 30px; width: 30px; position: absolute; top: calc(50% - 15px); color: #000000; font-weight: bold; font-size: 30px; line-height:30px; z-index: 1000; cursor: pointer;}
.box .next{right: 0;}
.box .prev{left: 0;}
.box .text_box{width: 100%; background: rgba(255,255,255,0.6); position: absolute; left: 0; bottom: 81px;}
.box .text_box p{font-size: 16px; text-align: center; color: #3d3d3d; line-height: 34px; font-family: 黑体;}
.box .text_box h3{font-size: 24px; line-height: 24px; color: #3d3d3d; text-align: center; font-weight: 100; font-family: 微软雅黑;}
.box .text_box button{display: block; line-height: 26px; font-size: 14px; color: #3d3d3d; border: 1px solid #898989; width: 115px; margin: 3px auto 28px auto;background: rgba(255,255,255,0.6);}
.box .text_box button:hover{background: red; color: #ffffff; cursor: pointer;}
jq部分：
$(function(){
var num=0;
var $width=366; // 每个li的宽度
$(".oraign").clone().appendTo('.list') //将ul在复制一份，放在class为.list的div里面
$('.next').click(function(){
if( !$('.list').is(":animated") ){ //判断class为.list的div目前是否在进行动画
if($('.list').css('left')=='-3294px'){
$('.list').css({left:'-0px'},500) //将class为.list的div重新定位，使它与前一步的图片完全重合，做到天衣无缝
}
$('.list').stop(true,true).animate({left:'-='+$width},500)
}
})
$('.prev').click(function(){
if( !$('.list').is(":animated") ){
if($('.list').css('left')=='0px'){
$('.list').css({left:'-3294px'},500)
}
$('.list').stop(true,true).animate({left:'+='+$width},500)
}
})
})
浙公网安备 33010602011771号