div+css黑色焦点图(幻灯片效果非常不错) -- [图形特效]─ 深山工作室提供网络投票系统|微信公众号投票|微信公众号小程序|抖音小程序|百度小程序|微信公众号开发|企业网站建设

div+css黑色焦点图(幻灯片效果非常不错)

http://bbs.blueidea.com/thread-2983873-1-1.html 2010/7/2 13:05:11 深山行者字体:大中小浏览 13307

以下为详细代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<base href="http://hi.baidu.com/koen_li">
<title>黑色风格的JS焦点图</title>
<style type="text/css">
*{margin:0;padding:0;border:0;list-style:none;}
body{padding:20px;background:#eee;}
#myfocus{width:450px;height:296px;overflow:hidden;padding:6px 6px 24px;background:#333 url(http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100511/2010051111200423950.jpg) no-repeat;position:relative;}
#myfocus #myloading{position:absolute;top:0;left:0;z-index:9999;width:462px;height:326px;background:#333;color:#f60;font-size:12px;text-align:center;padding-top:90px;}
#myfocus #myloading .bg{position:absolute;top:0;left:0;z-index:-1;}/*载入画面*/
#myfocus .pics{width:450px;height:296px;overflow:hidden;position:relative;}
#myfocus .pics ul{height:296px;position:absolute;}
#myfocus .pics ul li{width:450px;height:296px;float:left;position:relative;}/*图片大小450px*296px*/
#myfocus .pics ul li div,#myfocus .pics ul li div span,#myfocus .pics ul li div a{display:block;position:absolute;bottom:0;left:0;width:100%;height:34px;}
#myfocus .pics ul li div span{filter:alpha(opacity=50);opacity: 0.5;background:#000;}/*文字标题的背景样式*/
#myfocus .pics ul li div a{line-height:34px;overflow:hidden;padding-left:16px;text-decoration:none;font-size:14px;color:#fff;font-weight:bold;}/*文字标题样式*/
#myfocus .mybtn{position:absolute;bottom:8px;right:8px;}
#myfocus .mybtn ul li{float:left;width:16px;height:6px;margin-left:4px;overflow:hidden;border:1px solid #000;background:#ccc;cursor:pointer;}
#myfocus .mybtn ul li.current{background:#f60;}
</style>
<script type="text/javascript">
/*design by koen @ 10nian5yue11ri*/
/*http://hi.baidu.com/koen_li*/
function setFocus(ID,t){//主函数...
function $(id) {return document.getElementById(id);}
function $$(tag,obj){return (typeof obj=='object'?obj:$(obj)).getElementsByTagName(tag);}
var n='';//标记
function showPics(num){
	if(n===num) return true;
	if(n==='') n=0;
	else n=num;
	var pics=$$('ul',ID)[0];
	var tit=$$('div',pics)[num];
	if (!pics.style.left){pics.style.left = 0+'px';}
    if (!tit.style.bottom||parseInt(tit.style.bottom)>-34){tit.style.bottom = -34+'px';}
	var endX=-num*$$('div',ID)[0].clientWidth;
	var goimg=function(){
		X=parseInt(pics.style.left);
		if (pics.movement){clearTimeout(pics.movement);}
		if(parseInt(pics.style.left)==endX) return true;
		if((endX-X)>0) X+=Math.ceil((endX-X) / 10);
		else X+=Math.floor((endX-X) / 10);
		pics.style.left=X+'px';
		pics.movement = setTimeout(goimg, 5);
	}
	var gotit=function(){
		var y=parseInt(tit.style.bottom);
		if (tit.movement){clearTimeout(tit.movement);}
		if(y==0) return true;
		y+=Math.ceil((0-y) / 10);
		if(parseInt(pics.style.left)==endX) tit.style.bottom=y+'px';
		if(y<0) tit.movement = setTimeout(gotit, 16);
	}
	goimg();
	gotit();
}
function classNormal() {//数字标签样式清除
    var focusBtnList = $$('li',$$('ul',ID)[1]);
    for (var i = 0; i < focusBtnList.length; i++) {
        focusBtnList[i].className = '';
    }
}
function focusChange() {//交互切换
    var focusBtnList = $$('li',$$('ul',ID)[1]);
    for (var i = 0; i < focusBtnList.length; i++) {
		focusBtnList[i].I=i;
		focusBtnList[i].onmouseover = function(){
        	showPics(this.I);
        	classNormal();
        	focusBtnList[this.I].className = 'current';
		}
	}
}
var autoFocusChange=function() {//自动运行
    if (atuokey) return;
    var focusBtnList = $$('li',$$('ul',ID)[1]);
    for (var i = 0; i < focusBtnList.length; i++) {
        if (focusBtnList[i].className == 'current') {
            var currentNum = i;
        }
    }
	if(currentNum<focusBtnList.length-1){
		showPics(currentNum+1);
       	classNormal();
       	focusBtnList[currentNum+1].className = 'current';
	}else if(currentNum==focusBtnList.length-1){
		showPics(0);
       	classNormal();
       	focusBtnList[0].className = 'current';
	}
}
var atuokey = '';
function init(){//初始化<div><span></span><a href="#">文字说明</a></div>
	var ul=$$('ul',ID)[0];
	var li=$$('li',ul);
	var NUM=li.length;
	var wid=$('myloading')?$$('div',ID)[1].clientWidth:$$('div',ID)[0].clientWidth;ul.style.width=wid*NUM+'px';
	for(var i=0;i<NUM;i++){
		var a=li[i].getElementsByTagName('a')[0];
		var img=li[i].getElementsByTagName('img')[0];
		li[i].innerHTML=li[i].innerHTML+'<div><span></span><a href="'+a+'">'+img.alt+'</a></div>';
	}
	var s='<div class="mybtn"><ul>';
	for(var i=0;i<NUM;i++){s+='<li></li>'}
	s+='</ul></div>';
	$(ID).innerHTML+=s;
	$(ID).removeChild($('myloading'));
	showPics(0);
    classNormal();
    $$('li',$$('ul',ID)[1])[0].className = 'current';
	$(ID).onmouseover = function() {
        atuokey = true;
		clearInterval(auto);
    }
    $(ID).onmouseout = function() {
        atuokey = false;
		auto=setInterval(autoFocusChange, T);
    }
}
var T=t*1000;//每帧图片停留的时间，1000=1秒
var auto='';
init();
focusChange();
auto=setInterval(autoFocusChange, T);
};
window.onload=function(){
	setFocus('myfocus',4);
}
</script>
</head>
<body>
<div id="myfocus">
	<div id="myloading">请稍候...<br /><br /><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051020541820883.gif" /><img class="bg" src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100511/2010051111200423950.jpg" /></div>
	<div class="pics">
    	<ul>
        	<li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018042735524.jpg" alt="图片1来源于网络，版权属于作者" /></a></li>
            <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018044355191.jpg" alt="图片2来源于网络，版权属于作者" /></a></li>
            <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018050315609.jpg" alt="图片3来源于网络，版权属于作者" /></a></li>
            <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018052886494.jpg" alt="图片4来源于网络，版权属于作者" /></a></li>
            <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018055365260.jpg" alt="图片5来源于网络，版权属于作者" /></a></li>
            <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018061333534.jpg" alt="图片6来源于网络，版权属于作者" /></a></li>
        </ul>
    </div>
</div>
</body>
</html>

以下为详细代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<base href="http://hi.baidu.com/koen_li">
<title>黑色风格的JS焦点图</title>
<style type="text/css">
*{margin:0;padding:0;border:0;list-style:none;}
body{padding:20px;background:#eee;}
#myfocus{width:450px;height:296px;overflow:hidden;padding:6px;border:1px solid #333;font:12px Verdana, Arial, Helvetica, sans-serif;background:#000 url(http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100511/2010051111200423950.jpg) no-repeat;position:relative;}
#myfocus #myloading{position:absolute;top:0;left:0;z-index:9999;width:462px;height:326px;background:#333;color:#f60;font-size:12px;text-align:center;padding-top:90px;}
#myfocus #myloading .bg{position:absolute;top:0;left:0;z-index:-1;}/*载入画面*/
#myfocus .pics{width:450px;height:296px;overflow:hidden;position:relative;}
#myfocus .pics ul{height:296px;position:absolute;}
#myfocus .pics ul li{width:450px;height:296px;float:left;position:relative;}/*图片大小450px*296px*/
#myfocus .pics ul li div,#myfocus .pics ul li div span,#myfocus .pics ul li div a{display:block;position:absolute;bottom:0;left:0;width:100%;height:34px;}
#myfocus .pics ul li div span{filter:alpha(opacity=50);opacity: 0.5;background:#000;}/*文字标题的背景样式*/
#myfocus .pics ul li div a{line-height:34px;overflow:hidden;padding-left:16px;text-decoration:none;font-size:14px;color:#fff;font-weight:bold;}/*文字标题样式*/
#myfocus .mybtn{position:absolute;bottom:10px;right:12px;}
#myfocus .mybtn ul li{text-align:center;float:left;width:18px;height:16px;line-height:16px;margin-left:4px;overflow:hidden;border:1px solid #000;background:#ccc;cursor:pointer;}
#myfocus .mybtn ul li.current{background:#f60;color:#fff;}
</style>
<script type="text/javascript">
/*design by koen @ 10nian5yue11ri*/
/*http://hi.baidu.com/koen_li*/
function setFocus(ID,t){//主函数...
function $(id) {return document.getElementById(id);}
function $$(tag,obj){return (typeof obj=='object'?obj:$(obj)).getElementsByTagName(tag);}
var n='';//标记
function showPics(num){
 if(n===num) return true;
 if(n==='') n=0;
 else n=num;
 var pics=$$('ul',ID)[0];
 var tit=$$('div',pics)[num];
 if (!pics.style.left){pics.style.left = 0+'px';}
    if (!tit.style.bottom||parseInt(tit.style.bottom)>-34){tit.style.bottom = -34+'px';}
 var endX=-num*$$('div',ID)[0].clientWidth;
 var goimg=function(){
  X=parseInt(pics.style.left);
  if (pics.movement){clearTimeout(pics.movement);}
  if(parseInt(pics.style.left)==endX) return true;
  if((endX-X)>0) X+=Math.ceil((endX-X) / 10);
  else X+=Math.floor((endX-X) / 10);
  pics.style.left=X+'px';
  pics.movement = setTimeout(goimg, 5);
 }
 var gotit=function(){
  var y=parseInt(tit.style.bottom);
  if (tit.movement){clearTimeout(tit.movement);}
  if(y==0) return true;
  y+=Math.ceil((0-y) / 10);
  if(parseInt(pics.style.left)==endX) tit.style.bottom=y+'px';
  if(y<0) tit.movement = setTimeout(gotit, 16);
 }
 goimg();
 gotit();
}
function classNormal() {//数字标签样式清除
    var focusBtnList = $$('li',$$('ul',ID)[1]);
    for (var i = 0; i < focusBtnList.length; i++) {
        focusBtnList[i].className = '';
    }
}
function focusChange() {//交互切换
    var focusBtnList = $$('li',$$('ul',ID)[1]);
    for (var i = 0; i < focusBtnList.length; i++) {
  focusBtnList[i].I=i;
  focusBtnList[i].onmouseover = function(){
         showPics(this.I);
         classNormal();
         focusBtnList[this.I].className = 'current';
  }
 }
}
var autoFocusChange=function() {//自动运行
    if (atuokey) return;
    var focusBtnList = $$('li',$$('ul',ID)[1]);
    for (var i = 0; i < focusBtnList.length; i++) {
        if (focusBtnList[i].className == 'current') {
            var currentNum = i;
        }
    }
 if(currentNum<focusBtnList.length-1){
  showPics(currentNum+1);
        classNormal();
        focusBtnList[currentNum+1].className = 'current';
 }else if(currentNum==focusBtnList.length-1){
  showPics(0);
        classNormal();
        focusBtnList[0].className = 'current';
 }
}
var atuokey = '';
function init(){//初始化<div><span></span><a href="#">文字说明</a></div>
 var ul=$$('ul',ID)[0];
 var li=$$('li',ul);
 var NUM=li.length;
 var wid=$('myloading')?$$('div',ID)[1].clientWidth:$$('div',ID)[0].clientWidth;ul.style.width=wid*NUM+'px';
 for(var i=0;i<NUM;i++){
  var a=li[i].getElementsByTagName('a')[0];
  var img=li[i].getElementsByTagName('img')[0];
  li[i].innerHTML=li[i].innerHTML+'<div><span></span><a href="'+a+'">'+img.alt+'</a></div>';
 }
 var s='<div class="mybtn"><ul>';
 for(var i=0;i<NUM;i++){s+='<li>'+(i+1)+'</li>'}
 s+='</ul></div>';
 $(ID).innerHTML+=s;
 $(ID).removeChild($('myloading'));
 showPics(0);
    classNormal();
    $$('li',$$('ul',ID)[1])[0].className = 'current';
 $(ID).onmouseover = function() {
        atuokey = true;
  clearInterval(auto);
    }
    $(ID).onmouseout = function() {
        atuokey = false;
  auto=setInterval(autoFocusChange, T);
    }
}
var T=t*1000;//每帧图片停留的时间，1000=1秒
var auto='';
init();
focusChange();
auto=setInterval(autoFocusChange, T);
};
window.onload=function(){
 setFocus('myfocus',4);
}
</script>
</head>
<body>
<div id="myfocus">
 <div id="myloading">请稍候...<br /><br /><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051020541820883.gif" /><img class="bg" src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100511/2010051111200423950.jpg" /></div>
 <div class="pics">
     <ul>
         <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018042735524.jpg" alt="图片1来源于网络，版权属于作者" /></a></li>
            <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018044355191.jpg" alt="图片2来源于网络，版权属于作者" /></a></li>
            <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018050315609.jpg" alt="图片3来源于网络，版权属于作者" /></a></li>
            <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018052886494.jpg" alt="图片4来源于网络，版权属于作者" /></a></li>
            <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018055365260.jpg" alt="图片5来源于网络，版权属于作者" /></a></li>
            <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018061333534.jpg" alt="图片6来源于网络，版权属于作者" /></a></li>
        </ul>
    </div>
</div>
</body>
</html>

前一页:没有了

后一页:javascript实现图片预览功能

相关阅读: 深山行者留言系统V3.3发布; div+css设置列表li超出部分显示省略号; 商业版增加线路日期报价功能样式选择(增加了3个日期报价效果); 非常酷的时钟，图片制作精美,还有日期显示; 山西省青年旅行社; 使用uiautomatorviewer连接模拟器页面报错：Error while obtaining UI hierarchy XML file; 当鼠标经过表单,表单承现选择状效果; 带时钟的台历：一个非常非常漂亮的台历

更多信息>>栏目类别选择: 百度小程序开发; 微信小程序开发; 微信公众号开发; uni-app; asp函数库; ASP; DIV+CSS; HTML; python

更多>>同类信息: div+css黑色焦点图(幻灯片效果非常不错); javascript实现图片预览功能; 比较实用的利用javascript按比例相应缩放图片大小; 一个效果非常不错图片载入loading等待效果; 利用css实现图片选中后显示文字与图片效果; 利用CSS里面的A:hover鼠标滑过缩略图时放大图片

更多>>最新添加文章: dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT; Android移动端自动化测试：使用UIAutomatorViewer与Selenium定位元素; 抖音直播音挂载小雪花懂车帝小程序; javascript获取浏览器指纹可以用来做投票; 火狐Mozilla Firefox出现：无法载入您的Firefox配置文件它可能已经丢失或是无法访问问题解决集合处理办法; 在Android、iOS、Windows、MacOS中微信小程序的文件存放路径; python通过代码修改pip下载源让下载库飞起; python里面requests.post返回的res.text还有其它的吗

更多>>随机抽取信息: uni-app开发微信小程序使用button的open-type为contact调用微信客服不能用view或者js调用; 深山网吧留言板系统v4.0; asp怎么得到像论坛一样的第几楼分页; javascript_vb_asp代码转换器; 小旋风ASP服务器安装文件下载; 深山留言板母亲节效果

更多标签热门标签

字母右击失效滚动条添加二级 xhtml 客户端考试列右键重复 asp csss 蓝色理想日期 Java 伪类 asp.net 面板 weatherxml 风格连云港旅游时间过期 confirm strong 强聊展示 Dreamweaver title 编辑宽 qq right 利用position把div放在flash上 RegExp 页面 textarea label hack 光标 dreawmeaver 命名模式 javascript 上传 media PSD openwin 网站 em

div+css黑色焦点图(幻灯片效果非常 不错)

div+css黑色焦点图(幻灯片效果非常不错)