利用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. Python，anaconda及pycharm安装过程笔记

    1.Python Python有2.X和3.X版本,可以在Windows系统下共存.方法为:Windows下Python多版本共存 可参考: Python及pycharm安装 安装Python后可在c ...

  2. AdaBoost笔记之代码

    最近要做二分类问题,先Mark一下知识点和代码,参考:Opencv2.4.9源码分析——Boosting   以下内容全部转自此文 一 原理 二 opencv源码 1.先看构建Boosting的参数: ...

  3. nginx 访问ssl 的 pem 遇到的权限问题

    nginx 开启失败,日志记录 访问 ssl 的 pem 文件  fopen:Permission denied 权限问题,查看文件权限,目录权限,正常. google 后得知原来是一个 SELinu ...

  4. 渗透神器----BurpSuite_pro_v2.1

    burp2.1版本 主要有两个文件 大小有270M 目前是最新的版本 下载地址 链接: https://pan.baidu.com/s/1UjdwBN-S2TbgZ8iKiBcEhw 提取码: 9h7 ...

  5. JasperReports报表区段14

    我们将在本章开始,一个简单的报表模板的结构看.依样画葫芦JasperReports的结构报表模板归类到多个区段.部分是有规定的高度,并且可以包含像直线,矩形,图像或文本字段对象报表的部分. 通过提供的 ...

  6. Jquery手机下拉刷新，下拉加载数据

    一.Jquery手机下拉刷新,下拉加载数据.附加有源码 <!DOCTYPE html> <html> <head> <title>手机</titl ...

  7. ssh实现免密码登录和文件传输

    一般的用户名密码认证不安全,很容易被暴力破解,还不方便:而大多数人都是选择使用 SSH 密钥认证,不仅安全还不用每次输密码 ssh密钥对 # 使用 ssh-keygen 生成非对称密钥,一路回车即可 ...

  8. TZ_09_MyBatis的pageHelper

    1.分页操作使用MyBatis的PageHelper 1>导入pageHelper的坐标 <dependency> <groupId>com.github.pagehel ...

  9. TZ_05_Spring_Proxy基于接口的动态代理和基于类的动态代理

    代理:为了增强方法在不添加代码的情况下 1.Proxy基于接口的动态代理 /** * 模拟一个消费者 * @author Administrator * */ public class Client ...

  10. 利用webuploader插件上传图片文件,完整前端示例demo,服务端使用SpringMVC接收

    利用WebUploader插件上传图片文件完整前端示例demo,服务端使用SpringMVC接收 Webuploader简介   WebUploader是由Baidu WebFE(FEX)团队开发的一 ...