jquery手写轮播功能

最新推荐文章于 2024-06-10 22:18:41 发布

dengtan2568

最新推荐文章于 2024-06-10 22:18:41 发布

阅读量139

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/shandayuan/p/11404429.html

版权

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>小例子</title>
        <script type="text/javascript" src="js/jquery.js"></script>
        <style>
            @charset "utf-8";
            /* CSS Document */
            
            #main {
                margin-top: 20px;
            }
            
            * {
                margin: 0;
                padding: 0;
                word-wrap: break-word;
            }
            
            a {
                text-decoration: none;
            }
            
            a:link {
                text-decoration: none;
            }
            
            a:visited {
                text-decoration: none;
            }
            
            a:hover {
                text-decoration: none;
            }
            
            a:active {
                text-decoration: none;
            }
            
            a.underline:hover {
                text-decoration: underline;
            }
            
            a img {
                border: none;
            }
            
            body {
                margin: 0px;
                padding: 0px;
                position: relative;
            }
            
            body,
            td,
            div,
            a,
            li,
            form {
                color: #391f0e;
                line-height: 20px;
                font-family: Arial, "Microsoft yahei"
            }
            
            div,
            form,
            p,
            img,
            ul,
            ol,
            li,
            dl,
            dt,
            dd,
            button,
            input {
                margin: 0px;
                padding: 0px;
                font-size: 12px;
            }
            
            li {
                list-style: none;
            }
            /*table{font-size: 13px;}*/
            
            .clear {
                clear: both !important;
                width: 0px !important;
                height: 0px !important;
                line-height: 0px !important;
                overflow: hidden !important;
                padding: 0 !important;
                margin: 0 !important;
                float: none !important;
                position: static !important;
                background: none !important;
            }
            /* For IE 6/7 (trigger hasLayout) */
            
            .fl {
                float: left;
            }
            
            .fr {
                float: right;
            }
            
            .block {
                display: block !important;
            }
            
            .box {
                width: 100%;
                margin: 0 auto;
                height: auto;
            }
            
            .w {
                width: 1000px;
                margin: 0 auto;
            }
            /*通用样式结束*/
            
            .a_a {
                height: 500px;
                overflow: hidden;
                position: relative;
            }
            
            .a_b {
                height: 500px;
                width: 5000px;
                transition: width 1s, height 1s, transform 1s;
                -moz-transition: width 1s, height 1s, -moz-transform 1s;
                -webkit-transition: width 1s, height 1s, -webkit-transform 1s;
                -o-transition: width 1s, height 1s, -o-transform 1s;
            }
            
            .a_c {
                width: 1000px;
                height: 500px;
            }
            
            .left {
                background: url(../img/064.png) no-repeat;
                height: 60px;
                width: 60px;
                background-size: 100% 100%;
                position: absolute;
                top: 250px;
                left: 370px;
            }
            
            .left:hover {
                cursor: pointer;
            }
            
            .right:hover {
                cursor: pointer;
            }
            
            .right {
                background: url(../img/063.png) no-repeat;
                height: 60px;
                width: 60px;
                background-size: 100% 100%;
                position: absolute;
                top: 250px;
                left: 1500px;
            }
        </style>
    </head>

    <body>

        <div class="box">
            <div class="w a_a">
                <div class="a_b">
                    <div class="a_c fl" style="background-color: gray;"></div>
                    <div class="a_c fl" style="background-color: darkmagenta"></div>
                    <div class="a_c fl" style="background-color: blue;"></div>
                    <div class="a_c fl" style="background-color: green;"></div>
                    <div class="a_c fl" style="background-color: paleturquoise;"></div>
                    <div class="clear"></div>
                </div>
            </div>

            <div class="left"></div>
            <div class="right"></div>
        </div>

        <script>
            $(function() {
                $('.left').click(
                    function() {
                        var a = $('.a_b').attr('id').substr(1, 4); //substr 截取字符串 从索引1的位置开始截取 截取4个字符串

                        alert(a);

                        if(a != 0) {
                            var e = a - 1000;
                            $('.a_b').attr('id', -e);
                            $('.a_b').css("transform", "translate(-" + e + "px)");
                        }
                    }
                )

                $('.right').click(
                    function() {
                        var a = $('.a_b').attr('id');
                        if(a != -4000) {
                            var e = a - 1000;
                            $('.a_b').attr('id', e);
                            $('.a_b').css("transform", "translate(" + e + "px)");
                        }
                    }
                )
            })
        </script>

    </body>

</html>

jquery 写tab切换：

　　　　　　　　　　$(function()
                {
                    $('.about-5-1>div').click(
                        function()
                        {
                            var i = $(this).index();   　　　　　　　　　　　　 //定义变量i 为当前对象的索引。
                            $(this).parent().siblings('div').hide();
                            if(i == 0) {
                                $(this).parent().siblings('.about-5-2').show();
                                $(this).addClass("current").siblings().removeClass("current");
                            }
                            if(i == 1) {
                                $(this).parent().siblings('.about-5-3').show();
                                $(this).addClass("current").siblings().removeClass("current");
                            }
                            if(i == 2) {
                                $(this).parent().siblings('.about-5-4').show();
                                $(this).addClass("current").siblings().removeClass("current");
                            }
                            if(i == 3) {
                                $(this).parent().siblings('.about-5-5').show();
                                $(this).addClass("current").siblings().removeClass("current");
                            }
                        }
                    )
                })

用jquery给html中添加li元素：

        <script>
            
            //用jquery给html中添加li元素
            var $a1= $("<li>香蕉</li>");
            var $a2= $("<li>雪梨</li>");
            
            $("ul").append($a1);
            $("ul").append($a2);
            
        </script>

还可以用jquery给html中删除html的元素:

替换html的元素。

//用jquery给html元素包裹上元素


   $("div").wrap("<a href=''></a>");

//用jquery设置html元素属性
            $(".a").attr("title","your name");

//用jquery删除html元素的属性
            $(".a").removeAttr("title");

//用jquery给html元素追加样式
            $(".a").addClass("on")

//jquery的val()方法使select(下拉列表框)，checkbox（多选框），radio（单选框）相应的选项被选中。

         <div class="box" style="width: 1000px; height: 500px;">
            <select id="single">
                <option>选择一号</option>
                <option>选择二号</option>
                <option>选择三号</option>
            </select>
            
            <script>
                $("#single").val("选择二号");
            </script>

        </div>

//jquery的next()方法

$(".a").next()
方法用于取匹配元素后面紧邻的同辈元素。


//jquery的prev()方法


$(".a").prev()
方法用于取匹配元素前面紧邻的同辈元素。

//取得匹配元素前后所有的同辈元素

$(".a").siblings()

//用jquery设置样式

$(".a").css("color","red");

//获取滚动条距离顶部的距离

$(".a").scrollTop();

当在元素上点击时调用第一个指定函数，当再次点击时调用第二个函数，以此类推。

//当鼠标放上显示内容，鼠标离开内容隐藏。

                    $(".a_b").hover(function(){
                        $(this).next().show();
                    },function(){
                        $(this).next().hide();
                    });

两种写法：

　　　　$(".a_b").hover(
　　　　　　function(){$(this).next().show();},
　　　　　　function(){$(this).next().hide();}
　　　　);

//鼠标点击时显示，再点击时隐藏。

$(function(){
              
    $(".a_b").click(function(){
    　　$(this).next().slideToggle();
    });

});

转载于:https://www.cnblogs.com/shandayuan/p/11404429.html

dengtan2568

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery手写轮播功能

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>小例子</title> <script type="text/javascript" src="js/jquery.j...
复制链接

扫一扫