<!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>听说你也是——文字控</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<SCRIPT src="js/js.js" type=text/javascript></SCRIPT> </head>
<body>
<div id="ifocus">
<div id="ifocus_pic">
<div id="ifocus_piclist" style="left:0; top:0;">
<ul>
<li><a href="#"><img src="img/01.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/02.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/03.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/04.jpg" alt="" /></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">今天大地在阳光下向我细语,用一种已被遗忘的语言</li>
</ul>
</div>
</div>
<div id="ifocus_btn">
<ul>
<li class="current"><img src="img/btn_01.jpg" alt="" /></li>
<li class="normal"><img src="img/btn_02.jpg" alt="" /></li>
<li class="normal"><img src="img/btn_03.jpg" alt="" /></li>
<li class="normal"><img src="img/btn_04.jpg" alt="" /></li>
</ul>
</div>
</div>
</body>
</html>
 @charset "utf-8";
/* CSS Document */ *
{
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;
} #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(i/ifocus_btn_bg.gif) 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;
}
 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;
}
if (xpos > final_x) {
var dist = Math.ceil((xpos - final_x)/10);
xpos = xpos - dist;
}
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';
}
}
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);
}
}
}
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);
}
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);
}
}
addLoadEvent(iFocusChange);

js带缩略图的图片切换效果的更多相关文章

  1. js原生带缩略图的图片切换效果

    js原生带缩略图的图片切换效果 本例中用到的 moveElement(elementID,final_x,final_y,interval)是来自<JavaScript DOM编程艺术(中文第二 ...

  2. jquery带按钮的图片切换效果

    <!doctype html> <html> <head> <meta charset="gb2312"> <title> ...

  3. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  4. JS实现简单的图片切换效果

    使用图片进行点击切换效果 <!doctype html> <html lang="en"> <head> <meta charset=&q ...

  5. js应用之实现图片切换效果

    数组的操作与应用 数组的定义 var 数组名=new Array(); //创建空数组 var 数组名=new Array(size);//创建指定数组长度的数组 var 数组名=new Array( ...

  6. jquery简单的图片切换效果,支持pc端、移动端的banner图片切换开发

    详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...

  7. js实现中文简繁切换效果

    html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  8. 10款好用的 jQuery 图片切换效果插件

    jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...

  9. 极简的js点击组图切换效果

    程序员进行前端开发时,时常要用到点击切换组图的动画效果,网上确实有很多此类插件,但是都很麻烦,乌糟糟无数代码,有那个看的时间,自己都能把功能写完了.在这里我提供一段极简的js点击组图切换效果代码,包含 ...

随机推荐

  1. C、Shell、Perl基于Tomcat开发CGI程序环境配置

    基于Tomcat7.0版本号配置CGI开发环境,步聚例如以下: 以我的Tomcat7安装文件夹为例:TOMCA_HOME = /Users/yangxin/Documents/devToos/java ...

  2. 从 setNeedsLayout 说起

    本文从 setNeedsLayout 这个方法说起,分享与其相关的 UIKit 视图交互.使用场景等内容. UIKit 为 UIView 提供了这些方法来进行视图的更新与重绘: public func ...

  3. msql 按值排序

    ORDER BY find_in_set(status,'705,710,706,1027,707,709,708'),create_time desc

  4. How to: cgminer (Bitcoin, Litecoin etc.) + AMD Radeon driver install on CentOS

    UPDATE 7/7/13: If you want to use Catalyst drivers version 12.8 you will find that X won’t start (er ...

  5. MFC 设置窗口背景图片

    //在Onpaint函数中加入如下代码 //----------给窗口设置背景图片---------------------------- CPaintDC dc(this); CRect myrec ...

  6. 如何在网页上显示html代码?

    a: 把代码写在文本区域 <textarea> 标签中.可以设置 disabled="disabled" 属性,禁止用户操作.b: 把要显示在html文档中标签的 &q ...

  7. java strtus2 DynamicMethodInvocation配置(二)

    前面一章讲了下动态配置的方法.那样,能够直接动态的调用action里面的方法, 这里展示一种配置更少,更简洁的一种方法. 在前一章其他不变的情况下,改变配置文件 <package name=&q ...

  8. php模板引擎

    http://baike.baidu.com/link?url=HmXfdJBv3zpCdnZPeaSmZmqDBHlyTBnz9Rmb5it-jf1_NLHfaku6_i8ssUYbnaTQEBD4 ...

  9. Ext.Net学习笔记03:Ext.Net MessageBus用法

    发布和订阅消息 Ext.Net MessageBus 的本质是一个消息订阅机制,ExtJS中没有这种机制,所以MessageBus的Ext.Net实现的,但并不是原创,这种功能在dojo中早就实现了, ...

  10. html-----009

    </head> <!-- 通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面. <p> 垂直框架</p> 本例演示:如何使用三份不同的文档制作一个垂直框 ...