jQuery仿淘宝可切换的焦点轮播图_图片代码_图片轮播_轮播_焦点图

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

淘建站为您提供更多_图片代码_图片轮播_轮播_焦点图，在此特别感谢您对我们的支持与厚爱！

查看演示

演示不了，点击反馈

加入收藏

下载 345 次

打赏作者

觉得不错，可打赏下作者

下载资源

免费共享

特别说明：本站资源来自网友发布分享，仅供学习与参考，请勿用于商业用途，若有侵权请联系删除(272966172@qq.com)。

举报/反馈

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

焦点轮播图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();
});