jQuery 轮播图（带有导航按钮）

最新推荐文章于 2021-01-13 09:46:13 发布

weixin_30856965

最新推荐文章于 2021-01-13 09:46:13 发布

阅读量475

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wangdongwei/p/11353691.html

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <style type="text/css">
        *{margin: 0;padding: 0;list-style: none;}
        .slider{
            width: 500px;
            height: 332px;
            overflow: hidden;
            position: relative;
        }    
        .slider .slides{
            height: 332px;
            width: 2500px;
        }
        .slider .slide{
            float: left;
            width: 500px;
            height: 332px;
        }
        .slider .slide img{
            width: 500px;
            height: 332px;
        }
        
        #navDiv a{
                width: 15px;
                height: 15px;
                background-color: red;
                margin: 0 5px;
                float: left;
                opacity: 0.5;/*设置透明*/
                
        }
        #navDiv a.active{
            background-color: black;
        }
        #navDiv a:hover{   /*设置鼠标移入效果*/
            background-color: black;
                
        }
        #navDiv{
                position: absolute;
                bottom: 15px;
                left:200px ;
            }
    </style>
    </head>
    <body>
        <div class="container">
            <div class="header">
                <h1 class="text-muted">
                    jQuery Basic Slide
                </h1>
            </div>
            
            <div class="slider">
                <ul class="slides">
                    <li  class="slide"><img src="img/1.jpg"/></li>
                    <li  class="slide"><img src="img/2.jpg"/></li>
                    <li  class="slide"><img src="img/3.jpg"/></li>
                    <li  class="slide"><img src="img/4.jpg"/></li>
                    <li  class="slide"><img src="img/1.jpg"/></li>
                </ul>
                <div id="navDiv">
                <a  href="javascript:;" class="active"></a>
                <a  href="javascript:;"></a>
                <a  href="javascript:;"></a>
                <a  href="javascript:;"></a>
            </div>
            </div>
            
        </div>
    </body>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js">
        
    </script>
    <script type="text/javascript">
        $(document).ready(function(){
            //1.var动态属性
            var width=500;
            var speed=1000;
            var pause=2000; //多少时间换一次图
            var interval;
            //获取对应元素
            var $slider=$(".slider");
            var $slideContainer=$slider.find(".slides");//同=$(".slides") 用find()表现更清楚而已
            var $slide=$slideContainer.find(".slide");
            var $navDiv=$("#navDiv a");
            var index=0;
            var a=0;
            
            //2.setInterval 设置定时器
            function start(){ 
                interval=setInterval(function(){
                    //2.1对.slides动画效果 左移
                    $slideContainer.animate({"margin-left":"-="+width},speed,function(){
                        //判断图片到最后一张了
                        index++;
                        if(index==$slide.length-1){
                            index=0;
                            $slideContainer.css("margin-left",0);
                        }
                    });
                //2.2改变导航按钮颜色
                $navDiv.removeClass("active");
                var allA=document.getElementsByTagName("a");
                allA[a].style.backgroundColor="";
                a++;
                if(a==allA.length){
                    a=0;
                    
                }
                allA[a].style.backgroundColor="black";
                
                
                },pause);
            }
            start();
            //3.设置鼠标移入停止，移出又动起来
            $slider.on({          //on()写多个函数，同bind()
                mouseenter:function(){
                    clearInterval(interval);
                    interval=null;
                },
                mouseleave:function(){
                    start();
                }
            });
            //4.设置导航按钮
            //4.1点击切换图片
            $navDiv.click(function(){
//                alert($(this).index());
                var timer=$(this).index(); //获取a数组的下标值
                $slideContainer.animate({"margin-left":-(timer*width)},speed);
                index=timer;//重新设置下标计数值，使得点击后依旧对应
                a=timer;
                //4.2点击改变颜色
                //清除样式
                var allA=document.getElementsByTagName("a");
                allA[a].style.backgroundColor="";
                $navDiv.removeClass("active");
                //添加样式
                $(this).addClass("active");
            });
            
        })
    </script>
</html>

转载于:https://www.cnblogs.com/wangdongwei/p/11353691.html

weixin_30856965

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 轮播图（带有导航按钮）

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>  <link ...
复制链接

扫一扫