文档章节

js banner滚动特效

别人说我名字很长
 别人说我名字很长
发布于 2014/11/08 00:17
字数 642
阅读 1187
收藏 7
<style>
#iFocusx{position:relative; height:547px;};
.w-slider{width:100%; overflow:hidden;z-index:1;}
.pos-abs{position:absolute;}
.pos-rel{position:relative; height:547px; width:100%; overflow:hidden;}
.slider-scroll{width:100%; background:transparent;}
.slider-main{position: absolute;top: 0; left: 0;height:547px; width:4323px;}
.slider-main .current{ display:block;}
.slider-main li{width:1441px;height:547px; text-align:center; float: left; overflow:hidden;}
.slider-ctrl{ width:1441px; margin:0 auto;  text-align:center; height:35px;z-index:9999;  position: absolute;top:370px;}
.slider-ctrl .slider-ctrl-con{ display:inline-block;width:30px;height:10px;margin:0 1px;background-color: #fafafa;text-indent:-10em;overflow:hidden;cursor:pointer;border-radius:5px;-moz-box-shadow:1px 1px 1px #A9A9A9 inset;-webkit-box-shadow:1px 1px 1px #A9A9A9 inset;box-shadow:1px 1px 1px #A9A9A9 inset;background:#D3D3D3; margin-top:140px; vertical-align:top}
.slider-ctrl .current{background-color: #009896;-moz-box-shadow:1px 1px 1px #1678A0 inset;-webkit-box-shadow:1px 1px 1px #1678A0 inset;box-shadow:1px 1px 1px #1678A0 inset;}
.slider-ctrl .slider-ctrl-prev,.slider-ctrl .slider-ctrl-next{opacity:.5;position:absolute;z-index:1;overflow:hidden;width:30px;height:35px;cursor:pointer;text-indent:-10em;}
.slider-ctrl .slider-ctrl-prev:hover,.slider-ctrl .slider-ctrl-next:hover{opacity:1;}
.slider-ctrl .slider-ctrl-prev{background-position:6px top;left:0;top:0; display:none;}
.slider-ctrl .slider-ctrl-next{background-position:-6px -45px;right:0; top:-35px;}

</style>
<!--banner内容-->
<div id="iFocusx">
  <div id="js_slider" class="w-slider pos-rel">
     <ul class="slider-main">
     	<li class="slider-main-img" style="background:url(http://www.lycmd.com/uploads/allimg/141107/1-14110G620140-L.jpg) no-repeat center">
            <div class="w clearfix"> <b></b> <a href="/show/shouyehuandengpian/2014/1107/77.html" class="i_f_links track"></a> </div>
          </li>
<li class="slider-main-img" style="background:url(http://www.lycmd.com/uploads/allimg/141010/003.jpg) no-repeat center">
            <div class="w clearfix"> <b></b> <a href="/show/shouyehuandengpian/2014/1010/29.html" class="i_f_links track"></a> </div>
          </li>
<li class="slider-main-img" style="background:url(http://www.lycmd.com/uploads/allimg/141010/002.jpg) no-repeat center">
            <div class="w clearfix"> <b></b> <a href="/show/shouyehuandengpian/2014/1010/28.html" class="i_f_links track"></a> </div>
          </li>
<li class="slider-main-img" style="background:url(http://www.lycmd.com/uploads/allimg/141010/ima_29.jpg) no-repeat center">
            <div class="w clearfix"> <b></b> <a href="/show/shouyehuandengpian/2014/1010/27.html" class="i_f_links track"></a> </div>
          </li>
      
    </ul>
      <div class="slider-ctrl" id="slider-ctrl">
         <span class="slider-ctrl-con">1</span> 
         <span class="slider-ctrl-con">2</span> 
         <span class="slider-ctrl-con">3</span>
          <span class="slider-ctrl-con">4</span>
      </div>
  </div>
</div>
<script src="http://www.lycmd.com/js/jquery-1.7.1.min.js"></script>
<script>
	//当改变窗口时重新设置下盒子宽度
	var win_w = document.body.offsetWidth;
	window.onresize = function(){
		win_w = document.body.offsetWidth;
		$("#js_slider .slider-main li").width(win_w);
		$(".slider-main").width(win_w*$("#js_slider .slider-main li").length);
		rolling();
	};
	$("#js_slider .slider-main li").width(win_w);
	$(".slider-main").width(win_w*$("#js_slider .slider-main li").length);
	
	window.onload = rolling();
	function rolling(){
		var oDiv = document.getElementById("js_slider");	
		var oUl =   oDiv.getElementsByTagName("ul")[0];
		var oLi = oUl.getElementsByTagName("li");
		var aLi = document.getElementById("slider-ctrl").getElementsByTagName("span");
		var now = 0;		
		for(var i= 0; i<aLi.length;i++)
		{
			aLi[i].index = i;
			aLi[i].onmouseover = function(){
				now=this.index;
				tab();
			}	
		}
		
		function tab(){
			for(var i= 0; i<aLi.length;i++){
				aLi[i].className ="slider-ctrl-con";
				}
				startMove(oUl, {left: -win_w*now});
				aLi[now].className+=" current";	
		}
		
		function next()
		{
			now++
			if(now==aLi.length)
			{
				now=0;
			}
			tab();
		}
		var timer=setInterval(next, 6000);
		oDiv.onmouseover=function ()
		{
			clearInterval(timer);
		};
		
		oDiv.onmouseout=function ()
		{
			timer=setInterval(next, 6000);
		};
	}



	function getStyle(obj, name)
{
	if(obj.currentStyle)
	{
		return obj.currentStyle[name];
	}
	else
	{
		return getComputedStyle(obj, false)[name];
	}
}


//startMove(oDiv, {width: 400, height: 400})


function startMove(obj, json, fnEnd)
{
	clearInterval(obj.timer);
	obj.timer=setInterval(function (){
		var bStop=true;		//假设:所有值都已经到了
		
		for(var attr in json)
		{
			var cur=0;
			
			if(attr=='opacity')
			{
				cur=Math.round(parseFloat(getStyle(obj, attr))*100);
			}
			else
			{
				cur=parseInt(getStyle(obj, attr));
			}
			
			var speed=(json[attr]-cur)/6;
			speed=speed>0?Math.ceil(speed):Math.floor(speed);
			
			if(cur!=json[attr])
				bStop=false;
			
			if(attr=='opacity')
			{
				obj.style.filter='alpha(opacity:'+(cur+speed)+')';
				obj.style.opacity=(cur+speed)/100;
			}
			else
			{
				obj.style[attr]=cur+speed+'px';
			}
		}
		
		if(bStop)
		{
			clearInterval(obj.timer);
						
			if(fnEnd)fnEnd();
		}
	}, 30);
}
</script>



© 著作权归作者所有

上一篇: net/url
下一篇: os/exec
别人说我名字很长
粉丝 58
博文 262
码字总数 113407
作品 0
济南
程序员
私信 提问
分享14个超酷的视差滚动效果网站

日期:2012-3-31 来源:GBin1.com Javascript视差滚动特效最早出现的时候使用多个不同的透明PNG背景图片叠放来实现,如果我们移动鼠标,将会以不同的速度移动不同层次上 的图片,产生层次感效...

gbin1
2012/03/31
0
0
《JavaScript实用效果整理》系列分享专栏

整理一些使用的JavaScript效果,在Web开发中遇到的比较好的动态效果,都收藏在这里,对以后的网站开发增加不少的色彩 《JavaScript实用效果整理》已整理成PDF文档,点击可直接下载至本地查阅...

开元中国2015
2018/10/29
0
0
被遗忘的CSS和HTML(二)

前言 先前写了一篇《被遗忘的CSS和HTML(一)》,后来因为各种事情,懒得写。最近把文章分享到掘金收获了不少点赞和鼓励,决定就再写点,希望从另一个角度去看一些问题的解决方法,还是那句话...

VeeQun
2018/06/05
0
0
分享10个超赞的画布Canvas,SVG和CSS3相关的jQuery插件

jQuery插件开发绝对是jQuery框架最强大的一个特性。数以万计的开发人员开发了各种不同功能和特性的jQuery插件,使得jQuery框架如此的成功和流行。随着HTML5,CSS3的发展,javascript在web开发...

gbin1
2012/07/14
5.4K
6
用CSS3制作50个超棒动画效果教程

CSS3为我们带来了令人惊叹的新特性,而最有趣的就是CSS动画。今天彬Go向大家推荐这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动。为了能够预览到这些惊人的CSS3技术带来的动...

鉴客
2010/08/12
7.5K
1

没有更多内容

加载失败,请刷新页面

加载更多

gradle grovvy中的闭包

1. 无参数的闭包 //这b1就是一个闭包def b1={ println "hello b1"}//定义方法,包含闭包类型的参数def method1(Closure closure){closure()}//执行method1method1(b1) 执行结果 ...

edison_kwok
43分钟前
3
0
基于Spring Boot + Dubbo的全链路日志追踪(一)

一、 概要 当前公司后端整体架构为:Spring Boot + Dubbo。由于早期项目进度等原因,对日志这块没有统一的规范,基本上是每个项目自己管自己的日志。这也对后面的问题排查带来了很大的困难,...

明天以后
今天
7
0
安装fastdfs文件服务器步骤

1、安装libfastcommon wget https://github.com/happyfish100/libfastcommon/archive/master.zip 解压后安装 cd fastcommon-master ./make.sh ./make.sh install 2、安装 FastDFS,从sourcef......

lsjlgo
今天
3
0
MySQL 5.7 免安装版配置

下载地址:https://dev.mysql.com/downloads/mysql/ 安装步骤 1.下载zip解压到目录下 2.配置环境变量 新建系统变量:MYSQL_HOME,值:D:\DevelopmentTool\Mysql-5.7.26-winx64 修改path变量:...

华山猛男
今天
7
0
java map的遍历

//从大的角度可以分为两类Set<String> set=map.keySet();这里面还可以分为3类, 从set的角度来分 //Set<Map.Entry<String, String>> entery=map.entrySet(); public class Test { public sta......

南桥北木
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部