jquery 轮播（自动）

最新推荐文章于 2024-09-01 22:20:57 发布

dingbu6511

最新推荐文章于 2024-09-01 22:20:57 发布

阅读量127

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Agrass/p/6595872.html

版权

<html>
<head>
    <title>轮播图</title>
    <style>
    *{margin: 0;padding: 0;}
    ul li{list-style: none;}
    /*轮播图*/
    .lbt{width: 70%;height:210px;background: #f7f7f7;position:relative;margin: auto;}
    .lbtnr{height: 210px;overflow: hidden;}
    .lbtnr ul li{height: 210px;}
    /*圆点*/
    .radius{width:110px;height:20px;position:absolute;left:45%;bottom:20px;}
    .radius li{width:10px;height:10px;border-radius:6px; cursor:pointer;float:left;margin:5px 10px 0 0;background:url("style/radius.png")}
    .radius li.xx{background:#69F;border: 1px solid #ddd;}
    /*左右*/
    .lbt-left,.lbt-right{width: 50px;height: 50px;position: absolute;top: 35%; cursor:pointer;}
    .lbt-left{background: url(style/a.png)no-repeat;}
    .lbt-right{right: 0px;background: url(style/a.png)no-repeat;background-position:-50px;}
    </style>
</head>
<body>
    <div class="lbt">
    <div class="lbtnr">
        <ul>
            <li style="background:url(style/lb1.png)no-repeat;background-size:cover"></li>
            <li style="background:url(style/lb2.png)no-repeat;background-size:cover"></li>
            <li style="background:url(style/lb3.png)no-repeat;background-size:cover"></li>
            <li style="background:url(style/lb4.png)no-repeat;background-size:cover"></li>
            <li style="background:url(style/lb5.png)no-repeat;background-size:cover"></li>
        </ul>
    </div>
    <div class="lbt-left"></div>
    <div class="lbt-right"></div>
    <ul class="radius">
        <li class="xx"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    </div>
</body>
<script src="style/jquery2.1.min.js"></script>
<script type="text/javascript">

var index=0;
     //点击小圆点 
$("ul.radius li").click(function(){
    //获取到点击原点的索引值
   var inow=$(this).index();
    //把手动点击的inow值赋值给图片索引index
   index=inow;
   play(index);
 });

$('.lbt-left').click(function(){
    index--;
    if(index<0){index=4;}
    play(index);
});

$('.lbt-right').click(function(){
    index++;
    if(index>4){index=0;}
    play(index);
});

function play(index){
    //为小圆点添加样式
    $("ul.radius li").eq(index).addClass("xx").siblings("li").removeClass("xx");

    //淡入淡出  
    $(".lbtnr ul").children().eq(index).fadeIn(300).siblings().fadeOut(300);
};

 //自动轮播
 /*
 function autoplay(){
    time=setInterval(function(){
        index++;
        if(index>4){index=0;}
        play(index);
        },3000);
     }
 autoplay();
 */

</script>
</html>

转载于:https://www.cnblogs.com/Agrass/p/6595872.html

dingbu6511

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 轮播（自动）

<html><head> <title>轮播图</title> <style> *{margin: 0;padding: 0;} ul li{list-style: none;} /*轮播图*/ .lbt{width: 70%;height:210px;ba...
复制链接

扫一扫