[Jquery]焦点图轮播效果

$(function(){
    var $next=$(".right");
    var $prev=$(".left");
    var $list_num=$(".list-num a");
    var $banner=$(".banner");
    var $list_banner=$(".list-banner");
    var index=1;
    var timer;
    var $list_img_f=$(".list-banner li:first");
    var $list_img_l=$(".list-banner li:last");
    $list_img_f.clone(true).appendTo($list_banner);
    $list_img_l.clone(true).prependTo($list_banner);
    
    function showDot($obj){
        $obj.addClass("hover").siblings().removeClass("hover");    
    }
    
    function startMove(i){
        $list_banner.stop().animate({left:-i*624},300,function(){
            if(i<1){
                showDot($list_num.eq(3));
            }
            else if(i>4){
                showDot($list_num.eq(0));
            }
            else{
                showDot($list_num.eq(i-1));
            }
            if(i<1){
                $list_banner.css("left",-2496);
                index=4;
            }
            else if(i>4){
                $list_banner.css("left",-624);
                index=1;
            }
        });
        
    }
    function autoPlay(){
        timer=setInterval(function(){
            $next.click();
        },2000);
    }
    autoPlay();
    $next.click(function(){
        if(!$list_banner.is(":animated")){           //如果先index++再执行startMove(index);会有点问题,点的快某个点会跳过
            startMove(++index);
        }
    });
    $prev.click(function(){
        if(!$list_banner.is(":animated")){
            startMove(--index);
        }
    });
    $list_num.click(function(){
        var i=$(this).index()+1;
        index=i;
        startMove(i);
    });
});

[Jquery]焦点图轮播效果

时间: 2024-10-03 00:08:53

[Jquery]焦点图轮播效果的相关文章

JS实现焦点图轮播效果

大家平时逛淘宝网的时候,在首页就能看到焦点图轮播的效果,就是这个样子的: PS:想起每每打开淘宝,总会被这个玩意先夺眼球,偶尔还去点进去溜溜,幸好我定力好,总能控制住自己的购买欲望,为自己不用剁手感到欣慰 ! 好吧,其实说白了就是穷,就是没钱,就是不能好好地任性,所以只能先去慕课网找教程学习把它给做出来! OK,首先将HTML结构搭建好先: <div id="container"> <div id="list" style="left:

一个精悍的拥有一大波焦点图轮播滑动特效的Js程序——bxSlider

打开这个地址>>强大的支持手机端响应式的jQuery焦点图轮播特效插件bxslider.js(右键查看源代码) bxSlider官网http://bxslider.com/

基于jQuery游戏网站焦点图轮播特效

基于jQuery的一款游戏网站焦点图轮播特效.这是一款带进度条定时切换,带缩略图切换的jQuery网站焦点图代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <center> <br> <div id="chinaz"> <div class="banner-btn"> <a href="javascript:;" class="prevBtn" r

KinSlideshow焦点图轮播插件

KinSlideshow默认设置效果代码: *焦点图显示的标题为 img 中 alt 属性中的文字 *当只有一张图片时不显示按钮,但也会有无缝切换效果 * jquery 1.7.2以上版本 jvascript: $(function(){ $("#KinSlideshow").KinSlideshow(); }) HTML: <div id="KinSlideshow" style="visibility:hidden;"> <

案例:焦点图轮播特效

案例:焦点图轮播特效 案例:焦点图轮播特效 案例:固定边栏滚动特效 案例:固定边栏滚动特效 案例:弹出层效果 案例:弹出层效果 案例:分页页码制作 案例:分页页码制作案例:焦点图轮播特效,布布扣,bubuko.com

jQuery个性化图片轮播效果

购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果 两个区域:   最外层容器区域,如上图红色线框矩形   选项卡区域 两个事件:    鼠标悬浮或鼠标划入mouseover    鼠标离开mouseleave /**大屏广告滚动样式**/ 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF

jQuery制作无缝轮播效果

[一]HTML结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery制作无缝轮播器</title> <script type="text/javascript" src="jquery-1.12.4.js"></script> &

JQuery实现图片轮播效果源码

======================整体结构======================== <div class="banner"> <ul class="banner-imgs"> <li class="banner-img"> <a href="#"><img src="#" alt="" /></a>

Jquery实现图片轮播效果

废话不多说,先上源码 1 <div id="baner"> 2 <div class="imgt"> 3 <div class="shadeDiv clarity"></div><!-- 透明层 --> 4 <ul> 5 <li name="1"></li> 6 <li name="2"></l