利用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. CPA专业阶段单科成绩有5年有效期限，即从通过科目考试的第一年算起

    你为什么不去参加注册会计师考试? 注册会计师考试出考率极低,大家都有自己的原因,可以客观地说,每年注会考场出考人数不足三成,到底是什么原因不去考试呢?大家是这么说的. 1.没有好好复习呗,还怎么去考试 ...

  2. Spring MVC(二)--Spring MVC登陆实例

    本文通过一个简单的登陆实例实现Spring MVC的流程,同时整合 MyBatis使用,流程是这样的: 1.访问一个URL进入登陆界面 2.输入正确的用户名和密码,成功则进入index页面,否则留在登 ...

  3. hibernate一对多关系 在一方查询会获得重复数据，重复数量就是多端数据数量用@Fetch(FetchMode.SUBSELECT)解决

    先来看数据表 版块表只有两个数据 板块1是推荐,下边没有子栏目 板块2下边有14个子栏目 在1的一端来查询,发现结果有16条 也就是板块1+版块2+版块2和他的14个子集都列出来了,这明显不对 板块对 ...

  4. hibernate一对一关联手动改表后No row with the given identifier exists:

    articleId手动改了一个并不存在的值 把被控端的id改成存在的就好了

  5. GULP入门之API（二）

    GULP的API gulp.src(globs[, options]) 输出(Emits)符合所提供的匹配模式(glob)或者匹配模式的数组(array of globs)的文件. 将返回一个 Vin ...

  6. 2019-7-29-Roslyn-使用-Target-替换占位符方式生成-nuget-打包

    title author date CreateTime categories Roslyn 使用 Target 替换占位符方式生成 nuget 打包 lindexi 2019-7-29 10:1:1 ...

  7. TZOJ 4651 zry和他的的灯泡们(lca)

    描述 zry有一个收集灯泡的习惯,他把灯泡的阴极都共地,阳极连成一颗树,这样的话,他只要在任意一个灯泡的阳极加上合适的电压,所有灯泡都能亮起来.不幸的是,有一对灯泡之间的阳极连线断掉了,这样的话,这颗 ...

  8. c# 调用7za.exe执行压缩命令

    string path7z = $"7zsource\\{project.name}"; string path7zip = $"7z\\{project.name}.7 ...

  9. JPinyin繁体相互转换

    // 用正则表达式"[\u4e00-\u9fa5]"匹配 字符串 Scanner sc =new Scanner(System.in);System.out.println(&qu ...

  10. VUE打包好的文件部署让beego实现静态文件访问，如何用根目录来访问静态文件？

    最近的一个全栈项目,光伏云监控系统,后端使用beego框架,纯api,前端使用VUE2.0.项目地址:http://scada.ssechina.com:88/static 我把打包好的前端文件放到g ...