利用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. 深入浅出 Java Concurrency (2): 原子操作 part 1[转]

    从相对简单的Atomic入手(java.util.concurrent是基于Queue的并发包,而Queue,很多情况下使用到了Atomic操作,因此首先从这里开始).很多情况下我们只是需要一个简单的 ...

  2. spring cloud深入学习(十三)-----使用Spring Cloud Sleuth和Zipkin进行分布式链路跟踪

    随着业务发展,系统拆分导致系统调用链路愈发复杂一个前端请求可能最终需要调用很多次后端服务才能完成,当整个请求变慢或不可用时,我们是无法得知该请求是由某个或某些后端服务引起的,这时就需要解决如何快读定位 ...

  3. megacli在线raid构建详解(转载自用)

    版权声明:本文为博主原创文章,未经博主允许不得转载,转载附上原文链接即可. https://blog.csdn.net/GX_1_11_real/article/details/83213959 ht ...

  4. 处理iphone的 .play() 不能播放问题

    一.添加音乐 <audio id="Jaudio" src="shake.mp3" preload loop="loop" contr ...

  5. 数据表中记录明明有，session.get(类.class, id);返回null

    出现null的处理思路首先检查数据库中是否真的有这个记录 确实存在的,用接口查一下最大值,也是存在的,数据库连接正常 写sql也可以查得到 然而诡异的事情出现了 难道是一直在用的dao代码出了问题? ...

  6. C# 无边框窗体移动和改变大小的实现

    自己给软件做的皮肤,将窗体设为无边框后,想要其具有正常窗体的移动和改变大小功能,以下代 码可以实现.... //需添加using System.Runtime.InteropServices; [Dl ...

  7. IDEA Maven打包时去掉test

  8. Vertex Covers（高维前缀和）

    Vertex Covers 时间限制: 5 Sec  内存限制: 128 MB提交: 5  解决: 3 题目描述 In graph theory, a vertex cover of a graph ...

  9. Leetcode137. Single Number II只出现一次的数字2

    给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现了三次.找出那个只出现了一次的元素. 说明: 你的算法应该具有线性时间复杂度. 你可以不使用额外空间来实现吗? 示例 1: 输入: ...

  10. Django项目：CRM(客户关系管理系统)--23--15PerfectCRM实现King_admin多条件过滤

    登陆密码设置参考 http://www.cnblogs.com/ujq3/p/8553784.html list_filter = ('source','consultant','consult_co ...