jquery缩略图大图滚动轮播

最新推荐文章于 2024-04-16 09:02:39 发布

xlb_123

最新推荐文章于 2024-04-16 09:02:39 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端开发 js相关文章标签： css jquery 缩略图滚动

本文链接：https://blog.csdn.net/qq736150416/article/details/52396124

web前端开发同时被 2 个专栏收录

153 篇文章

订阅专栏

js相关

89 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的轮播图与小图切换功能。通过图片点击事件来切换显示的大图，同时为每个小图添加了阴影效果以增强用户体验。该示例还包含了jQuery库的运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如图：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--以最高ie的模式打开-->
    <meta charset="UTF-8">
    <title>测试</title>
    <link href="css/common.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

</head>
<body class="bg">
<!--banner-->
<div class="banner_box">
    <div class="big_banner_img">
        <ul id="big_banner">
            <li><a href="" ><img src="images/test01.jpg" width="100%"></a></li>
            <li><a href="" ><img src="images/test01.jpg" width="100%"></a></li>
            <li><a href="" ><img src="images/test01.jpg" width="100%"></a></li>
            <li><a href="" ><img src="images/test01.jpg" width="100%"></a></li>
        </ul>
    </div>
    <div class="banner_list">
        <ul id="small_banner">
            <li>
                <div  class="yy active">
                    <img src="images/2015925104413672.jpg" text="http://www.baidu.com/"></div> </li>
            <li>
                <div class="yy">  <img src="images/2015925104413672.jpg" text="http://www.qq.com/"> </div></li>
            <li>  <div class="yy"><img src="images/2015925104413672.jpg" text="http://sc.chinaz.com"></div> </li>
            <li>  <div class="yy"><img src="images/2015925104413672.jpg" text="http://sc.chinaz.com"></div> </li>
        </ul>
    </div>
</div>
<!--banner-->
<script src="js/scroll_sl.js"></script>
</body>
</html>

common.css：
/*banner*/
.banner_box{
    width: 100%;
    height: 452px;
    float: left;
}
.banner_box .banner_list{
     width: 982px;
    height: 68px;
    margin: 0 auto;
    position: relative;
    top: -51px;
}
.banner_box .banner_list ul{
    width: 982px;
    height:68px;
    float: left;
}
.banner_box .banner_list ul li{
    width: 101px;
    height:57px;
    float: left;
    margin-right: 16px;
    margin-top: 3px;
/*   -moz-box-shadow:0px 3px 6px 0px #666;
    -webkit-box-shadow:0px 3px 6px 0px #666;
    box-shadow:0px 3px 6px 0px #666;
    cursor: pointer;
    behavior: url(css/PIE.htc);*/
}
.banner_box .banner_list ul li .yy{
    width: 101px;
    height:57px;
    margin-top: 3px;
    margin-right: 16px;
    -moz-box-shadow:0px 3px 6px 0px #666;
    -webkit-box-shadow:0px 3px 6px 0px #666;
    box-shadow:0px 3px 6px 0px #666;
    cursor: pointer;
    behavior: url(css/PIE.htc);
}
.banner_box .banner_list ul li img{
    width: 101px;
    height: 57px;

}
.banner_box .banner_list ul li .active{
    border: 3px solid #f9fdff;
    margin-top: 0;
    box-shadow:0px 3px 6px 0px #666;
}
.banner_box .big_banner_img{
     width: 100%;
     height: 420px;
}
.banner_box .big_banner_img ul{
    width: 100%;
    height: 420px;
    float: left;
    overflow: hidden;
}
.banner_box .big_banner_img ul li{
    display: none;
    width: 100%;
    height: 420px;
    float: left;
}
/*banner*/
scroll_sl.js：
var i_big_banner =0;
$("#big_banner li").eq(0).show();
$("#small_banner li").click(function() {

   var in_d = $(this).index();
   var li_length=$("#small_banner li").size();
   //alert(in_d);
   $("#small_banner li").find(".yy").removeClass("active")
   $(this).find(".yy").addClass("active");
   $("#big_banner li").hide();
   $("#big_banner li").eq(in_d).fadeIn(2500);
   if(in_d==li_length-1)
   {
      i_big_banner=0;
   }
   else
   {
      i_big_banner=in_d+1;
   }
});
show_banner();
function show_banner() {
   if (i_big_banner > $("#small_banner li").size() - 1) {
      i_big_banner = 0;
   }
   $("#small_banner li img").eq(i_big_banner).click();
   setTimeout("show_banner()",6000);

}