前言

初学jquery 在网上看到的一片文章感觉不错便学习了下。代码上我做了自己的修改还加了许多学习的注释代码更易读
转载原文
本人的修改版源码 git

html源码

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html charset=utf-8" />
        <title>图片轮播切换</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script type="text/javascript" src="jquery-1.12.3.js"></script>
        <script type="text/javascript" src="jq.js"></script>
</head>
<body>
    <div id="banner">
        <div id="banner_bg"></div>
        <div id="banner_info"> </div> 
        <ul>
            <li class="on">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <div id="banner_list">
            <a href="https://xu455255849.github.io/" target="_blank" >
                <img src="./images/1.jpg" title="111" alt="z1111" width=800 height=480>
            </a>
             <a href="https://github.com/xu455255849/xu455255849.github.io" target="_blank" >
                <img src="./images/2.jpg" title="222" alt="z2222111" width=800 height=480>
            </a>
             <a href="#" target="_blank" >
                <img src="./images/3.jpg" title="333" alt="z333311" width=800 height=480>
            </a>
             <a href="#" target="_blank" >
                <img src="./images/4.jpg" title="444" alt="zh44411" width=800 height=480>
            </a>
        </div>
    </div>
</body>
</html>

样式

#banner {
	position: relative;
	width: 800px;
	height: 480px;
	border: 1px solid #666;
	overflow: hidden;
}
#banner_list img {
	border: 0px;
}
#banner_bg {
	position: absolute;
	bottom: 0;
	background-color: #000;
	height: 30px;
	opacity: 0.3;
	z-index: 999;
	cursor: pointer;
	width: 578px;
}
#banner_info {
	position: absolute;
	bottom: 0;
	left: 5px;
	height: 22px;
	color: #fff;
	z-index: 1000;
	cursor: pointer;
}
#banner ul {
	position: absolute;
	list-style: none;
	opacity: 0.8;
	border: 1px solid #fff;
	z-index: 1002;
	margin: 0;
	padding: 0;
	bottom: 3px;
	right: 5px;
}
#banner ul li {
	padding: 0px 8px;
	float: left;
	display: list-item;
	color: #fff;
	border: #e5eaff 1px solid;
	background-color: black;
	cursor: pointer;
	
}
#banner ul li.on {
	background-color: red;
	
	color: pink; 
}
#banner_list a {
	position: absolute;  /* 让图片重叠在一起 */
}

js代码

 var t = 0; 
 var n = 0;
 var count
 $(document).ready(function(){   
     count=$("#banner_list a").length;
     // count赋值为a长度 为4
     $("#banner_list a:not(:first-child)").hide();
     // 隐藏后面所有的a图片
     $("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));
     // 找到id为banner_info的html标签 设置为 a img 的alt属性值
     $("#banner_info").click(function(){window.open($("#banner_list a:first-child").attr('href'), "_blank")});
     //点击info栏 在新窗口打开href为list 的属性 的页面
     $("#banner li").click(function() {  // 以上为初始化函数 这里开始为循环体函数
         var i = $(this).text() - 1;//获取Li元素内的值，即1，2，3，4
         n = i;
       
         $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));
         //根据下标修改info
         $("#banner_info").unbind().click(function(){window.open($("#banner_list a").eq(i).attr('href'), "_blank")})
         //移除原有的点击事件 修改为新事件｛地址改为图片href｝
         $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
         // 返回显示的图片 消失 返回 小标为i的a 链接图片 显示
         document.getElementById("banner").style.background="";
         $(this).toggleClass("on"); 
         $(this).siblings().removeAttr("class");
     });
     t = setInterval("showAuto()", 2000);
     $("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 2000);});
 })
 
function showAuto()   // 定义循环函数 n自增
 {
     n = n >=(count - 1) ? 0 : ++n;  
     $("#banner li").eq(n).trigger('click');  //触发事件 开始执行内循环
 }

我修改的版本

现在大多都是带banner 和前进后退的slider 还发现作者的原版点击索引数字的时候如果点击2下就会有bug
会出现一个 class on都没有的现象
我在这2个方面作出了点改进。

修改点击bug

$('#banner ul li').removeClass('on'); $('#banner ul li').eq(n).addClass('on');

原理很简单点击的时候先移除所有的on样式，再把对应的图片添加on样式

添加前进后退按钮

//html部分
        <div class="slider-page">
                    <span class="slider-next"></span>
                    <span class="slider-prev"></span>
        </div>
    </div>
  //js文件  添加前后翻页按钮
        $('.slider-page').hide();
        $('#banner').hover(function() {
            $('.slider-page').show();
        },function(){
            $('.slider-page').hide();
        });
         
        $('.slider-prev').bind('click', function() {
            prev();
        });
        $('.slider-next').bind('click', function() {
            next();
        })

初始化页面的时候添加按钮为隐藏鼠标悬浮后显示并绑定点击事件

{% codeblock %}
function prev() {
            if(n > 0) {
                n = n-1;
            } else {
                n = count-1;
            }

            $("#banner_info").html($("#banner_list a").eq(n).find("img").attr('title'));
            //根据下标修改info
            $("#banner_info").unbind().click(function(){window.open($("#banner_list a").eq(n).attr('href'), "_blank")})
            //移除原有的点击事件 修改为新事件｛地址改为图片href｝
            $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(n).fadeIn(1000);
            // 返回显示的图片 消失 返回 下标为i的a 链接图片 显示
            $('#banner ul li').removeClass('on');
            $('#banner ul li').eq(n).addClass('on');
            
            

        };

         function next() {
            if(n < count-1) {
                n = n+1;
            } else {
                n = 0;
            }
            

            $("#banner_info").html($("#banner_list a").eq(n).find("img").attr('title'));
            //根据下标修改info
            $("#banner_info").unbind().click(function(){window.open($("#banner_list a").eq(n).attr('href'), "_blank")})
            //移除原有的点击事件 修改为新事件｛地址改为图片href｝
            $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(n).fadeIn(1000);
            // 返回显示的图片 消失 返回 下标为i的a 链接图片 显示
            $('#banner ul li').removeClass('on');
            $('#banner ul li').eq(n).addClass('on');
            //点击切换图片
            
            

        };
        {% endcodeblock %}


    定义事件函数 点击触发事件
    建议把js函数放到尾部 与jq 分开 以提高代码的可读性

后记

不知为啥。看到jq我就想做图片轮播可能是因为以前不懂代码的时候对图片轮播觉得非常高大上吧。。