js特效

1.轮播换图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{width:170px;height: 130px;}
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
    <script>
        $(function () {
            var i=0;
            var tt;
            $("img").hover(function () {
                clearInterval(tt);
            },tab);  // 注意这里没有()!
            function tab(){
                tt=setInterval(function(){
                    i++;
                    $("img").attr("src","img/pic"+i+".png");
                    if(i>2){
                        i=0;
                    }
                },1000);
            }
            tab();
        });
    </script>
</head>
<body>
<img src="img/pic1.png"/>
</body>
</html>

2.滑动轮播换图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div,img, body, ul, li {margin: 0;padding: 0;}
        li {list-style: none;float: left;}
        .a, li, img {width: 170px;height: 130px;}
        .a{overflow: hidden;}
        ul{width:510px;}

    </style>
    <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
    <script>
        $(function () {
            function test(){
                var i=0;
                var width=parseInt($("img").width());
                setInterval(function () {
                        i++;
                    if(i>2){
                        i=0;
                    }
                   $("ul").animate({marginLeft:'-'+(width*i)+'px'},1000);
                },3000);
            }
            test();
        });
    </script>
</head>
<body>
<div class="a">
    <ul>
        <li><img src="img/pic1.png"/></li>
        <li><img src="img/pic2.png"/></li>
        <li><img src="img/pic3.png"/></li>
    </ul>
</div>
</body>
</html>

3.左右方向滑动轮播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div, img, body, ul, li {margin: 0;padding: 0;}
        li {list-style: none;float: left;}
        .wrap, li, img {width: 170px;height: 130px;}
        .wrap {overflow: hidden;height: 130px;margin: 50px;}
        ul {width: 510px;height: 130px;border:1px solid green;}

        .whole{border:1px solid red; width:270px;height: 190px; position: relative;}
        .bt1{position: absolute;top:100px;left: 10px;}    /* 按钮相对定位*/
        .bt2{position: absolute;top:100px;left: 230px;}
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
    <script>
        $(function () {
            var tt;
            var i = 0;
            var width = parseInt($("img").width());
            function test() {
                 tt=setInterval(function () {
                    doMove(1);       // 定时器调函数，定时传个1  // 默认在定时器完成移动 animate() 由于需要传参，多写了一个函数 doMove()
                }, 3500);
            }
            test();
            function doMove(num){
                //i++;
                i=i+num;     //
                if (i > 2) {
                    i = 0;
                }
                if(i<0){
                    //i=0;   //等于0 就不能再向左滑动了
                     i=2;
                }
                $("ul").stop().animate({'marginLeft': '-' + (width * i)+'px'}, 2000);

            }
            $(".whole").hover(function () {  // 整一块hover()
                clearInterval(tt);
            },test);
            $(".bt1").click(function () {
                doMove(-1);
                console.log("i: "+i);
            });
            $(".bt2").click(function () {
                doMove(1);
                console.log("i: "+i);
            });

        });
    </script>
</head>
<body>
<div class="whole">
    <div class="wrap">
        <ul>
            <li><img src="img/pic1.png"/></li>
            <li><img src="img/pic2.png"/></li>
            <li><img src="img/pic3.png"/></li>
        </ul>

    </div>
    <button class="bt1"><<</button>
    <button class="bt2">>></button>
</div>
</body>
</html>

4.jq拖拽

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .drag{
            position:absolute;
            background:red;
            top:100px;left:200px;
            padding:0;
            width:100px;height: 100px;
        }
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            var move = false;//移动标记
            var _x, _y;//鼠标离控件左上角的相对位置
            $(".drag").mousedown(function (e) {
                move = true;
                _x = e.pageX - parseInt($(".drag").css("left"));
                _y = e.pageY - parseInt($(".drag").css("top"));
            });
            $(".drag").mousemove(function (e) {
                if (move) {
                    var x = e.pageX - _x;//控件左上角到屏幕左上角的相对位置
                    var y = e.pageY - _y;
                    $(".drag").css({"top": y, "left": x});    // 被拖拽的div采用绝对定位
                }
            });
            $(".drag").mouseup(function () {
                move = false;
            });
            $(".a").mousemove(function (e) {
                console.log("mx: "+ e.pageX+": "+ e.pageY);
            })
        });
    </script>
</head>
<body>
<input type="button" id="btn" value="btn"/>
<div class="drag"></div>
<div class="a" style="width:200px; height: 200px; border:1px solid green;"></div>
</body>
</html>

5.jq划线

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .a{border:1px solid red;width:0px; display: none;}
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                $(".a").show();
                $(".a").animate({width:'+100px'},1000);
            });
        });
    </script>
</head>
<body>
<input type="button" id="btn" value="btn"/>
<div class="a"></div>
</body>
</html>

6.鼠标变成ico图标

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <style>
        .a{cursor:url("a.ico"),auto;}
    </style>
    <script>
        $(function () {
            $("button").click(function () {
                $("body").addClass("b");
            });
        });
    </script>
</head>
<body style="height: 500px;">
<button>btn</button>
</body>
</html>

7.轮播图加链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{width:170px;height: 130px;}
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
    <script>
        $(function () {
            var i=0;
            var tt;
            var arrUrl=['http://www.baidu.com','http://www.qq.com','http://www.126.com'];
            var imgPlay=$(".imgPlay");
            var img=$(".imgPlay").find("img");
            var url=$(".imgPlay").find("a");
            $("img").hover(function () {
                clearInterval(tt);
            },tab);  // 注意这里没有()!
            function tab(){
                tt=setInterval(function(){
                    i++;
                    img.attr("src","img/pic"+i+".jpg");
                    var index=i-1;
                    url.attr("href",arrUrl[index]);
                    if(i>2){
                        i=0;
                    }
                },1500);
            }
            tab();
        });
    </script>
</head>
<body>
<div class="imgPlay">
    <a href="http://www.baidu.com">
        <img src="img/pic1.jpg"/>
    </a>
</div>
</body>
</html>

View Code

8.轮播图完善版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div, img, body, ul, li {margin: 0;padding: 0;}
        li {list-style: none;}
        .carousel{border:1px solid red; width:270px;height: 190px; position: relative; }
        .carousel .wrap {overflow: hidden;margin-left: 50px;margin-top: 50px;height: 130px;width:170px;}
        .carousel .wrap ul {width: 510px;height: 130px;border:1px solid green; margin-left:0;}
        .carousel .wrap ul li {width: 170px;height: 130px;float:left; }
        .carousel .wrap ul li img {width: 170px;height: 130px;}
        .carousel .bt1{position: absolute;top:100px;left: 10px;}    /* 按钮相对定位*/
        .carousel .bt2{position: absolute;top:100px;left: 230px;}
        .carousel .num{position: absolute;top:140px;left:100px;}
        .carousel .num li{float:left;font-size: 16px;margin-right: 5px;width:20px; text-align:center; cursor:pointer;}
        .carousel .num .active{color:red;}
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
    <script>
        $(function () {
            var i = 0;
            var width = parseInt($(".wrap li").width());
            var num=$(".wrap li").length;
            $(".wrap ul").width(num*width+"px");

            function doMove(){
                $(".wrap ul").stop().animate({'marginLeft':'-'+ (width * i)+'px'}, 500);
                $(".num li").eq(i).addClass("active").siblings().removeClass("active");
            }

            $(".bt1").click(function () {
                i--;
                if(i<0){
                    i=3;
                }
                console.log("i: "+i);
                doMove();
            });
            $(".bt2").click(function () {
                i++;
                if(i>3){
                    i=0;
                }
                console.log("ii: "+i);
                doMove();
            });
            $(".num li ").click(function () {
                i = $(this).index();
                console.log("i: "+i);
                doMove();
            });
        });
    </script>
</head>
<body>
<p> 点击 1 2 3 4 无法跳转到对应的图片</p>
<div class="carousel">
    <div class="wrap">
        <ul>
            <li><img src="pic1.png"/></li>
            <li><img src="pic2.png"/></li>
            <li><img src="pic3.png"/></li>
            <li><img src="pic4.png"/></li>
        </ul>
    </div>
    <button class="bt1"><<</button>
    <button class="bt2">>></button>
    <ul class="num">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>



</body>
</html>

View Code

posted @ 2016-06-20 22:03 gyz418 阅读(198) 评论(0) 收藏举报

刷新页面返回顶部

gyz418

js特效

公告