利用Jquery,优雅的实现焦点图切换

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jQuery原始左右滚动幻灯片(方便扩展)代码效果</title>

<style>

*{margin:0px;padding:0px;list-style-type:none;}

.v_out{width:748px;margin:20px auto;overflow:hidden;}

.v_show{width:665px;overflow:hidden;position:relative;height:280px;float:left}

.v_cont{ width:6650px;position:absolute;left:0px;top:0px;}

.v_cont ul{float:left;text-align:center;line-height:50px;}

.v_cont ul li{width:665px;height:250px;background:#f8f8f8;float:left;margin-top:3px;}

/*---圆圈---*/

.v_out_p{position:relative;overflow:visible}

.circle{position:absolute;left: 40px;top: 290px;}

.circle li{width:120px;height:60px;float:left;margin-right:10px;background:#ccc}

.circle .circle-cur{background:#f00}

/*---切换---*/

.prev,.next{float:left;padding:105px 9px 0}

.prev a{ background:#f00;}

.prev .ico_1{ background:url(input_a.gif) no-repeat 0 -3757px;}

.next a{background:#f00 }

.next .ico_2{background:url(input_a.gif) no-repeat right -3757px;}

.prev,.prev a,.next,.next a{width:21px;height:28px; display:block}

</style>

</head>

<body>

<!--代码部分begin-->

<div class="v_out v_out_p">

    <div class="prev"><a href="javascript:void(0)"></a></div>

    <div class="v_show">

        <div class="v_cont">

            <ul>

                <li index="0" style="background:#f00">[第1个]</li>

                <li index="1" style="background:#ff0">[第2个]</li>

                <li index="2" style="background:#f0f">[第3个]</li>

                <li index="3" style="background:#999">[第4个]</li>

                <li index="4" style="background:#666">[第5个]</li>

            </ul>

        </div>

    </div>

    <div class="next"><a href="javascript:void(0)"></a></div>

    <ul class="circle">

        <li class="circle-cur">1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

    </ul>

</div>

<script src="http://www.lanrenzhijia.com/ajaxjs/1.4.4/jquery-1.4.4.min.js"></script>

<script>

$(function() {

    $(".next a").click(function() {

        nextscroll()

    });

    function nextscroll() {

        var vcon = $(".v_cont ");

        var offset = ($(".v_cont li").width()) * -1;

        vcon.stop().animate({

            left: offset

        }, "slow", function() {

            var firstItem = $(".v_cont ul li").first();

            vcon.find("ul").append(firstItem);

            $(this).css("left", "0px");

            circle()

        })

    };

    function circle() {

        var currentItem = $(".v_cont ul li").first();

        var currentIndex = currentItem.attr("index");

        $(".circle li").removeClass("circle-cur");

        $(".circle li").eq(currentIndex).addClass("circle-cur")

    }

    $(".prev a").click(function() {

        var vcon = $(".v_cont ");

        var offset = ($(".v_cont li").width() * -1);

        var lastItem = $(".v_cont ul li").last();

        vcon.find("ul").prepend(lastItem);

        vcon.css("left", offset);

        vcon.animate({

            left: "0px"

        }, "slow", function() {

            circle()

        })

    });

    var animateEnd = 1;

    $(".circle li").click(function() {

        if (animateEnd == 0) {

            return

        }

        $(this).addClass("circle-cur").siblings().removeClass("circle-cur");

        var nextindex = $(this).index();

        var currentindex = $(".v_cont li").first().attr("index");

        var curr = $(".v_cont li").first().clone();

        if (nextindex > currentindex) {

            for (var i = 0; i < nextindex - currentindex; i++) {

                var firstItem = $(".v_cont li").first();

                $(".v_cont ul").append(firstItem)

            }

            $(".v_cont ul").prepend(curr);

            var offset = ($(".v_cont li").width()) * -1;

            if (animateEnd == 1) {

                animateEnd = 0;

                $(".v_cont").stop().animate({

                    left: offset

                }, "slow", function() {

                    $(".v_cont ul li").first().remove();

                    $(".v_cont").css("left", "0px");

                    animateEnd = 1

                })

            }

        } else {

            var curt = $(".v_cont li").last().clone();

            for (var i = 0; i < currentindex - nextindex; i++) {

                var lastItem = $(".v_cont li").last();

                $(".v_cont ul").prepend(lastItem)

            }

            $(".v_cont ul").append(curt);

            var offset = ($(".v_cont li").width()) * -1;

            $(".v_cont").css("left", offset);

            if (animateEnd == 1) {

                animateEnd = 0;

                $(".v_cont").stop().animate({

                    left: "0px"

                }, "slow", function() {

                    $(".v_cont ul li").last().remove();

                    animateEnd = 1

                })

            }

        }

    })

})

</script>

<!--代码部分end-->

</body>

</html>

摘自：http://demo.lanrenzhijia.com/2015/banner0325/

demo :http://demo.lanrenzhijia.com/2015/banner0325/

简单的Jquery焦点图切换效果的更多相关文章

  1. 基于jQuery打造的选项卡向上弹出jquery焦点图切换特效

    基于jQuery打造的选项卡向上弹出jquery焦点图切换特效 鼠标经过标题栏,会出现层特效向上滑动,并且在同时进行幻灯片切换,效果十分不错. 有兴趣的童鞋可以下载看看,在IE6方面兼容性也不错,只有 ...

  2. 自制jQuery焦点图切换简易插件

    首页经常是需要一个焦点图切换的效果,最近做的项目也正好需要,所以在网上搜索,后面查到了一个半成品的插件,这里我自己修改了一下. js文件夹下面有两个文件夹jquery.jslide.js与jquery ...

  3. jQuery焦点图切换特效插件封装

    网站焦点图是一种网站内容的展现形式,可简单理解为一张图片或多张图片展现在网页上就是网站焦点图.在网站很明显的位置,用图片组合播放的形式,类似焦点新闻的意思只不过加上了图片.一般多使用在网站首页版面或频 ...

  4. Jquery焦点图/幻灯片效果 插件 KinSlideshow

    JavaScript $(function(){         $("#KinSlideshow").KinSlideshow({                 moveSty ...

  5. 强大的自适应jQuery焦点图特效

    jQuery焦点图切换自适应效果 自适应jQuery焦点图特效是一款支持移动端的响应式jQuery焦点图插件,支持flexible布局,支持移动触摸事件等. 今天我们要来分享一款很灵活的jQuery焦 ...

  6. 一款jQuery满屏自适应焦点图切换特效

    一款jQuery满屏自适应焦点图切换特效 ,自适应当前浏览器的宽度,可以作为网站整个大背景的却换效果,很不错的一款不jquery特效. 兼容性没的说直接秒杀了IE6.适用浏览器:IE6.IE7.IE8 ...

  7. 一款仿PBA官网首页jQuery焦点图的切换特效

    一款仿PBA官网首页jQuery焦点图的切换特效,非常的简单大方, 在对浏览器兼容性的方面做了不少的功夫.IE6也勉强能过去. 还是一款全屏的焦点图切换特效.大气而清新.很适合简介大方的网站. 下图还 ...

  8. 一款jQuery特效编写的大度宽屏焦点图切换特效

    一款jQuery编写的大度宽屏焦点图切换特效 焦点图显示区域有固定的宽度,当前显示宽度之外是一个半透明层显示的其它的焦点图片, 最好的是,此特效兼容IE6以及其它浏览器. 适用浏览器:IE6.IE7. ...

  9. 一款基于jQuery多图切换焦点图插件

    这次要给大家分享的也是一款jQuery图片滑块插件,之前有介绍过不少实用的jQuery焦点图插件和jQuery图片滑块插件,比如jQuery左侧Tab切换的图片滑块插件.它的特点是可以同时切换多张图片 ...

随机推荐

  1. Linux TC的ifb原理以及ingress流控-转

    原文:http://www.xuebuyuan.com/2961303.html 首先贴上Linux内核的ifb.c的文件头注释:     The purpose of this driver is ...

  2. DES、RSA、MD5、SHA、随机生成加密与解密

    一.数据加密/编码算法列表   常见用于保证安全的加密或编码算法如下:   1.常用密钥算法   密钥算法用来对敏感数据.摘要.签名等信息进行加密,常用的密钥算法包括:   DES(Data Encr ...

  3. Coreutils - GNU core utilities

    coreutils 是GNU下的一个软件包,包含linux下的 ls等常用命令.这些命令的实现要依赖于shell程序.一般在系统中都默认安装,也可自己安装或更新.例如,安装coreutils-6.7. ...

  4. Hadoop集群中有哪些节点类型

  5. python中常见的错误

    python中常见的错误   1.IndentationError: unindent does not match any outer indentation leve 众所周知,Python语法要 ...

  6. mac mamp host 配置

    <VirtualHost *:80> DocumentRoot "/Users/xuxu/www" ServerName localhost <Directory ...

  7. PhpExcel参考网址

    参考网址: http://www.cnblogs.com/yuwensong/p/3771787.html

  8. java -cp ../../DESUtil/ Hello,用-cp指定classpath

    运行hello.class 文件 怎么用 java +路径 就是不在class目录下运行 怎么做??? 我想要的是 java 直接去运行某个路径下的class文件 不想到它的目录那里再java hel ...

  9. spring cloud深入学习(一)-----什么是微服务？什么是rpc？spring cloud简介

    近年来,微服务非常的流行,那么为什么是它?简单介绍一下. 为什么是微服务? 微服务架构是一种将单应用程序作为一套小型服务开发的方法,每种应用程序都在其自己的进程中运行,并与轻量级机制(通常是HTTP资 ...

  10. 关于 LVM

    [名词解释] 1. PV(Physical Volume):物理卷,处于LVM最底层,可以是物理硬盘或者分区.     2.PP(Physical Extend):物理区域,PV中可以用于分配的最小存 ...