纯JS焦点图特效实例(可一个页面多用)

纯JS焦点图特效实例(可一个页面多用)_javascript技巧

实例如下：

<!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" />
<title>JS网页特效-无特效图片焦点图特效（可一个页面多用）</title>
<style type="text/css">
* { padding:0; margin:0; font-size:12px; }
ul, li { list-style: none; }
.indexFocus{border:1px solid #CCC; padding:2px;width:419px;height:185px; margin:0 auto;}
.indexFocus .focusBox{width:419px;height:185px;position:relative;margin:0 auto;position:relative}
.indexFocus .focusBox .bigPic{width:419px;height:185px;overflow:hidden;position:relative}
.indexFocus .focusBox .bigPic li{width:419px;height:185px}
.indexFocus .focusBox .bigPic img{width:419px;height:185px}
.indexFocus .focusBox .btn{height:16px;position:absolute;right:8px;bottom:4px;z-index:11}
.indexFocus .focusBox .btn ul li{width:15px;height:15px;line-height:15px;margin-right:2px;display:block;background:#fff;float:left;text-align:center;cursor:pointer}
.indexFocus .focusBox .btn .sel{width:15px;height:15px;background:#B90101;color:#fff}
.indexFocus .focusBox .picText_bg{width:100%;height:26px;position:absolute;left:0;bottom:0;background:#000;filter:alpha(opacity=50); /*IE*/-moz-opacity:0.5; /*MOZ , FF*/opacity:0.5;/*CSS3, FF1.5*/}
.indexFocus .focusBox .picText{width:100%;height:26px;line-height:26px;text-align:left;font-weight:bold;margin:0 auto;position:absolute;left:0;bottom:0;overflow:hidden;z-index:10;}
.indexFocus .focusBox .picText a{padding-left:10px;color:#fff;}
</style>
<style type="text/css">
* { padding:0; margin:0; font-size:12px; }
ul, li { list-style: none; }
.indexFocus{border:1px solid #CCC; padding:2px;width:419px;height:185px; margin:0 auto;}
.indexFocus .focusBox{width:419px;height:185px;position:relative;margin:0 auto;position:relative}
.indexFocus .focusBox .bigPic{width:419px;height:185px;overflow:hidden;position:relative}
.indexFocus .focusBox .bigPic li{width:419px;height:185px}
.indexFocus .focusBox .bigPic img{width:419px;height:185px}
.indexFocus .focusBox .btn{height:16px;position:absolute;right:8px;bottom:4px;z-index:11}
.indexFocus .focusBox .btn ul li{width:15px;height:15px;line-height:15px;margin-right:2px;display:block;background:#fff;float:left;text-align:center;cursor:pointer}
.indexFocus .focusBox .btn .sel{width:15px;height:15px;background:#B90101;color:#fff}
.indexFocus .focusBox .picText_bg{width:100%;height:26px;position:absolute;left:0;bottom:0;background:#000;filter:alpha(opacity=50); /*IE*/-moz-opacity:0.5; /*MOZ , FF*/opacity:0.5;/*CSS3, FF1.5*/}
.indexFocus .focusBox .picText{width:100%;height:26px;line-height:26px;text-align:left;font-weight:bold;margin:0 auto;position:absolute;left:0;bottom:0;overflow:hidden;z-index:10;}
.indexFocus .focusBox .picText a{padding-left:10px;color:#fff;}
</style>
<script language="javascript">
function mainfun(mainObj,t){
   function getID(id){return document.getElementById(id)}
   function getTag(tag,obj){return (typeof obj=='object'?obj:getID(obj)).getElementsByTagName(tag); }
   function alph(obj,n){if(document.all){obj.style.filter="alpha(opacity="+n+")";}}
   var cut = 0;
   var timer='';
   var num = getTag('li',getTag('div',getID(mainObj))[0]).length;
   var getpic = getTag('li',getTag('div',getID(mainObj))[0]);
   var getbtn = getTag('li',getTag('div',getID(mainObj))[1]);
   var gettext = getTag('li',getTag('div',getID(mainObj))[2]);
   for(i=0;i<num;i++){getpic[i].style.display="none";gettext[i].style.display="none";getbtn[i].onclick=(function(i){
    return function(){ getbtn[i].className="sel";changePic(i);}})(i);}
    getpic[cut].style.display="block";
    getbtn[cut].className="sel";
    gettext[cut].style.display="block";
   getID(mainObj).onmouseover=function(){clearInterval(timer);}
   getID(mainObj).onmouseout=function(){timer = setInterval(autoPlay,t);}
  function changePic(ocut){
   for(i=0;i<num;i++){cut=ocut;
    getpic[i].style.display="none";
    getbtn[i].className=""
    gettext[i].style.display="none";
    }
    getpic[cut].style.display="block";
    getbtn[cut].className="sel";
    gettext[cut].style.display="block" 

   }
   function autoPlay(){
    //alert(cut);
    if(cut>=num-1){cut=0}else{cut++}
    changePic(cut);
    }
    timer = setInterval(autoPlay,t);
  } 

function changeMenu(){
 function getID(id){return document.getElementById(id)}
 function getTag(tag,obj){return (typeof obj=='object'?obj:getID(obj)).getElementsByTagName(tag); }
 var sel=0;var menu = getID("menu");var getBtn = getTag("h2",menu); var getUl = getTag("ul",menu);var num = getTag("h2",menu).length;for(i=0;i<num;i++){
  getUl[i].style.display="none";
  getBtn[i].onclick=(function(i){
   return function(){
    clickMenu(i);
    }
   })(i);
  }
  getUl[sel].style.display="block";
 function clickMenu(sel){
 for(i=0;i<num;i++){
  getUl[i].style.display="none";
  }
  getUl[sel].style.display="block";
  }
 }
</script>
</head>
<body style="background:url(images/bodyBg.jpg) repeat #333;">
<h1 style="height:100px; line-height:100px; font-size:30px; font-family:'微软雅黑'; color:#FFF; text-align:center; background:url(images/bodyBg3.jpg) repeat-x bottom left; font-weight:normal">无特效图片焦点图特效（可一个页面多用）</h1>
<div style="background:#FFF; padding:50px;">
<!--效果开始-->
<div class="indexFocus">
 <div id="movePic1" class="focusBox">
  <div class="bigPic" id="oPic">
  <ul>
  <li><a href="#"><img src="images/ink_120615_10.jpg" alt=" www.jb51.net" /></a></li>
  <li><a href="#"><img src="images/ink_120615_11.jpg" alt=" www.jb51.net" /></a></li>
  <li><a href="#"><img src="images/ink_120615_12.jpg" alt=" www.jb51.net" /></a></li>
  <li><a href="#"><img src="images/ink_120615_10.jpg" alt=" www.jb51.net" /></a></li>
  <li><a href="#"><img src="images/ink_120615_11.jpg" alt=" www.jb51.net" /></a></li>
  </ul>
  </div>
  <div class="btn" id="oBtn">
  <ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  </ul>
  </div>
  <div class="picText" id="oText">
  <li><a href="http://www.jb51.net" target="_blank">web应用</a></li>
  <li><a href="http://www.jb51.net" target="_blank">IT云动态</a></li>
  <li><a href="http://www.jb51.net" target="_blank">HTML学习</a></li>
  <li><a href="http://www.jb51.net" target="_blank">图文特效集锦</a></li>
  <li><a href="http://www.jb51.net" target="_blank">文章特效集锦</a></li>
  </div>
  <div class="picText_bg"></div>
 </div>
 </div>
 <script type="text/javascript">mainfun("movePic1",2000)</script>
 <div style="height:30px;"></div>
 <div class="indexFocus">
 <div id="movePic2" class="focusBox">
  <div class="bigPic" id="oPic">
  <ul>
  <li><a href="#"><img src="images/ink_120615_12.jpg" alt=" www.jb51.net" /></a></li>
  <li><a href="#"><img src="images/ink_120615_10.jpg" alt=" www.jb51.net" /></a></li>
  <li><a href="#"><img src="images/ink_120615_11.jpg" alt=" www.jb51.net" /></a></li>
  </ul>
  </div>
  <div class="btn" id="oBtn">
  <ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  </ul>
  </div>
  <div class="picText" id="oText">
  <li><a href=http://www.jb51.net" target="_blank">HTML学习</a></li>
  <li><a href="http://www.jb51.net" target="_blank">图文特效集锦</a></li>
  <li><a href="http://www.jb51.net" target="_blank">文章特效集锦</a></li>
  </div>
  <div class="picText_bg"></div>
 </div>
 </div>
 <script type="text/javascript">mainfun("movePic2",3000)</script>
<!--End-->
</div>
<div style="height:200px; color:#FFF; padding-top:25px; line-height:28px; text-align:center; font-family:'微软雅黑'; background:url(images/bodyBg2.jpg) repeat-x top left">
<p style="font-size:16px;"> www.jb51.net<a style="color:#FFF" href="http://www.jb51.net" target="_blank">www.jb51.net</a></p>
</div>
</body>
</html>

以上这篇纯JS焦点图特效实例(可一个页面多用)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索js焦点图特效
javascript特效实例、javascript经典实例、javascript项目实例、javascript实例、javascript 特效，以便于您获取更多的相关知识。

时间： 2024-10-26 09:09:41

纯JS焦点图特效实例(可一个页面多用)_javascript技巧的相关文章

纯js实现瀑布流布局及ajax动态新增数据_javascript技巧

本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax模拟数据图片后,是将整个页面的所有图片都重新定位一次. 3. 程序是等所有图片加载完成后再读取图片的尺寸,实际中肯定不能这样做. 4. 实际项目中,应该由后台程序给出图片尺寸值,在js代码中直接使用图片的width属性. 本程序思路: html结构: <body> <div id=&quo

纯js网页画板(Graphics)类简介及实现代码_javascript技巧

今天需要在网页上画一个图谱,想到用JS,经过学习,和网上搜索,经过整理优化得到下面代码,注意不是用HTML5的canvas,而是用的纯js 复制代码代码如下: /* 以下画点,画线,画圆的方法,都不是用HTML5的canvas,而是用的纯js 用到了一些数学的三角函数方法以下代码是课堂随机写出,没有做更多优化 */ /* 面向对象封装,添加绘制矩形进一步优化代码 */ var Graphics = function(divId, color){ this.divId = divId; th

JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】_javascript技巧

本文实例讲述了JS实现显示带倒影的图片横排居中放大展示功能.分享给大家供大家参考,具体如下: <!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">

纯js实现瀑布流展现照片(自动适应窗口大小)_javascript技巧

用瀑布流来展现照片再好不过了,下面是瀑布流(每一行的长度等于浏览器窗口的长度)的一种实现方式,也可以用css3实现,很简单,谷歌一下你就知道. 我的思路大概是一张一张的图片插入,当这一行的图片保持长宽比例不变并且高度低于250时就完成一个了循环,即这一行插入进去了. 然后进入下一个循环插入下一行.公式很简单,假设这一行当前的高度为h,则插入一张高和宽为(x,y)的图片时,满足下列关系: h' * (w / h + y / x) = w w是浏览器窗口的宽度, 则 h' = w / (w / h

在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题_javascript技巧

复制代码代码如下: function include(path){ var a=document.createElement("script"); a.type = "text/javascript"; a.src=path; var head=document.getElementsByTagName("head")[0]; head.appendChild(a); } include("http://jqueryjs.google

纯js实现仿QQ邮箱弹出确认框_javascript技巧

代码非常简单,这里就不多废话了. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML> <HEAD> <TITLE>QQ邮箱的弹出层</TITLE> <meta http-equiv="Co

纯js写的分页表格数据为json串_javascript技巧

什么也不说了,直接上代码: 复制代码代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags" %> <% String path = request.getContextPath(); String ba

JS焦点图,JS 多个页面放多个焦点图的实例_javascript技巧

如下所示: <!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> <title>js同一页面可多次调用的图片幻

jQuery横向擦除焦点图特效代码分享_jquery

本文实例讲述了jQuery横向擦除焦点图特效.分享给大家供大家参考.具体如下: 迅雷jQuery横向擦除焦点图是一款基于jQuery实现的7屏横向擦除焦点图代码,有缩略图和标题,可以自定义标题. 运行效果图:-------------------查看效果下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. (1)在head区域引入CSS样式: <link rel="stylesheet" href="css/zzsc