仿淘宝新版首页jquery焦点图

ECSHOP开发中心（）教程介绍一下仿淘宝新版首页jquery焦点图效果：

效果图如下：

1.HTML部分

2.主要CSS部分

.banner{ width:520px; height:280px; position: relative; overflow: hidden; margin-bottom: 0; margin-left: auto; margin-right: auto; margin-top: 10%; }.banner-btn{display:none;}.banner-btn a{display:block;line-height:40px;position:absolute;top:50%;width:40px;height:40px;margin-top:-20px;background-color:#000;opacity:0.3;filter:alpha(opacity=30) color:rgb(255, 255, 255);overflow:hidden;z-index:4;}.prevBtn{left:5px;}.nextBtn{right:5px;}.banner-img{font-size:0;*word-spacing:-1px;/* IE6、7 */ letter-spacing:-3px;position:relative;}.banner-img li{display:inline-block;*display:inline;*zoom:1;/* IE6、7 */ vertical-align:top;letter-spacing:normal;word-spacing:normal;font-size:12px;}.banner-img li img{width:520px;height:280px;}.banner i{background:url(../img/allbg.png) no-repeat;width:15px;height:23px;cursor:pointer;margin:8px 0 0 12px;display:block;}.banner .nextBtn i{background-position:-200px -24px;}.banner .prevBtn i{background-position:-200px 0px;}.banner-circle{position:absolute;left:50%;bottom:15px;height:13px;text-align:center;font-size:0;border-radius:10px;background:rgba(255,255,255,0.3);filter:alpha(opacity:30);}.banner-circle li{border-radius:10px;margin:2px;display:inline-block;display:-moz-inline-stack;vertical-align:middle;zoom:1;}.banner-circle li a{display:block;padding-top:9px;width:9px;height:0;border-radius:50%;background:#B7B7B7;overflow:hidden;}.banner-circle .selected a{background:#F40;}

3.JS部分

首相在html文件中引入jquery文件<script type="text/javascript" src="js/jquery.min.js"></script>

页面中插入的JS

$(function() { var $banner = $(‘.banner’); var $banner_ul = $(‘.banner-img’); var $btn = $(‘.banner-btn’); var $btn_a = $btn.find(‘a’); var v_width = $banner.width(); var page = 1; var timer = null; var btnClass = null; var page_count = $banner_ul.find(‘li’).length; var banner_cir = "<li href=’#’><a></a></li>"; for (var i = 1; i < page_count; i++) { banner_cir += "<li><a href=’#’></a></li>"; } $(‘.banner-circle’).append(banner_cir); var cirLeft = $(‘.banner-circle’).width() * ( – 0.5); $(‘.banner-circle’).css({ ‘marginLeft’: cirLeft }); $banner_ul.width(page_count * v_width); function move(obj, classname) { if (!$banner_ul.is(‘:animated’)) { if (classname == ‘prevBtn’) { if (page == 1) { $banner_ul.animate({ left: -v_width * (page_count – 1) }); page = page_count; cirMove(); } else { $banner_ul.animate({ left: ‘+=’ + v_width }, "slow"); page–; cirMove(); } } else { if (page == page_count) { $banner_ul.animate({ left: 0 }); page = 1; cirMove(); } else { $banner_ul.animate({ left: ‘-=’ + v_width }, "slow"); page++; cirMove(); } } } } function cirMove() { $(‘.banner-circle li’).eq(page – 1).addClass(‘selected’).siblings().removeClass(‘selected’); } $banner.mouseover(function() { $btn.css({ ‘display’: ‘block’ }); clearInterval(timer); }).mouseout(function() { $btn.css({ ‘display’: ‘none’ }); clearInterval(timer); timer = setInterval(move, 3000); }).trigger("mouseout"); $btn_a.mouseover(function() { $(this).animate({ opacity: 0.6 }, ‘fast’); $btn.css({ ‘display’: ‘block’ }); return false; }).mouseleave(function() { $(this).animate({ opacity: 0.3 }, ‘fast’); $btn.css({ ‘display’: ‘none’ }); return false; }).click(function() { btnClass = this.className; clearInterval(timer); timer = setInterval(move, 3000); move($(this), this.className); }); $(‘.banner-circle li’).live(‘click’, function() { var index = $(‘.banner-circle li’).index(this); $banner_ul.animate({ left: -v_width * index }, ‘slow’); page = index + 1; cirMove(); });});

</script>

4.需要的图片，自行解决吧！嘻嘻……

请持续的关注 ECSHOP开发中心（），，我们会定期的给大家分享资源的！！！

一个人负心，或许是因为他的记忆力不好。

相关文章：

你感兴趣的文章：

标签云：