jquery实现京东轮播图的简单写法

最新推荐文章于 2023-03-30 22:06:06 发布

weixin_30606669

最新推荐文章于 2023-03-30 22:06:06 发布

阅读量282

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/web001/p/8386986.html

版权

今天来写一个轮播图的案例，之前的博客中是有写过的，不过都是通过原生js来写的，比较复杂一些，今天来通过jquary的简单几句代码就可以实现这个轮播图效果。来看代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{ margin:0; padding:0;}
    ul,li{list-style: none;}
    a{text-decoration: none;}
    .box{ width:720px; height:340px; margin:0 auto;position:relative;}
    .box ul{ width:720px; height:340px;}
    .box ul li{position: absolute;z-index: 101;width:720px; height:340px;display: none;}
    .box ul li:first-child{display: block}
    .box ul li img{border:0;width:100%;height:100%}
    .arrLeft,.arrRight{position:absolute;top:50%;margin-top:-30px;color:#333;font-size:50px;z-index: 999}
    .arrRight{right:5px}
    .arrLeft{left:5px;}
</style>
<body>
<div class="box">
    <ul>
        <li><img src="img/pic1.jpg"/></li>
        <li><img src="img/pic2.jpg"/></li>
        <li><img src="img/pic3.jpg"/></li>
        <li><img src="img/pic4.jpg"/></li>
    </ul>
    <div class="arrow">
        <a href="javascript:void(0)" class="arrLeft"> < </a>
        <a href="javascript:void(0)" class="arrRight"> > </a>
    </div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
    $(function(){
        var num=0;
        $(".arrRight").click(function(){
            var liLength = $("li").length;
            num++;
            if(num==liLength){
                num=0;
            }
            $(".box li").eq(num).fadeIn().siblings().fadeOut();
        });
        $(".arrLeft").click(function(){
            var liLength = $("li").length;
            num--;
            if(num==-1){
                num=liLength-1;
            }
            $(".box li").eq(num).fadeIn().siblings().fadeOut();
        })
    })
</script>

</body>
</html>

效果图如下：

当然我的布局比较简单，用在项目中的时候可以稍微更改修饰一下即可。

好了，今天就到这里！

转载于:https://www.cnblogs.com/web001/p/8386986.html

weixin_30606669

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery实现京东轮播图的简单写法

今天来写一个轮播图的案例，之前的博客中是有写过的，不过都是通过原生js来写的，比较复杂一些，今天来通过jquary的简单几句代码就可以实现这个轮播图效果。来看代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Ti...
复制链接

扫一扫