简单的Jquery焦点图切换效果

利用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焦点图切换效果的更多相关文章

基于jQuery打造的选项卡向上弹出jquery焦点图切换特效
基于jQuery打造的选项卡向上弹出jquery焦点图切换特效鼠标经过标题栏,会出现层特效向上滑动,并且在同时进行幻灯片切换,效果十分不错. 有兴趣的童鞋可以下载看看,在IE6方面兼容性也不错,只有 ...
自制jQuery焦点图切换简易插件
首页经常是需要一个焦点图切换的效果,最近做的项目也正好需要,所以在网上搜索,后面查到了一个半成品的插件,这里我自己修改了一下. js文件夹下面有两个文件夹jquery.jslide.js与jquery ...
jQuery焦点图切换特效插件封装
网站焦点图是一种网站内容的展现形式,可简单理解为一张图片或多张图片展现在网页上就是网站焦点图.在网站很明显的位置,用图片组合播放的形式,类似焦点新闻的意思只不过加上了图片.一般多使用在网站首页版面或频 ...
Jquery焦点图/幻灯片效果插件 KinSlideshow
JavaScript $(function(){ $("#KinSlideshow").KinSlideshow({ moveSty ...
强大的自适应jQuery焦点图特效
jQuery焦点图切换自适应效果自适应jQuery焦点图特效是一款支持移动端的响应式jQuery焦点图插件,支持flexible布局,支持移动触摸事件等. 今天我们要来分享一款很灵活的jQuery焦 ...
一款jQuery满屏自适应焦点图切换特效
一款jQuery满屏自适应焦点图切换特效 ,自适应当前浏览器的宽度,可以作为网站整个大背景的却换效果,很不错的一款不jquery特效. 兼容性没的说直接秒杀了IE6.适用浏览器:IE6.IE7.IE8 ...
一款仿PBA官网首页jQuery焦点图的切换特效
一款仿PBA官网首页jQuery焦点图的切换特效,非常的简单大方, 在对浏览器兼容性的方面做了不少的功夫.IE6也勉强能过去. 还是一款全屏的焦点图切换特效.大气而清新.很适合简介大方的网站. 下图还 ...
一款jQuery特效编写的大度宽屏焦点图切换特效
一款jQuery编写的大度宽屏焦点图切换特效焦点图显示区域有固定的宽度,当前显示宽度之外是一个半透明层显示的其它的焦点图片, 最好的是,此特效兼容IE6以及其它浏览器. 适用浏览器:IE6.IE7. ...
一款基于jQuery多图切换焦点图插件
这次要给大家分享的也是一款jQuery图片滑块插件,之前有介绍过不少实用的jQuery焦点图插件和jQuery图片滑块插件,比如jQuery左侧Tab切换的图片滑块插件.它的特点是可以同时切换多张图片 ...

随机推荐

深入浅出 Java Concurrency (18): 并发容器 part 3 ConcurrentMap (3)[转]
在上一篇中介绍了HashMap的原理,这一节是ConcurrentMap的最后一节,所以会完整的介绍ConcurrentHashMap的实现. ConcurrentHashMap原理在读写锁章节部分 ...
IO流16 --- 对象流操作字符串 --- 技术搬运工（尚硅谷）
序列化 @Test public void test12() throws IOException { ObjectOutputStream oos = new ObjectOutputStream( ...
Redis源码解析：29事务
Redis通过MULTl,EXEC,WATCH,DISCARD等命令来实现事务(transaction)功能. 事务从MULTI命令开始,之后,该客户端发来的其他命令会被排队,客户端发来EXEC命令之 ...
手机前端开发调试利器-vConsole
最近因为做抽奖页面,在android上可以使用手机连上电脑后用chrome浏览器chrome://inspect进行页面探测,但是ios中的页面就不能这样探测在网上搜索后发现此插件,大大解决了问题 ...
【笔记】Python3导入包规则
例如:这里给出了一种可能的包结构(在分层的文件系统中): sound/ 顶层包 __init__.py 初始化 sound 包 formats/ 文件格式转换子包 __init__.py wavrea ...
CodeChef--SEPT14小结
这套题目只做了几个相对简单的.其他的做起来比较吃力. A 找下规律 /***************************************************************** ...
使用netbeans 搭建maven工程整合spring springmvc框架
使用netbeans7.4 自带的tomcat7.0 所以jdk选择7.xx 然后等待生成空的工程,会缺一些文件夹,和文件,后续需要的时候补齐然后修改pom.xml添加引用,直接覆盖dependen ...
关于python的列表操作（二）：排序，统计
# 列表操作 num_list = [2, 5, 8, 6, 7, 9, 5, 7] # 升序 num_list.sort() print(num_list) # 降序 num_list.sort(r ...
php 抽奖概率算法
lottery.php <?php //转自https://segmentfault.com/a/1190000007431893 /* * 不同概率的抽奖原理就是把0到*(比重总数)的区间分块 ...
【洛谷P3131】【USACO16JAN】子共七
P3131 [USACO16JAN]子共七Subsequences Summing to Sevens 题目描述 Farmer John's cows are standing in a row, a ...

简单的Jquery焦点图切换效果

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

随机推荐

热门专题