图片轮播

来源：互联网发布：琅琊榜2 知乎编辑：程序博客网时间：2024/05/16 11:42
<!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>
0 0