zoukankan      html  css  js  c++  java
  • 自己动手丰衣足食之轮播图一动态修改marginTop属性实现轮播图

    引言

         学习jQuery有年头了,刚开始学习时自己动手写过轮播图,放的久了以至于忘了大致思路了。现在转而做前端,抽空把jquery轮播图拿出来写一写,把各种思路都自己练习练习,这里主要使用动态修改marginTop来实现。

    实现原理

         1、除第一张图片外,其余图片全部隐藏,4张图片重叠起来。

         2、导航按钮添加mouseover和mouseleave事件。

         3、设置interval函数,启动定时器调用ShowImg函数。

         4、动态修改marginTop属性达到上下轮播的效果,说道动态修改margin属性,在以前滑动门中也是这个原理。

    效果图(图片引用自橡树小屋博客

    实现代码

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Index</title>
    <script type="text/javascript" src="js/jquery-1.4.1.js"></script>
    <style type="text/css">
    	*{margin: 0;padding: 0;}
    	ul li{list-style: none;}
    	#scrollpics{ 478px;height: 286px;overflow: hidden;position: relative;margin:30px 50px;}
    	.num{position:absolute;right: 8px;bottom: 8px;}
    	.num li {float:left;color:#FF7300;text-align: center; 16px;height: 16px;line-height: 16px;border: 1px solid #FF7300;background-color: #fff; border-radius: 10px;overflow: hidden;cursor: pointer;margin-left: 7px;}
    	.num li.on {color:#fff;background-color: #FF7300;}
    </style>
    <script type="text/javascript">
    	
    	var index=0;
    	var adTimer;
    
    
    	$(function(){
    		var len = $("ul.num li").length;
    		$(".num li").mouseover(function(){
    			index=$(".num li").index(this);
    			ShowImg(index);
    		});
    
    		$("#scrollpics").hover(function(){
    			clearInterval(adTimer);
    		},function(){
    			adTimer=setInterval(function(){
    				ShowImg(index);
    				index++;
    				if(index==len){
    					index=0;
    				}
    			},3000)
    		}).trigger('mouseleave');
    
    	});
    
    	function ShowImg(index){
    		var adHeight=$("#scrollpics>ul>li:first").height();
    
    		$(".slider").stop(true,false).animate({
    			"marginTop":-adHeight*index+"px"
    		},1000);
    
    		$(".num li").removeClass("on").eq(index).addClass("on");
    	}
    </script>
    </head>
    <body>
    	<div id="scrollpics">
    		<ul class="slider">
    			<li><img src="img/p1.jpg"></li>
    			<li><img src="img/p3.jpg"></li>
    			<li><img src="img/p4.jpg"></li>
    			<li><img src="img/p5.jpg"></li>
    		</ul>
    		<ul class="num">
    			<li class="on">1</li>
    			<li>2</li>
    			<li>3</li>
    			<li>4</li>
    		</ul>
    	</div>
    </div>
    </body>
    </html>
    
  • 相关阅读:
    Java设计模式菜鸟系列(四)工厂方法模式建模与实现
    决策树分类
    SVD神秘值分解
    省市区三级联动菜单(附数据库)
    POJ 3076 Sudoku (dancing links)
    HDOJ 4862 Jump
    BEGINNING SHAREPOINT&#174; 2013 DEVELOPMENT 第3章节--SharePoint 2013 开发者工具 站点设置
    Transparency Tutorial with C#
    【剑指offer】不用加减乘除做加法
    POJ2112_Optimal Milking(网洛流最大流Dinic+最短路Flody+二分)
  • 原文地址:https://www.cnblogs.com/sword-successful/p/4644172.html
Copyright © 2011-2022 走看看