HTML
<!--content--> <ul class="slides"> <li> <a href="javascript:void(0)"> <img src="images/n-2.jpg" class="slide-img"> <p class="slide-info">艺术学院工会</p> <div class="img-mask"></div> </a> <p class="slide-title">中国美术学院工会组织教职工开展登山、健步走活动</p> </li> <li> <a href="javascript:void(0)"> <img src="images/i1.jpg" class="slide-img"> <p class="slide-info">艺术学院工会</p> <div class="img-mask"></div> </a> <p class="slide-title">中国美术学院工会组织教职工开展登山、健步走活动</p> </li> <li> <a href="javascript:void(0)"> <img src="images/n-3.jpg" class="slide-img"> <p class="slide-info">艺术学院工会</p> <div class="img-mask"></div> </a> <p class="slide-title">中国美术学院工会组织教职工开展登山、健步走活动</p> </li> <li> <a href="javascript:void(0)"> <img src="images/n-4.jpg" class="slide-img"> <p class="slide-info">艺术学院工会</p> <div class="img-mask"></div> </a> <p class="slide-title">中国美术学院工会组织教职工开展登山、健步走活动</p> </li> </ul> <!--control btn--> <div id="left-btn" class="img-btn"></div> <div id="right-btn" class="img-btn"></div> <ol class="slide-control"> <li class="iconfont icon-zuojiantou-copy"></li> <li class="iconfont icon-jiantou"></li> </ol>
CSS/LESS
.slides { width: 100%; height: 383px; position: relative; li { -webkit-transition: all .45s; -moz-transition: all .45s; -ms-transition: all .45s; -o-transition: all .45s; transition: all .45s; .slide-img, .slide-info, .slide-title, .img-mask { -webkit-transition: all .45s; -moz-transition: all .45s; -ms-transition: all .45s; -o-transition: all .45s; transition: all .45s; } .slide-img { display: block; width: 100%; height: auto; min-height: 100%; } .slide-info { background: #2e79bf; color: #fff; font-size: 16px; padding: 7px 20px; position: absolute; left: 50%; bottom: 28px; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); opacity: 0; } .slide-title { width: 543px; margin: 0 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #474747; text-align: center; margin-top: 11px; opacity: 0; } .img-mask { width: 100%; height: 100%; background: rgba(255, 255, 255, 0.5); position: absolute; top: 0; left: 0; } } .slide-li-focus { .slide-info { opacity: 1; } .slide-title { opacity: 1; } .img-mask { background: rgba(255, 255, 255, 0); } } } .slide-control { width: 623px; margin: 0 auto; margin-top: 6px; li { color: #474747; font-size: 30px; float: left; cursor: pointer; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; &:hover { color: #2e79bf; } } .icon-jiantou { float: right; } } .img-btn { width: 290px; height: 308px; position: absolute; z-index: 200; top: 106px; cursor: pointer; } #right-btn { right: 0; }
JS
slide: function () { var slide_box = $('.slides'); var box_width = slide_box.width(); var slide_li = slide_box.children('li'); var li_width = 500; var li_height = 308; var li_length = slide_li.length; var li_focus_height = 383; var li_focus_width = 623; var click_num = 1;//点击次数 //初始化样式 slide_box.children('li').eq(1).addClass('slide-li-focus'); //初始化轮播样式 function init() { var focus_li = $('.slide-li-focus'); slide_li.css({ 'position': 'absolute', 'width': li_width, 'height': li_height, 'top': (li_focus_height - li_height) / 2, 'left': (box_width / 2 - li_width / 2), 'z-index': 10, 'opacity': 0 }); focus_li.css({ 'top': 0, 'width': li_focus_width, 'height': li_focus_height, 'left': (box_width / 2 - li_focus_width / 2), 'z-index': 288, 'opacity': 1 }); //如果是第一张 if (focus_li.index() === 0) { slide_box.children('li').eq(li_length - 1).css({ 'left': 0, 'z-index': 90, 'opacity': 1 }); focus_li.next().css({ 'left': (box_width - li_width), 'z-index': 100, 'opacity': 1 }); //如果是最后一张 } else if (focus_li.index() === (li_length - 1)) { focus_li.prev().css({ 'left': 0, 'z-index': 100, 'opacity': 1 }); slide_box.children('li').eq(0).css({ 'left': (box_width - li_width), 'z-index': 90, 'opacity': 1 }); } else { focus_li.prev().css({ 'left': 0, 'z-index': 100, 'opacity': 1 }); focus_li.next().css({ 'left': (box_width - li_width), 'z-index': 100, 'opacity': 1 }); } } init(); var left_btn = $('.icon-zuojiantou-copy'); var right_btn = $('.icon-jiantou'); left_btn.on('click', function () { click_left(); }); right_btn.on('click', function () { click_right(); }); $('#left-btn').on('click', function () { click_left(); }); $('#right-btn').on('click', function () { click_right(); }); //点击right function click_right() { if (click_num === (li_length - 1)) { slide_box.children('li').eq(0).addClass('slide-li-focus').siblings('li').removeClass('slide-li-focus'); click_num = 0; } else { $('.slide-li-focus').removeClass('slide-li-focus').next().addClass('slide-li-focus'); click_num++; } init(); } //点击left function click_left() { if (click_num === 0) { slide_box.children('li').eq(li_length - 1).addClass('slide-li-focus').siblings('li').removeClass('slide-li-focus'); click_num = li_length - 1; } else { $('.slide-li-focus').removeClass('slide-li-focus').prev().addClass('slide-li-focus'); click_num--; } init(); } //自动轮播 var timer = setInterval(click_right, 3000); //鼠标移入暂停 $('.activity').on('mouseenter', function () { clearInterval(timer) }); //移出恢复 $('.activity').on('mouseleave', function () { timer = setInterval(click_right, 3000); }); },