使用jquery制作轮播图

CSS布局样式代码

*{padding:0;margin:0;list-style:none;border:0;}
/* 焦点图 */
#show {
	position: relative;
	height: 320px;
	width: 960px;
	margin: 0 auto;
}
#show a {
	float: left;
	display: inline;
}
#show .img {
	position: absolute;
	width: 960px;
	height: 320px;
	overflow: hidden
}
#show .img SPAN {
	position: absolute;
	width: 19999px;
	display: block
}
#show .btns {
	z-index: 10;
	position: absolute;
	width: 960px
}
#show .btns B {
	position: absolute;
	width: 100px;
	display: block;
	height: 14px;
	overflow: hidden;
	top: 295px;
	left: 50%
}
#show .btns B I {
	width: 10px;
	background: #414140;
	float: left;
	height: 10px;
	font-size: 0px;
	overflow: hidden;
	cursor: pointer;
	margin-right: 6px;
	border: #414140 2px solid;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px
}
#show .btns B I:hover {
	background: #a7a7a6
}
#show .btns B I.on {
	background: #3cd2f1;
	cursor: default
}
#show .btns B I.on:hover {
	background: #3cd2f1;
	cursor: default
}
#show .btns S {
	position: absolute;
	WIDTH: 60px;
	display: none;
	height: 80px;
	overflow: hidden;
	top: 130px;
	cursor: pointer
}
#show .btns S I {
	position: absolute;
	width: 60px;
	background: url(../img/btn_show.png);
	height: 160px;
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="../img/btn_show.png");
	_background: none;
}
#show .btns S.prev {
	left: 0px
}
#show .btns S.prev I {
	top: -80px
}
#show .btns S.next {
	right: 0px
}
.show-hover#show .btns S {
	display: block
}
.masks {
	opacity: 0.5;
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	height: 320px;
	position: absolute;
	background: #000;
	overflow: hidden
}

需要下载jquery库文件
jquery官网:http://jquery.com/

js实现动画代码

/* 焦点图 */
$(function(){
    var $root = $('#show'),
        root_w = $root.width();
    var p = $root.find('> div.img > span'),
        n = p.children().length;
    	p.children().eq(0).clone().appendTo(p);
    function onoff(on, off) {
        (on !== -1) && btns.eq(on).addClass('on');
        (off !== -1) && btns.eq(off).removeClass('on');
    }
    function dgo(n, comp) {
        var idx = n > max ? 0 : n;
        onoff(idx, cur);
        cur = idx;
        p.stop().animate({left: -1 * root_w * n}, {duration: dur, complete: comp});
				if(idx == 0 ){p.children().eq(n-1).clone().appendTo('.mk1');}else{$('.mk1').empty()};
    }
    // slast -> 如果播放完最后1张，要如何处理
    //    true 平滑切换到第1张
    var cur = 0,
        max = n - 1,
        pt = 0,
        stay = 3 * 1000, /* ms */
        dur = .3 * 1000, /* ms */
        btns;
    function go(dir, slast) {
        pt = +new Date();
        if (dir === 0) {
            onoff(cur, -1);
            p.css({left: -1 * root_w * cur});
            return;
        }
        var t;
        if (dir > 0) {
            t = cur + 1;
            if (t > max && !slast) {
                t = 0;
            }
            if (t <= max) {
                return dgo(t);
            }
            return dgo(t, function(){
                p.css({left: 0});
            });
        } else {
            t = cur - 1;
            if (t < 0) {
                t = max;
                p.css({left: -1 * root_w * (max + 1)});
                return dgo(t);
            } else {
                return dgo(t);
            }
        }
    }
    btns = $((new Array(n + 1)).join('<i></i>'))
        .each(function(idx, el) {
            $(el).data({idx: idx});
        });
    var pn_btn = $('<s class="prev"><i></i></s><s class="next"><i></i></s>');
    $('<div class="btns"/ >')
        .append(
            $('<b/>')
                .append(btns)
                .delegate('i', 'click', function(ev) {
                    dgo($(this).data('idx'));
                })
                .css({width: n * 20, marginLeft: -10 * n})
        )
        .delegate('s', 'click', function(ev) {
            go($(this).is('.prev') ? -1 : 1, true);
        })
        .append(pn_btn)
        .appendTo($root);

    go(1);
    // 自动播放
    var ie6 = $.browser.msie && $.browser.version < '7.0';
    $root.hover(function(ev) { 
        // $root[(ev.type == 'mouseenter' ? 'add' : 'remove') + 'Class']('show-hover');
        if (ie6) {
            pn_btn[ev.type == 'mouseenter' ? 'show' : 'hide']();
        } else {
            pn_btn.stop()['fade' + (ev.type == 'mouseenter' ? 'In' : 'Out')]('fast');
        }
    });
    if ($root.attr('rel') == 'autoPlay') {
       var si = setInterval(function(){
            var now = +new Date();
            if (now - pt < stay) {
                return;
            }
            go(1, true);
        }, 5000);
			 p.mouseover(function(){
			 	clearInterval(si);
			 })
			 p.mouseout(function(){
					si = setInterval(function(){
		            var now = +new Date();
		            if (now - pt < stay) {
		                return;
		            }
                    go(1, true);
        }, 5000);})
    }
		var wid = $(document.body).width();
		var swid = (wid-960)/2;
		var bwid = root_w * n;
		$('#show').css('width',wid);$('#show .img').css('width',wid);
		$('#show .btns').css('left',swid)
		$('.masks').css('width',swid);$('.mk2').css('right',0);
		$('#show .img span').css(({paddingLeft: swid }))
})();

HTML页面代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>轮播图</title>
		<!--引入CSS布局-->
        <link rel="stylesheet" href="css/slide.css" />
        <!--引入jquery库-->
		<script src="js/jquery-1.12.4.js"></script>
		<!--引入js代码-->
		<script type="text/javascript" src="js/slide.js"></script>
	</head>

	<body>
		<div>

			<div id="show" rel="autoPlay">

				<div class="img">

					<span>

              <a href="#" ><img src="img/adver01.jpg"  width="960px" height="320px"/></a>

              <a href="#" ><img src="img/adver02.jpg"  width="960px" height="320px"/></a>

              <a href="#" ><img src="img/adver03.jpg"  width="960px" height="320px"/></a>

              <a href="#" ><img src="img/adver04.jpg"  width="960px" height="320px"/></a>

              <a href="#" ><img src="img/adver05.jpg"  width="960px" height="320px"/></a>
              
              <a href="#" ><img src="img/adver06.jpg"  width="960px" height="320px"/></a>

          </span>

					<div class="masks mk1"></div>

					<div class="masks mk2"></div>

				</div>

			</div>

		</div>

		<br>

	</body>

</html>

效果图如下