html简单图片轮播的实现

港控/mmm° 2022-08-03 14:36 373阅读 0赞

这里的图片轮播方法是我从网上参考的方法，只是自己做了一些改进

先来贴一发代码

<!DOCTYPE HTML>
    <html>
    	<head>
    		<link rel="stylesheet" type="text/css" href="./css/init2.css">
    		<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
    		<script type="text/javascript" src="./js/test2.js"></script>
    	</head>
    	<body>
    		<div id="layout">
    			<header  class="clearfix">
    				<div id="banner">
    					<ul id="banner_img">
    						<li><img src="./img/s1.jpg"></li>
    						<li><img src="./img/s2.jpg"></li>
    						<li><img src="./img/s3.jpg"></li>
    					</ul>
    				</div>
    			</header>
    		</div>
    	</body>
    </html>

在这个html的目录下有三个同级的文件夹，img中放图片，css和js分别存放这个网页的css文件和js文件，这里用到了jquery，记得引入顺序，jquery一定要放在其他js前面。

html代码很简单，不做过多解释。

看一下引入的css，init2.css

*{
    	margin: 0px ;
    	padding: 0px ;
    }
    #layout{
    	width: 960px ;
    	margin: 0 auto ;
    }
    #banner{
    	position: relative;
    	overflow: hidden;
    	width: 600px;
    	height: 200px;
    	border-radius: 10px ;
    	border: 2px solid black;
    }
    #banner_img li{
    	float: left;
    	list-style-type: none;
    }
    #index{
    	position: absolute;
    	right: 8px ;
    	bottom: 8px ;
    }
    #index li{
    	float: left;
    	width: 16px ;
    	height: 16px ;
    	text-align: center;
    	line-height: 16px ;
    	border-radius: 5px ;
    	border:1px solid #FF7300 ;
    	background: white;
    	list-style: none;
    	margin-left: 8px ;
    	cursor: pointer;
    }
    .clearfix:after{
    	content: "" ;
    	height: 0px ;
    	display: block;
    	clear:both ;
    }
    .on
    {
    	background:#FF7300 ;
    }

css基本上和前面的html中的类对应，claerfix来清除浮动，on是代表轮播图片的索引中当前的正播放的图片的索引，其实就改个背景，这里的索引是后面动态加上去的，索引在html中看不到。主要思路就是把装图片的容器设置成overfl;hidden;

下面是一种比较简单的实现，利用jquery的fadeIn和fadeOut效果来实现。

//fadeIn and fadeOut
    var time ;
    var index = 1 ;
    var tolnum = 3 ;
    $(function(){
    <span style="white-space:pre">	</span>setInterval("showBanner("+tolnum+")",3000);
    });
    function showBanner(n)
    {
    <span style="white-space:pre">	</span>var ul = $("#banner_img") ;
    <span style="white-space:pre">	</span>ul.children().fadeOut("slow") ;
    <span style="white-space:pre">	</span>ul.children().eq(index).fadeIn("slow") ;
    <span style="white-space:pre">	</span>index = index+1>n-1 ? 0 : index+1 ;
    }

恩，不知道为什么到最后一张图片的时候会产生没有淡出的bug，不太懂，请大家指教。

第二种方法是利用jquery的animation来实现margin属性的过渡。

init();
    function init()
    {
    	$(function(){
    		var index = 0 ;
    		var adTime ;
    		var len = $("#banner_img li").length ;
    		addIndex(len) ;
    		var bannerLi = $("#index li");
    		//handle index
    		$("#index li").mouseover(function() {
    			index = $("#index li").index(this) ;
    			showImgs(index) ;
    		});
    		//toggleInterval
    	    $("#banner").hover(function(){
    	        clearInterval(adTimer);
    	    },function(){
    	        adTimer=setInterval(function(){
    	            //alert(index) ;
    	            showImgs(index);
    	            index++;
    	            if(index==len){
    	                index=0;
    	            }
    	        },2000) 
    	    }).trigger('mouseleave');
    	});
    } 
    //auto add index
    function addIndex(n)
    {
    	var ul = $("<ul id=\"index\"></ul>") ;
    	for(var i=1;i<=n;i++)
    	{
    		var li = $("<li></li>") ;
    		li.append(function(num){
    				return num
    			}(i)) ;
    		ul.append(li) ;
    	}
    	ul.children().first().addClass('on') ;
    	$("#banner_img").append(ul);
    }
    function showImgs(index)
    {
    	var adwidth=$("#banner_img>li:first").width();
    	$("#banner_img").stop(true, false) ;
    	//$("#banner_img").css('margin-left', -index*adwidth+"px");
    	$("#banner_img").animate({
                "marginLeft":-adwidth*index+"px"
            },1000);
    	$("#index li").removeClass('on').eq(index).addClass('on') ;
    }

hover（）是一种代替mouseenter和mouseleave的方法，听说比较好用。trigger（）来触发当前对象的一个状态，这里要先触发一次mouseleave的状态来初始化计时器，因为这里的设定是当鼠标移到$("\#banner")上就销毁定时器，锁定当前图片，移开鼠标就重新添加定时器。

<pre name="code" class="javascript">	$("#banner_img").animate({
                "marginLeft":-adwidth*index+"px"
            },1000);

这了就是对jquery中animation方法的使用，通过传进来的index来改变banner\_img的margin，这里是margin-left，所以图片就会从右往左刷（需要设置浮动），如果需要从下往上刷就设置margin-top就好了，还有我发现js中动态添加margin是不能触发css的transition的。