jquery实现轮播图

最新推荐文章于 2024-03-14 19:48:19 发布

polyfill

最新推荐文章于 2024-03-14 19:48:19 发布

阅读量546

点赞数

分类专栏： jQuery web 文章标签： jquery

本文链接：https://blog.csdn.net/sinat_32266863/article/details/74907914

版权

web 同时被 2 个专栏收录

2 篇文章 1 订阅

订阅专栏

jQuery

1 篇文章 0 订阅

订阅专栏

jquery实现轮播图

先放出源码，然后再做分析
Html部分：

<html>
    <head>
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
        <script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
    </head>
    <body>
        <div class="main">
            <a href = "">
                <img alt="图片1" title="图片1" src="xxx1.jpg">
            </a>
            <a href = "">
                <img alt="图片2" title="图片2" src="xxx2.jpg">
            </a>
            <a href = "">
                <img alt="图片3" title="图片3" src="xxx3.jpg">
            </a>
            <a href = "">
                <img alt="图片4" title="图片4" src="xxx4.jpg">
            </a>
            <ul>
                <li class = "selected">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>
    </body>
</html>

CSS部分：

*{
  margin:0;
  padding:0;
  list-style:none;
  border:none;
}
.main {
  position:relative;
  margin:0 auto;
  width:1089px;
  height:476px;
}
.main a{
position:absolute;
}

.main a img{
  width:100%;
}
.main ul{
  position:absolute;
  z-index:5;
  top:436px;
  left:949px;
}
.main ul li {
  margin:5px;
  font-size:22px;
  width:25px;
  height:25px;
  border-radius:50%;
  text-align:center;
  background:#ffffff;
  float:left;
  cursor:pointer;
}
.main ul li.selected{
background:#FF4040;
}

jquery部分：

var n = 0;
var time =null;  //不设置自动轮播
var count ;
$(function(){
  count = $(".main a").length; //获取图片数
  $(".main a:not(:first-child)").hide();  //不是首张图片都要隐藏
  $(".main ul li").on("click",function(){
    var index = $(this).text()-1;  //获取被点击的列表项中li的索引
    n = index;  //将选择的列表项li的索引赋给n
    console.log(n);  
    $(".main a").filter(":visible").fadeOut(500).parent().children().eq(index).fadeIn(500);  //将显示的图片fadeOut，然后让选中的li项fadeIn
    $(this).addClass("selected"); //给选中的li选中的样式
    $(this).siblings().removeClass("selected"); //将选中的li项的兄弟项的选中样式去除
  });
  time = setInterval("t()",5000); //给t()设置定时器，每5s执行
  $(".main").hover(
    function(){ clearInterval(time)},  //鼠标在图片上的时候清除定时器，不自动轮播
    function(){time = setInterval("t()",5000)}
  );
});
function t(){
if(n>=(count-1)){  //如果选中的li索引大于等于图片数（实际上就是代表选中的li是最后一个了）
n=0;  //让索引=0
}else{
    ++n;  //索引+1
}
  $(".main ul li").eq(n).trigger("click"); //让选中的li触发click事件
}

详情参考：图片轮播

polyfill

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery实现轮播图

jquery实现轮播图先放出源码，然后再做分析 Html部分：<html> <head> <meta content="text/html;charset=utf-8" http-equiv="Content-Type" /> <script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1
复制链接

扫一扫

专栏目录