代码如下：
<div class="bannerbox">
<div id="SKITTER clearfix" class="SKITTER">
<div class="banner-in clearfix">
<ul class="clearfix imgList">
<li ><a href="#" target="_blank"></a></li>
<li ><a href="#" target="_blank"></a></li>
<li ><a href="#" target="_blank"></a></li>
<li ><a href="#" target="_blank"></a></li>
<li ><a href="#" target="_blank"></a></li>
</ul>
</div>
<ol class="buttons">
<!-- <li class="current"><a href="#"></a></li>
<li class=""><a href="#"></a></li>
<li class=""><a href="#"></a></li>
<li class=""><a href="#"></a></li>
<li class=""><a href="#"></a></li> 此处需要动态添加所以注释掉-->
</ol>
<div class="margin-box">
<div class="bannerBTN east "></div>
<div class="bannerBTN west"></div>
</div>
</div>
</div>
css:
.bannerbox{
/*margin: 100px 0px;*/
height:620px;
}
.SKITTER {
position: relative;
overflow: hidden;
}
.banner-in {
height: 620px;
overflow: hidden;
}
.imgList{
position: relative;
}
.imgList li{
width: 100%;
left:0;
top:0;
position:absolute;
height: 620px;
}
.imgList li:nth-child(1){
background: url(../img/bannerlist/banner1.jpg) no-repeat scroll center center / cover;
}
.imgList li:nth-child(2){
background: url(../img/bannerlist/banner2.jpg) no-repeat scroll center center / cover;
}
.imgList li:nth-child(3){
background: url(../img/bannerlist/banner3.jpg) no-repeat scroll center center / cover;
}
.imgList li:nth-child(4){
background: url(../img/bannerlist/banner4.jpg) no-repeat scroll center center / cover;
}
.imgList li:nth-child(5){
background: url(../img/bannerlist/banner5.jpg) no-repeat scroll center center / cover;
}
.buttons {
height: 10px;
position: absolute;
left: 50%;
top:575px;
border-bottom: 35px;
margin-left: -220px;
z-index: 1;
}
.buttons li{
cursor: pointer;
}
.SKITTER .buttons li {
display: inline-block;
width: 70px;
height: 5px;
float: left;
margin-right: 5px;
background: white;
opacity: 0.5;
z-index: 1;
}
.SKITTER .buttons li.current{
filter: alpha(opacity=50);
opacity: 1;
}
.margin-box{
width: 94%;
position: absolute;
left: 4%;
top: 50px;
}
.bannerBTN {
width: 32px;
height: 50px;
margin-top: 210px;
}
.east {
float: left;
background: url(../img/to_froward.png) no-repeat;
cursor: pointer;
}
.west {
float: right;
background: url(../img/to_next.png) no-repeat;
cursor: pointer;
}
jquery:
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
// 首页置顶菜单
$(function(){
var $li = $('.imgList li');
var len = $li.length;//5张
var $prev = $('.east');//左按钮
var $next = $('.west');//右按钮
var nextli = 0;//将要运动过来的li
var nowli = 0;//当前要离开的li
var timer = null;
var hei=$(window).width() //获取当前文档宽度
//除第一个li，都定位到右侧
$li.not(':first').css({left:hei});
//动态创建切换条
$li.each(function(index){
//创建li
var $sli = $('<li></li>');
//第一个li添加选中样式
if(index == 0){
$sli.addClass('current');
}
//将切换条的li添加到ul中
$sli.appendTo('.buttons');
})
$buttons = $('.buttons li');
// alert($buttons.length);//5个切换条
//切换条的点击事件
$buttons.click(function() {
nextli = $(this).index();
//当点击当前张的切换条时，不做任何操作，防止跳变的Bug
if(nextli == nowli){
return;
}
move();
$(this).addClass('current').siblings().removeClass('current');
});
//左按钮的点击事件
$prev.click(function() {
nextli--;
move();
//改变切换条样式
$buttons.eq(nextli).addClass('current').siblings().removeClass('current');
});
//右按钮的点击事件
$next.click(function() {
nextli++;
move();
//改变切换条样式
$buttons.eq(nextli).addClass('current').siblings().removeClass('current');
});
//针对外层的bannerbox做鼠标进入和离开事件，因为鼠标指针有可能进入到左右翻页和切换条的范围
//mouseenter使鼠标进入子元素也能清除定时器
$('.bannerbox').mouseenter(function() {
clearInterval(timer);
});
$('.bannerbox').mouseleave(function() {
timer = setInterval(autoplay, 3000);
});
//定时器循环自动播放
timer = setInterval(autoplay, 3000);
//自动播放的逻辑与点击下一张是相同的
function autoplay(){
nextli++;
move();
//改变切换条样式
$buttons.eq(nextli).addClass('current').siblings().removeClass('current');
}
function move(){
//向右走到第一张，再继续走时
if(nextli < 0){
nextli = len - 1;//将要来的是最后一张
nowli = 0;//要离开的是第一张
$li.eq(nextli).css({left:-$(document).width()});//把最后一张定位到左侧，准备进入
$li.eq(nowli).stop().animate({left: $(document).width()});//离开的第一张走到右侧
$li.eq(nextli).stop().animate({left: 0});//马上要进来的最后一张走进来
nowli = nextli;//要离开的赋值为刚进入的最后一张
return;//下边是正常情况的，不执行，直接返回
}
//向左走到最后一张，再继续走时
if(nextli > len - 1){
nextli = 0;//将要来的是第一张
nowli = len - 1;//要离开的是最后一张
$li.eq(nextli).css({left:$(document).width()});//把第一张定位到右侧，准备进入
$li.eq(nowli).stop().animate({left: -$(document).width()});//离开的最后一张走到左侧
$li.eq(nextli).stop().animate({left: 0});//马上要进来的第一张走进来
nowli = nextli;//要离开的赋值为刚进入的第一张
return;//下边是正常情况的，不执行，直接返回
}
if(nextli > nowli){
//马上要进来的这张瞬间移动到右边
$li.eq(nextli).css({left:$(document).width()});
//当前这张离开
$li.eq(nowli).stop().animate({left: -$(document).width()});
}else{
//马上要进来的这张瞬间移动到左边
$li.eq(nextli).css({left:-$(document).width()});
//当前这张离开
$li.eq(nowli).stop().animate({left: $(document).width()});
}
//马上要进来的这张走到0的位置
$li.eq(nextli).stop().animate({left: 0});
nowli = nextli;
}
})
效果如下：
DHC中国官方网站 100 日本原装进口化妆品品牌.png
网友评论