图片自动播放功能-JS特效-爱易网页

图片自动播放功能

日期：2014-05-18　浏览次数：20198 次

以下是程序代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
  <title>图片自动播放 zzjs.net收集，站长特效网欢迎您。</title>
  <style type="text/css">
* {
	margin: 0;
	padding: 0
}
body {
	background: #1c1c1c;
	width: 100%;
	height: 100%
}
img {
	border: none
}
#imageFlow {
	position: absolute;
	top: 30px;
	left: 30%;
	width: 400px;
	height: 220px;
}
#imageFlow img {
	width: 200px;
	height: 200px
}
#imageFlow .mainOpacity{
	position: absolute;
	top: 0;
	left: 0;
	width: 400px;
	height: 220px;
	z-index: 999;
	background: #1f1f1f;
	opacity: 0.0;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	cursor: pointer
}
#imageFlow .leftOpacity {
	position: absolute;
	z-index: 998;
	top: 0;
	left: 0;
	width: 100px;
	height: 200px;
	background: #1f1f1f;
	opacity: 0.9;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
	filter: alpha(opacity=90);
}
#imageFlow .rightOpacity {
	position: absolute;
	z-index: 998;
	top: 0;
	left: 300px;
	width: 100px;
	height: 200px;
	background: #1f1f1f;
	opacity: 0.9;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
	filter: alpha(opacity=90);
}
#imageFlow .scrollbar {
	position: absolute;
	z-index: 1000;
	bottom: 0;
	left:0;
	background: transparent;
	border-bottom: 2px solid #292929;
	width: 400px;
	height: 18px;
	cursor: pointer;
}
#imageFlow .scrollbar .currentScroll {
	position: absolute;
	left: 0;
	top: 0px;
	width: 30px;
	height: 18px;
	border-bottom: 2px solid #fc4e08;
	background: #1c1c1c;
	text-align: center;
	color: #fff;
	font-weight: bold;
}
#imageFlow .bank{
	left: 0;
	top: 0;
	width:400px;
	height: 200px;
	overflow: hidden;
}
#imageFlow .imageList{
	list-style: none;
	width: 1700px;
	margin-left: 100px;
}
#imageFlow .imageList li{
	float: left;
	display: inline;
}
#imageFlow .imageList li a {
	width: 200px;
	height: 200px;
}
#content {
	position: absolute;
	top: 280px;
	left: 30%;
	width: auto;
	height: auto;
	color: #fff;
}
 </style>
   <script>
var sliderIMG = (function(){
	function getElementsByClass(object, tag, className) {
		var o = object.getElementsByTagName(tag);
		for ( var i = 0, n = o.length, ret = []; i < n; i++)
			if (o[i].className == className) ret.push(o[i]);
		if (ret.length == 1) ret = ret[0];
		return ret;
	}
	function MouseXY(e){
		if(window.event){
			return {x:window.event.offsetX, y:window.event.offsetY};
		}else{
			return {x:e.layerX, y:e.layerY};
		}
	}
	function addEvent(elem, type, handle){
		if(window.addEventListener){
			elem.addEventListener(type, handle, false);
		}else if(window.attachEvent){
			elem.attachEvent('on'+type, handle);
		}else{
			elem['on'+type] = handle;
		}
	}
	function _property(obj){
		var o = {};
		for(var pro in obj){
			o[pro] = obj[pro];
		}
		return o;
	}
	function imageFlow(id,properties){
		this.DIV = document.getElementById(id);
		this.DIVpros = _property(properties);
		this.init = function(){
			this.bank = getElementsByClass(this.DIV, 'div', 'bank');
			this.face = getElementsByClass(this.DIV, 'div', 'mainOpacity');
			this.current = getElementsByClass(this.DIV, 'span', 'currentScroll');
			this.count = this.DIVpros.count;
			this.spanWidth = this.bank.offsetWidth/this.count;
			this.current.style.width = this.spanWidth + 'px';
			this.current.innerHTML = 1;
			this.scrollBar = this.current.parentNode;
			this.index = 0;
			if(this.index == 0){
				this.current.sty</div></div>

<div class="clearfix"></div>
                    </div>
                    <nav aria-label="...">
                        <ul class="pager">
                            <li class="previous"><a href="4667">上一篇：狡猾的按钮特效</a></li>

<li class="next"><a href="1342">下一篇：很漂亮的图片平滑切换效果</a></li>
                        </ul>
                    </nav>

<div class="alert alert-warning" role="alert">
                        <strong>免责声明：</strong> 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
                    </div>

<div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/10809' title='阿里马云：我觉得互联网还有十年可以做 ' target="_blank">
                        阿里马云：我觉得互联网还有十年可以做 </a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34104' title='iPhone5S组件曝光 印证杀手级功能存在' target="_blank">
                        iPhone5S组件曝光 印证杀手级功能存在</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34367' title='马云自称在美国曾被绑票' target="_blank">
                        马云自称在美国曾被绑票</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34196' title='OPPO创始人陈明永：我们是怎么做营销的 ' target="_blank">
                        OPPO创始人陈明永：我们是怎么做营销的 </a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/10820' title='从3G牌照发放看中国4G规划效果 ' target="_blank">
                        从3G牌照发放看中国4G规划效果 </a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/10843' title='电信设备商淘金中国4G：华为中兴领衔' target="_blank">
                        电信设备商淘金中国4G：华为中兴领衔</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34345' title='阿里入股虎嗅：媒体的脊梁弯了？未必！' target="_blank">
                        阿里入股虎嗅：媒体的脊梁弯了？未必！</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/6903' title='联想架构调整后：Think品牌或推智能手机' target="_blank">
                        联想架构调整后：Think品牌或推智能手机</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34409' title='雷军会做赔钱生意？迅雷跌破发行价 市值仅7亿美元' target="_blank">
                        雷军会做赔钱生意？迅雷跌破发行价 市值仅7亿美元</a></li></div>
                   
                
        </ol>
    </div>
</div>

</div>

</div>
            </div>
            <div class="clearfix"></div>

<footer class=" footer navbar-bottom">
<em>友情链接：</em>
    
      <a href="http://www.aiyiweb.com/" target="_blank">爱易网 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云虚拟主机技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云服务器技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">程序设计技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">开发网站 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">APP开发教程 </a>            
    
<br />
<script type="text/javascript">(function(){document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E'));var bdcs = document.createElement('script');bdcs.type = 'text/javascript';bdcs.async = true;bdcs.src = 'http://znsv.baidu.com/customer_search/api/js?sid=15239353030108964139' + '&plate_url=' + encodeURIComponent(window.location.href) + '&t=' + Math.ceil(new Date()/3600000);var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(bdcs, s);})();</script>

Copyright © 2013-2026 爱易网页 当前在线：120人　
        网站在12时22分55秒内访问总人数：82303人
    当前 40.66%
　<a href="https://beian.miit.gov.cn" target="_blank">粤ICP备18100884号-2 </a>
<script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
<script>LA.init({ id: "JszEmKrtpbU59dY5", ck: "JszEmKrtpbU59dY5" })</script>

</footer>

</div>
   
</body>
</html>