自从解决了定时器的问题后,什么都好弄了
这是仿苏宁商城banner的,当然我没弄得那么好啦,但是我想就是那个缩略图,我没弄好吧,方法我猜想是通过把所有li都放进数组,然后通过遍历,就可以做出相应的效果吧;
html
<div class="banner"> <div class="slider"> <a href="javascript:;" class="prev"><</a> <a href="javascript:;" class="next">></a> <ul> <li style="background:#F6F6F6"> <a href=""> <img src="./首页-海汇网_files/banner.png" alt=""></a> </li> <li style="background:#2f2f2f"> <a href=""> <img src="./首页-海汇网_files/banner1.png" alt=""></a> </li> <li style="background:#222"> <a href=""> <img src="./首页-海汇网_files/banner2.png" alt=""></a> </li> </ul> </div> <div class="others"> <div class="pagination"></div> </div> </div>
<script type="text/javascript">
$('.banner').fadeTab({
'pageNum':true
});
</script>
css
.banner .slider{ 100%; position: relative; height:450px; overflow: hidden; } .banner .slider li{ display: block; /* background:#999;*/ position: absolute; z-index: 60; top: 0; left: 0; opacity: 1; 100%; height: 450px; } .banner .slider li a{ position: absolute; left: 50%; 1000px; background:#666; height: 450px; margin-left: -500px; } .banner .others{ 1000px; margin:0 auto; height:30px; z-index: 1000; bottom:30px; position: relative; } .banner .slider .prev{ 50px; height:50px; display: none; z-index: 1000; position: absolute; left:100px; top:50%; border-radius: 100%; line-height: 50px; margin-top:-20px; background:#333; opacity: 0.5; color:#fff; font-size: 20px; } .banner .slider .next{ 50px; z-index: 1000; height:50px; display: none; position: absolute; right:100px; line-height: 50px; border-radius: 100%; top:50%; margin-top:-20px; background:#333; opacity: 0.5; color:#fff; font-size: 20px; } .banner .others .pagination{ bottom: 0px; height:30px; z-index: 1001; text-align: center; line-height: 30px; font-size: 16px; margin:0 auto; } .banner .others .pagination i{ display: inline-block; 10px; height:10px; cursor: pointer; background:#fff; margin:5px; border-radius: 50%; opacity: 0.8; font-size: 0; } .banner .others .pagination i.on{ opacity: 1; 20px; vertical-align: top; margin-top:0px; height:20px; font-style: normal; font-size: 12px; text-decoration: none; text-align: center; line-height: 20px; background:#fff; } .banner .others .pagination i.active{ opacity: 1; 10px; margin-top:0px; height:10px; background:#fff; }
jquery
/** * * @authors Your Name (you@example.org) * @date 2015-09-13 01:54:25 * @version $Id$ */ (function($) { $.fn.fadeTab = function(options) { var settings = $.extend({ "autoPlay": true, 'time': 3000, 'fadeInSpeed':800, 'fadeOutSpeed':400, 'pageNum':false, 'pageClassOn':'on', 'pageClassActive':'active' }, options); return this.each(function() { var n = 0; var t; var pageIndex; var b = true; var $this = $(this); var $slider = $this.find('.slider'); var $others = $this.find('.others'); var pageLow = $others.find('.pagination'); var prevBtn = $slider.find('.prev'); var nextBtn = $slider.find('.next'); var sliderLi = $slider.find('li'); var count = sliderLi.length; var time = 3000; var pageClass; //初始化 var intFade = function() { for (j = 0; j < sliderLi.length; j++) { var pi = '<i></i>'; pageLow.append(pi); }; pageIndex = $others.children('.pagination').find('i'); if(settings.pageNum == true){ pageClass = settings.pageClassOn; pageIndex.eq(0).addClass(pageClass).text(1); }else{ pageClass = settings.pageClassActive; pageIndex.eq(0).addClass(pageClass); } sliderLi.not(':first-child').hide(); } intFade(); //回调,防止重复点击造成的轮播延迟的情况 var callBack = function() { b = true; } //分页 var pageTab = function(i, fn) { sliderLi.eq(i).stop(false, true).fadeIn(800).siblings().fadeOut(400); pageIndex.eq(i).addClass(pageClass).siblings().removeClass(pageClass); if(settings.pageNum == true){ pageIndex.eq(i).text(i + 1); } //使用回调的方法,让每次动画执行完毕后,再让b = true; if (fn) { setTimeout(fn, 800) } }; //上一张 var fadePrev = function() { if (!b) { return; } b = false; if (n <= 0) { n = count - 1; } else { n--; } pageTab(n, callBack); }; //下一张 var fadeNext = function() { if (!b) { return; }; b = false; if (n >= sliderLi.length - 1) { n = 0; } else { n++; } pageTab(n, callBack); }; //圆点点击 pageIndex.click(function() { if (!b) { return; } b = false;; var i = $(this).index(); //获取Li元素内的值,即012 n = i; pageTab(n, callBack); }); prevBtn.on('click', fadePrev); nextBtn.on('click', fadeNext); //鼠标悬停停止 $this.hover(function() { if (t) { clearInterval(t) }; prevBtn.show(); nextBtn.show(); }, function() { prevBtn.hide(); nextBtn.hide(); if(settings.autoPlay){ t = setInterval(showAuto, settings.time); } }); //自动播放 function showAuto() { if (n >= sliderLi.length - 1) { n = 0; } else { n++; } pageTab(n, callBack); }; if(settings.autoPlay){ t = setInterval(showAuto, settings.time); } }) } })(jQuery)