图片轮播

吕金含

浏览: 88045 次
性别:
来自: 广州

最近访客更多访客>>

fmbobin

pengfeifei26

cboss8

hellokevinh

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (334)

社区版块

存档分类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片轮播演示</title>
    <script src="jquery.js"></script>
    <script>
        $(function () {
             var prev=$('#prev');/*获取上一张的按钮*/
            var containli=$('.contain > li');/*获取显示的li标签*/
            var index=containli.index();/*获取显示的li标签的索引*/
            var count=containli.length;/*获取li标签的个数*/
             prev.click(function () { /*上一张的按钮点击方法*/
                 index--;//索引自减
                 if (index<0){ //判断索引是否越界
                     index=count-1;/*越界就初始化一个值*/
                 }
                  changeImg(index);/*改变containli标签中的图片和btnli标签中的样式*/
             });
            var btnli =$('.btn > li');/*获取显示的li标签*/
            function changeImg(index){/*改变containli标签中的图片和btnli标签中的样式*/
                containli.eq(index).fadeIn().siblings('li').fadeOut();
                btnli.eq(index).addClass('selectBtn').siblings('li').removeClass('selectBtn');
            }
             var next=$('#next');/*获取下一张的按钮*/
            next.click(function () {/*下一张的按钮点击方法*/
                 nextImg();
            });
            function nextImg() {/*下一张图片*/
                index++;//索引自增
                if (index>=count){
                    index=0;/**/
                }
                changeImg(index);
            }
            btnli.hover(function () {/*鼠标悬停改变containli标签中的图片和btnli标签中的样式*/
                 index=$(this).index();/*获取鼠标悬停所在的btnli标签索引*/
                 changeImg(index);
            });

            play();
            function play(){ /*循环轮播*/
                time=setInterval(nextImg,2000);/*循环轮播时间和事件*/
            }
            function stop() {/*停止轮播*/
                clearInterval(time);
            }
            $('.contain ').mouseover(function () { /*鼠标移入停止轮播*/
                stop();
            });
            $('.contain ').mouseout(function () {/*鼠标移出开始轮播*/
                play();
            });
            $('span').mouseover(function () {
                stop();
            });
            $('span').mouseout(function () {
                play();
            });
            $('.btn').mouseover(function () {
                stop();
            });
            $('.btn').mouseout(function () {
                play();
            });
            

        });
    </script>
    <style>
        body,ul{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }

        #carousel{
            width: 100%;
            height: 400px;
            overflow: hidden;
            position: relative;
            z-index: 8;

        }
        #carousel:hover span{
            opacity: 0.7;
        }
        #carousel .contain li{
            height: 400px;
            z-index: 10;
        }
        #carousel .btn{
            display: inline-block;
            position: absolute;
            top: 360px;
            left:48%;
        }
        #carousel .btn li{
            cursor: pointer;
            display: inline-block;
            /*border: 1px solid red;*/
            width: 13px;
            height: 13px;
            text-align: center;
            line-height: 13px;
            z-index: 11;
            margin: 0 5px;
            background: url("image/dot.png") no-repeat -14px 0;
        }
        #carousel .btn .selectBtn{
            background: url("image/dot.png") no-repeat 0 0;
        }
        #carousel span{
            display: inline-block;
            color: blue;
            text-align: center;
            font-size: 80px;
            font-weight: 700;
            opacity: 0.1;
            cursor: pointer;
        }
        /*#carousel span:hover{*/
        /*opacity: 0.7;*/
        /*}*/
        #carousel #prev {
            position: absolute;
            top: 150px;
            left: 100px;
            z-index: 12;
        }
        #carousel #next {
            position: absolute;
            top: 150px;
            right: 100px;
            z-index: 12;
        }


    </style>

</head>
<body>
<div id="carousel">
    <ul class="contain">
        <li style="background: url('image/img1.jpg') no-repeat center"></li>
        <li style="background: url('image/img2.jpg') no-repeat center"></li>
        <li style="background: url('image/img3.jpg') no-repeat center"></li>
        <li style="background: url('image/img4.jpg') no-repeat center"></li>
    </ul>
    <ul class="btn">
        <li class="selectBtn"></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <span id="prev">&lt;</span>
    <span id="next">&gt;</span>
</div>
</body>
</html>

分享到：