jQuery仿淘宝可切换的焦点轮播图

本文用简短的jQuery代码来实现淘宝首页焦点图切换，支持时间设置，左右按钮控制。你可以试试多个焦点图轮播效果。

分类：图片代码 > 图片轮播难易：初级

查看演示下载资源下载积分： 20 积分

焦点轮播图html代码

<div class="banner">
    <div class="banner-btn">
        <a href="javascript:;" class="prevBtn"><i></i></a>
        <a href="javascript:;" class="nextBtn"><i></i></a>
    </div>
    <ul class="banner-img">
        <li><a href="#"><img src="img/1.jpg"></a></li>
        <li><a href="#"><img src="img/2.jpg"></a></li>
        <li><a href="#"><img src="img/3.jpg"></a></li>
        <li><a href="#"><img src="img/4.jpg"></a></li>
        <li><a href="#"><img src="img/5.jpg"></a></li>
        <li><a href="#"><img src="img/6.jpg"></a></li>
    </ul>
    <ul class="banner-circle"></ul>
</div>

初始化变量

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 class='selected' href='#'><a></a></li>";
for (var i = 1; i < page_count; i++) {
    //动态添加小圆点
    banner_cir += "<li><a href='#'></a></li>";
}
$('.banner-circle').append(banner_cir);

点击移动切换图片

$('.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();
});