图片轮播之面向过程写法

时间：2016-01-26 00:24:03 阅读：235 评论：0 收藏：0 [点我收藏+]
标签：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        ul{list-style:none;}
        ul,body{margin:0;padding:0;}

        .slide-box{position:relative;}

        .clearfix:after {content:‘‘;display: table;clear:both;}
        .slide-box {width:500px;border:1px solid #ccc;margin:50px auto;}
        .slide-content-wrap {height: 400px;width:500px;overflow:hidden;position:relative;}
        .slide-content {
            width:2500px;
            position:absolute;
            left:0;
            /*transition: all 0.5s ease-in-out;*/
        }
        .slide-content .slide-panel { float:left;height: 400px;}
        .slide-content img {height:400px; width:500px;}

        .slide-nav-wrap{position:absolute;left:0;bottom:0;}
        .slide-item{float:left;height: 60px;}
        .slide-nav img{
            height:60px;width:100px;
        }

        .slide-box:hover .prev, .slide-box:hover .next{display:block;}
        .prev, .next{
            position: absolute;
            display:none;
            width:30px;
            height:60px;
            top:150px;
            text-indent:300000px;
            cursor: pointer;
            background: #ccc no-repeat center center;
            border-radius:5px;
        }
        .prev:hover, .next:hover {
            background-color: #aaa;
        }
        .prev{
            left:25px;
            background-image: url("../image/prev.png");
        }
        .next{
            right:25px;
            background-image: url(‘../image/next.png‘);
        }


    </style>
    <script src="../jquery-1.11.3.js"></script>
    <script type="text/javascript">
        $(function(){
            var slideWrap = $(‘.slide-box‘);
            var triggers = $(‘.slide-item‘);
            var target = $(‘.slide-content‘);
            var curIndex = 0;

            function autoPlay(){
                if(curIndex>3){
                    curIndex = 0;
                    target.animate({left:-500*curIndex},500,‘swing‘,function(){});
                }else{
                    curIndex += 1;
                    target.animate({left:-500*curIndex},500,‘swing‘,function(){});
                }
            }

            var autoID = setInterval(autoPlay,3000);

            slideWrap.hover(function(){
                clearInterval(autoID);
            },function(){
                autoID = setInterval(autoPlay,3000);
            });

            triggers.each(function(index,item){
                var trigger = $(item);
                trigger.on(‘mouseenter‘,function(e){
//                    target.css({left:-left});
                    if(target.is(‘:animated‘)){
                        target.stop();
                    }
                    curIndex = trigger.index();
                    target.animate({left:-curIndex*500},500,‘swing‘,function(){});
                });
            });

            $(‘.next‘).click(function(e){
                curIndex += 1;
                if(curIndex > 4){
                    curIndex = 0;
                }
                if(target.is(‘:animated‘)){
                    target.stop();
                }
                target.animate({left:-500*curIndex},500,‘swing‘,function(){});
            });

            $(‘.prev‘).click(function(){
                curIndex -= 1;
                if(curIndex < 0){
                    curIndex = 4;
                }
                if(target.is(‘:animated‘)){
                    target.stop();
                }
                target.animate({left:-500*curIndex},500,‘swing‘,function(){});
            });

        });
    </script>
</head>

<body>

<div class="slide-box">
    <div class="slide-content-wrap">
        <ul class="slide-content clearfix">
            <li class="slide-panel"><img src="../image/1.jpg"> </li>
            <li class="slide-panel"><img src="../image/2.jpg"> </li>
            <li class="slide-panel"><img src="../image/3.jpg"> </li>
            <li class="slide-panel"><img src="../image/4.jpg"> </li>
            <li class="slide-panel"><img src="../image/5.jpg"> </li>
        </ul>
    </div>
    <div class="slide-nav-wrap">
        <ul class="slide-nav clearfix">
            <li class="slide-item hover"><img src="../image/1.jpg"></li>
            <li class="slide-item"><img src="../image/2.jpg"> </li>
            <li class="slide-item"><img src="../image/3.jpg"> </li>
            <li class="slide-item"><img src="../image/4.jpg"> </li>
            <li class="slide-item"><img src="../image/5.jpg"> </li>
        </ul>
    </div>
    <div class="slide-operator">
        <span class="next">next</span>
        <span class="prev">prev</span>
        <span class="pause">pause</span>
    </div>
</div>
</body>
</html>
图片轮播之面向过程写法
标签：
原文地址：http://www.cnblogs.com/flyromance/p/5159091.html
踩
(0)
评论一句话评论（0）
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行