焦点图轮换显示效果

最新推荐文章于 2022-07-29 22:20:06 发布
最新推荐文章于 2022-07-29 22:20:06 发布
阅读量533 收藏
点赞数
分类专栏： wwe js脚本 文章标签： javascript function class filter border xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhdd1234/article/details/6054928
版权

<!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=gb2312" />
<meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>焦点图轮换显示效果，sky整理收集。</title>
<style type="text/css">
/* Reset style */
* { margin:0; padding:0; word-break:break-all; }
body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-size:1em; }
a { color:#0287CA; text-decoration:none; }
 a:hover { text-decoration:underline; }
ul, li { list-style:none; }
fieldset, img { border:none; }
legend { display:none; }
em, strong, cite, th { font-style:normal; font-weight:normal; }
input, textarea, select, button { font:12px Helvetica, Arial, sans-serif; }
table { border-collapse:collapse; }
html { overflow:-moz-scrollbars-vertical; } /*Always show Firefox scrollbar*/
/* iFocus style */
#ifocus { width:525px; height:245px; margin:20px; border:1px solid #DEDEDE; background:#F8F8F8; }
 #ifocus_pic { display:inline; position:relative; float:left; width:410px; height:225px; overflow:hidden; margin:10px 0 0 10px; }
  #ifocus_piclist { position:absolute; }
  #ifocus_piclist li { width:410px; height:225px; overflow:hidden; }
  #ifocus_piclist img { width:410px; height:225px; }
 #ifocus_btn { display:inline; float:right; width:91px; margin:9px 9px 0 0; }
  #ifocus_btn li { width:91px; height:57px; cursor:pointer; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }
  #ifocus_btn img { width:75px; height:45px; margin:7px 0 0 11px; }
  #ifocus_btn .current { background: url() no-repeat; opacity:1; -moz-opacity:1; filter:alpha(opacity=100); }
 #ifocus_opdiv { position:absolute; left:0; bottom:0; width:410px; height:35px; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }
 #ifocus_tx { position:absolute; left:8px; bottom:8px; color:#FFF; }
  #ifocus_tx .normal { display:none; }
</style>
<script type="text/javascript">
function $(id) { return document.getElementById(id); }
function addLoadEvent(func){
 var oldonload = window.onload;
 if (typeof window.onload != 'function') {
  window.onload = func;
 } else {
  window.onload = function(){
   oldonload();
   func();
  }
 }
}
function moveElement(elementID,final_x,final_y,interval) {
  if (!document.getElementById) return false;
  if (!document.getElementById(elementID)) return false;
  var elem = document.getElementById(elementID);
  if (elem.movement) {
    clearTimeout(elem.movement);
  }
  if (!elem.style.left) {
    elem.style.left = "0px";
  }
  if (!elem.style.top) {
    elem.style.top = "0px";
  }
  var xpos = parseInt(elem.style.left);
  var ypos = parseInt(elem.style.top);
  if (xpos == final_x && ypos == final_y) {
  return true;
  }
  if (xpos < final_x) {
    var dist = Math.ceil((final_x - xpos)/10);
    xpos = xpos + dist;
  }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
  if (xpos > final_x) {
    var dist = Math.ceil((xpos - final_x)/10);
    xpos = xpos - dist;
  }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
  if (ypos < final_y) {
    var dist = Math.ceil((final_y - ypos)/10);
    ypos = ypos + dist;
  }
  if (ypos > final_y) {
    var dist = Math.ceil((ypos - final_y)/10);
    ypos = ypos - dist;
  }
  elem.style.left = xpos + "px";
  elem.style.top = ypos + "px";
  var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
  elem.movement = setTimeout(repeat,interval);
}
function classNormal(iFocusBtnID,iFocusTxID){
 var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');
 var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');
 for(var i=0; i<iFocusBtns.length; i++) {
  iFocusBtns[i].className='normal';
  iFocusTxs[i].className='normal';
 }
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
function classCurrent(iFocusBtnID,iFocusTxID,n){
 var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');
 var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');
 iFocusBtns[n].className='current';
 iFocusTxs[n].className='current';
}
function iFocusChange() {
 if(!$('ifocus')) return false;
 $('ifocus').onmouseover = function(){atuokey = true};
 $('ifocus').onmouseout = function(){atuokey = false};
 var iFocusBtns = $('ifocus_btn').getElementsByTagName('li');
 var listLength = iFocusBtns.length;
 iFocusBtns[0].onmouseover = function() {
  moveElement('ifocus_piclist',0,0,5);
  classNormal('ifocus_btn','ifocus_tx');
  classCurrent('ifocus_btn','ifocus_tx',0);
 }
 if (listLength>=2) {
  iFocusBtns[1].onmouseover = function() {
   moveElement('ifocus_piclist',0,-225,5);
   classNormal('ifocus_btn','ifocus_tx');
   classCurrent('ifocus_btn','ifocus_tx',1);
  }
 }
 if (listLength>=3) {
  iFocusBtns[2].onmouseover = function() {
   moveElement('ifocus_piclist',0,-450,5);
   classNormal('ifocus_btn','ifocus_tx');
   classCurrent('ifocus_btn','ifocus_tx',2);
  }
 }
 if (listLength>=4) {
  iFocusBtns[3].onmouseover = function() {
   moveElement('ifocus_piclist',0,-675,5);
   classNormal('ifocus_btn','ifocus_tx');
   classCurrent('ifocus_btn','ifocus_tx',3);
  }
 }
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
setInterval('autoiFocus()',5000);
var atuokey = false;
function autoiFocus() {
 if(!$('ifocus')) return false;
 if(atuokey) return false;
 var focusBtnList = $('ifocus_btn').getElementsByTagName('li');
 var listLength = focusBtnList.length;
 for(var i=0; i<listLength; i++) {
  if (focusBtnList[i].className == 'current') var currentNum = i;
 }
 if (currentNum==0&&listLength!=1 ){
  moveElement('ifocus_piclist',0,-225,5);
  classNormal('ifocus_btn','ifocus_tx');
  classCurrent('ifocus_btn','ifocus_tx',1);
 }
 if (currentNum==1&&listLength!=2 ){
  moveElement('ifocus_piclist',0,-450,5);
  classNormal('ifocus_btn','ifocus_tx');
  classCurrent('ifocus_btn','ifocus_tx',2);
 }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
 if (currentNum==2&&listLength!=3 ){
  moveElement('ifocus_piclist',0,-675,5);
  classNormal('ifocus_btn','ifocus_tx');
  classCurrent('ifocus_btn','ifocus_tx',3);
 }
 if (currentNum==3 ){
  moveElement('ifocus_piclist',0,0,5);
  classNormal('ifocus_btn','ifocus_tx');
  classCurrent('ifocus_btn','ifocus_tx',0);
 }
 if (currentNum==1&&listLength==2 ){
  moveElement('ifocus_piclist',0,0,5);
  classNormal('ifocus_btn','ifocus_tx');
  classCurrent('ifocus_btn','ifocus_tx',0);
 }
 if (currentNum==2&&listLength==3 ){
  moveElement('ifocus_piclist',0,0,5);
  classNormal('ifocus_btn','ifocus_tx');
  classCurrent('ifocus_btn','ifocus_tx',0);
 }
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
addLoadEvent(iFocusChange);
</script>
</head>
<body>
<a href="<#ZC_BLOG_HOST#>">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>
<!--欢迎来到站长特效网，我们网站收集大量高质量js特效，提供许多广告代码下载，网址：www.zzjs.net，zzjs@msn.com,用.net打造靓站-->
<div id="ifocus">
 <div id="ifocus_pic">
  <div id="ifocus_piclist" style="left:0; top:0;">
   <ul>
    <li><a href="http://zzjs.net/"><img src="/image/1.jpg" alt=""  οnlοad="return imgzoom(this,600);" οnclick="javascript:window.open(this.src);" style="cursor:pointer;"/></a></li>
    <li><a href="http://zzjs.net/"><img src="/image/2.jpg" alt=""  οnlοad="return imgzoom(this,600);" οnclick="javascript:window.open(this.src);" style="cursor:pointer;"/></a></li>
    <li><a href="http://zzjs.net/"><img src="/image/3.jpg" alt=""  οnlοad="return imgzoom(this,600);" οnclick="javascript:window.open(this.src);" style="cursor:pointer;"/></a></li>
    <li><a href="http://zzjs.net/"><img src="/image/4.jpg" alt=""  οnlοad="return imgzoom(this,600);" οnclick="javascript:window.open(this.src);" style="cursor:pointer;"/></a></li>
   </ul>
  </div>
  <div id="ifocus_opdiv"></div>
  <div id="ifocus_tx">
   <ul>
    <li class="current">梦幻西游，我的最爱</li>
    <li class="normal">东海湾，跑步进行中……</li>
    <li class="normal">建业城，游戏人生的起步点……</li>
    <li class="normal">站长特效网，哈哈，sky欢迎您……</li>
   </ul>
  </div>
 </div>
 <div id="ifocus_btn">
  <ul>
   <li class="current"><img src="/image/1.jpg" alt=""  οnlοad="return imgzoom(this,600);" οnclick="javascript:window.open(this.src);" style="cursor:pointer;"/></li>
   <li class="normal"><img src="/image/2.jpg" alt=""  οnlοad="return imgzoom(this,600);" οnclick="javascript:window.open(this.src);" style="cursor:pointer;"/></li>
   <li class="normal"><img src="/image/3.jpg" alt=""  οnlοad="return imgzoom(this,600);" οnclick="javascript:window.open(this.src);" style="cursor:pointer;"/></li>
   <li class="normal"><img src="/image/4.jpg" alt=""  οnlοad="return imgzoom(this,600);" οnclick="javascript:window.open(this.src);" style="cursor:pointer;"/></li>
  </ul>
 </div>
</div><!--ifocus end-->
</body>
</html>

brock
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
怎样设置图片轮换css,手把手教你用纯css3实现轮播图效果
weixin_34638021的博客
08-03 1301
首先先看demo吧，点击查看demo一、随便说几句css3动画效果的强大不言而喻，自它出现一直热度不减，它与js动画的优劣也一直成为前端界争论的话题，不可置疑的是css3动画的出现在一定程度上降低了动画效果的实现难度，利于前端的学习，其精简的代码量把我们从烦人的js调试中解放出来，当然css的动画效果有其局限性，我们不能只用css3模拟出全部的就是动画，另外就是浏览器的兼容性问题。我们这次用css...
JS、JQ实现焦点图轮播效果
qq_36190858的博客
07-02 1458
JS、JQ实现焦点图轮播效果   JS实现焦点图轮播效果    效果图：     代码如下，复制即可使用：  (不过里面的图片路径需要自己改成自己的图片路径，否则是没有图片显示的哦) &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; ...
jQuery cxSlide 焦点图轮换
zaixianshouce的博客
08-01 189
cxSlide 是一个简单易用的焦点图展示插件，支持水平、纵向切换，透明过渡切换。 已支持 CSS 动画过渡切换。通过 CSS 动画切换，可以展示更多效果。 版本： jQuery v1.7+ jQuery cxSlide v2.0.2 注意事项： 内部会自动创建切换按钮元素，也可在外部直接创建，若外部已创建，内部将跳过此步骤； 展示图片未超过 1 张时，会隐藏切换按钮元素。 ...
漂亮的jQuery焦点图-图片轮换，完美实现
06-24 1257
看看预览：演示demo：http://www.daqianduan.com/demo/img-scroll-jquery.html原文：http://www.daqianduan.com/jquery-focus-img-2/
基于jQuery实现的焦点轮换效果
goosman-lei
03-06 1352
上面就是界面效果. 源码下载: http://d.download.csdn.net/down/2100796/lgg201 源码: 注意, 需要引入jquery, 请到官方网站下载焦点轮换特效<!--.author-information{background: #BBBBBB; width: 500px; height: 100px;
焦点图的实现
WeXio的博客
06-25 1032
前言     前两篇博客写了自定义播放器和弹幕的实现，这次说点常用的技术，那就是焦点图的实现。当然网上有很多优秀的焦点图模板可以借鉴（我才不会说我也是借鉴来的），但万变不离宗，我们不仅要懂得怎么运用模板，还要看懂代码，写一个真正属于自己的效果。 分析     下载一个网上找的模板，直接贴上代码和效果图，然后来分析啦~ 效果图 HTML
焦点图（轮播图）
qq_45659638的博客
07-29 1915
使用js练习如何制作焦点图，用到定时器。
myFocus制作网页焦点图 实现图片轮播效果
一个程序员-二白的博客
09-26 497
简单3步，你即可以用上myFocus。 Step 1. 在html的标签内引入相关文件 提示：符合条件的情况下，引入风格文件(js/css)可省，引入myFocus库即可。那么风格文件是如何自动引入的？详情请看myFocus的文件结构与自动引入风格文件机制。 Step 2. 创建myFocus标准的html结构，并填充你的内容
图片渐变轮换焦点图效果特效代码
03-20
7. 响应式设计：考虑到现代网页需要适应不同设备和屏幕尺寸，好的焦点图组件应具备响应式设计，能够根据设备特性自适应调整布局和显示效果。 8. 优化与性能：为了保证用户体验，图片轮播组件的性能优化也很重要。...
焦点图图片轮换.zip
09-02
焦点图是一种常见的网页设计元素，用于展示一组重要或吸引人的图片，并通过自动或用户操作进行循环切换，以突出显示不同内容。在这个项目中，开发者使用HTML、CSS和JavaScript（可能是jQuery或其他类似的库）来实现...
隐藏显示轮换式Flash焦点图代码
01-23
本文将深入探讨“隐藏显示轮换式Flash焦点图代码”的相关知识点，帮助您理解和创建这样的动态效果。 首先，让我们了解什么是隐藏显示。在网页设计中，隐藏显示通常是指元素在页面上根据特定条件（如用户交互或时间...
JS4屏焦点图轮换代码.zip_JS4屏焦点图轮换代码
09-23
3. **index.jpg**：可能是用来演示焦点图轮换效果的一个示例图片，或者作为默认图片在代码运行时显示。 4. **懒人图库.txt**：这可能是一个文本文件，提供了图片资源的来源或者使用指南，方便开发者获取和替换图片。...
jquery 图片轮换效果
12-01
【jQuery 图片轮换效果详解】 在Web开发中，经常需要实现图片轮换的效果来吸引用户的注意力或展示一系列相关的图片。jQuery作为一个强大的JavaScript库，提供了简单易用的API，使得实现这种效果变得轻松。本篇文章...
JS带纵向缩略图的焦点图片切换（可自动播放 五幅）
Fongjing的专栏
02-16 2185
带纵向缩略图的焦点图片（可自动播放/五幅）仿游戏网首页最新游戏展示
将当前窗口最大化代码JS代码
zhdd1234的专栏
10-28 2211
function MaxTheWindow()         {                 self.moveTo(0,0);                 self.resizeTo(screen.availWidth,screen.availHeight);         } 最小化、最大化、关闭窗口 网页上
javascript操作table（insertRow()，deleteRow()，insertCell()，deleteCel...
zhdd1234的专栏
03-02 1953
insertRow() 方法 定义和用法 insertRow() 方法用于在表格中的指定位置插入一个新行。 语法 tableObject.insertRow(index) 返回值 返回一个 TableRow，表示新插入的行。 说明 该方法创建一个新的 TableRow 对象，表示一个新的 标记，并把它插入表中的指定位置。 新行将被插入 index 所在行之前。若 inde
parentNode，firstChild，parentNode，nextSibling;
zhdd1234的专栏
03-02 1422
Untitled Document                          function test1() {                  var node = document.getElementById("imgid2");                    var pimg = node.parentNode.firstChild;
js实现7幅图片轮换显示
最新发布
05-26
这段代码将在ID为“slideshow”的DIV中显示7张图片，然后使用JavaScript代码来轮换显示这些图片。定时器将每2秒钟调用一次“changeImage”函数，该函数将当前图像隐藏，增加当前图像的索引，然后显示下一个图像。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值