两种html幻灯片效果
650) this.width=650;" src="http://img1.51cto.com/attachment/201307/165757318.jpg" title="QQ截图20130730165507.jpg" /><!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div class="slide-contente">
<div class="slide-pic">
<script>
var widths = 760; //这个数值是效果显示的宽度
var heights = 280; //这个数值是效果显示的高度
//以下是图片地址和链接地址 请注意每个图片都对应一个链接地址
img1 = new Image();
img1.src = '1.JPG'; //把src=''之内的地址换成您自己的图片地址
img1.title = '1';
url1 = new Image();
url1.src = '#';
img2 = new Image();
img2.src = '3.jpg'; //把src=''之内的地址换成您自己的图片地址
img2.title = '2';
url2 = new Image();
url2.src = '#';
img3 = new Image();
img3.src = '4.jpg'; //把src=''之内的地址换成您自己的图片地址
img3.title = '3';
url3 = new Image();
url3.src = '#';
img4 = new Image();
img4.src = '5.jpg'; //把src=''之内的地址换成您自己的图片地址
img4.title = '4';
url4 = new Image();
url4.src = '#';
img5 = new Image();
img5.src = '5.jpg'; //把src=''之内的地址换成您自己的图片地址
img5.title = '5';
url5 = new Image();
url4.src = '#';
var counts = 5; //这个数值是共有几张图片
//天极伊永恒原创
var nn = 1;
var key = 0;
function change_img()
{
if (key == 0) {
key = 1;
}
else if (document.all)
{
document.getElementById("pic").filters[0].Apply();
document.getElementById("pic").filters[0].Play(duration = 2);
}
eval('document.getElementById("pic").img' + nn + '.src');
eval('document.getElementById("pic").title=img' + nn + '.title');
eval('document.getElementById("url").url' + nn + '.src');
for (var i = 1; i <= counts; i++) {
document.getElementById("xxjdjj" + i).className = 'axx';
}
document.getElementById("xxjdjj" + nn).className = 'bxx';
nn++;
if (nn > counts) {
nn = 1;
}
tt = setTimeout('change_img()', 5000);
}//图片切换速度
function changeimg(n) {
nn = n;
window.clearInterval(tt);
change_img();
}
document.write('<style>');
document.write('.axx{padding:1px 7px;border-left:#cccccc 1px solid;}');
document.write('a.axx:link,a.axx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#666;}');
document.write('a.axx:active,a.axx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#999;}');
document.write('.bxx{padding:1px 7px;border-left:#cccccc 1px solid;}');
document.write('a.bxx:link,a.bxx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}');
document.write('a.bxx:active,a.bxx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}');
document.write('</style>');
document.write('<div style="width:' + widths + 'px;height:' + heights + 'px;overflow:hidden;text-overflow:clip;">');
document.write('<div><a id="url"><img id="pic" style="border:0px;filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward)" width=' + widths + ' height=' + heights + ' /></a></div>');
document.write('<div style="filter:alpha(style=1,opacity=10,finishOpacity=80);background: #888888;width:100%-2px;text-align:right;top:-22px;position:relative;margin:1px;height:12px;padding:0px;margin:0px;border:0px;">');
for (var i = 1; i < counts + 1; i++) {
document.write('<a href="changeimg(' + i + ');" id="xxjdjj' + i + '" class="axx" target="_self">' + i + '</a>');
}
document.write('</div></div>');
change_img();
</script>
</div>
</div>
</body>
</html>
650) this.width=650;" src="http://img1.51cto.com/attachment/201307/165832934.jpg" title="QQ截图20130730165527.jpg" /><html>
<head>
</head>
<body>
<div id="">
<div class="" id="" name="商品列表">
<div id="" class="">
<style type="text/css">
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
</style>
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img width="222px" height="180px" src="1.jpg" title="仙圣苦荞茶---系列7" border="0" onerror=""http://blog.51cto.com/viewpic.php?refimg=" + this.src='noimage.gif'" /></a>
<a href="#"><img width="222px" height="180px" src="2.jpg" title="仙圣苦荞茶---系列6" border="0" onerror=""http://blog.51cto.com/viewpic.php?refimg=" + this.src='noimage.gif'" /></a>
<a href="#"><img width="222px" height="180px" src="3.jpg" title="仙圣苦荞茶---系列5" border="0" onerror=""http://blog.51cto.com/viewpic.php?refimg=" + this.src='noimage.gif'" /></a>
<a href="#"><img width="222px" height="180px" src="4.jpg" title="仙圣苦荞茶---系列4" border="0" onerror=""http://blog.51cto.com/viewpic.php?refimg=" + this.src='noimage.gif'" /></a>
<a href="#"><img width="222px" height="180px" src="5.jpg" title="仙圣苦荞茶---系列3" border="0" onerror=""http://blog.51cto.com/viewpic.php?refimg=" + this.src='noimage.gif'" /></a>
<a href="#"><img width="222px" height="180px" src="5.jpg" title="仙圣苦荞茶---系列3" border="0" onerror=""http://blog.51cto.com/viewpic.php?refimg=" + this.src='noimage.gif'" /></a>
<a href="#"><img width="222px" height="180px" src="5.jpg" title="仙圣苦荞茶---系列3" border="0" onerror=""http://blog.51cto.com/viewpic.php?refimg=" + this.src='noimage.gif'" /></a>
<a href="#"><img width="222px" height="180px" src="5.jpg" title="仙圣苦荞茶---系列3" border="0" onerror=""http://blog.51cto.com/viewpic.php?refimg=" + this.src='noimage.gif'" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
var speed = 10;
var tab = document.getElementById("demo");
var tab1 = document.getElementById("demo1");
var tab2 = document.getElementById("demo2");
tab2.innerHTML = tab1.innerHTML;
function Marquee() {
if (tab2.offsetWidth - tab.scrollLeft <= 0)
tab.scrollLeft -= tab1.offsetWidth
else {
tab.scrollLeft++;
}
}
var MyMar = setInterval(Marquee, speed);
tab. = function() {
clearInterval(MyMar)
};
tab. = function() {
MyMar = setInterval(Marquee, speed)
};
</script>
</div>
</div>
</div>
</body>
</html>
第二个例子中如果没有图片则展示默认图片
650) this.width=650;" src="http://img1.51cto.com/attachment/201307/165936369.gif" title="noimage.gif" />两种html幻灯片效果的更多相关文章
- Android代码中设置字体大小，字体颜色，显示两种颜色.倒计时效果
Android代码中设置字体大小,字体颜色,显示两种颜色 在xml文件中字体大小用的像素 <TextView android:id="@+id/uppaid_time" an ...
- OpenCV3.4两种立体匹配算法效果对比
以OpenCV自带的Aloe图像对为例: 1.BM算法(Block Matching) 参数设置如下: ) + ) & -; cv::Ptr<cv::StereoBM> b ...
- onbeforeunload事件两种写法及效果
在符合W3C标准的浏览器里,可以使用addEventListener方法来添加事件. 当不需要为一个事件添加多个处理函数的时候,可以简单的使用onXXX=function(){}的方式来添加事件处理函 ...
- 初始化NSDictionary：（工作经验）两种方法有时候效果不一样
方法1: NSMutableDictionary *dic = [[NSMutableDictionary alloc] init]; [dic setObject:[Hp_KeysArray obj ...
- Javascript轮播 支持平滑和渐隐两种效果（可以只有两张图）
先上两种轮播效果:渐隐和移动 效果一:渐隐 1 2 3 4 效果二:移动 1 2 3 4 接下来,我们来大致说下整个轮播的思路: 一.先来看简单的,移动的,先上来一个图----移动效果图: 说明: ...
- Javscript轮播 支持平滑和渐隐两种效果（可以只有两张图）
原文:Javscript轮播 支持平滑和渐隐两种效果(可以只有两张图) 先上两种轮播效果:渐隐和移动 效果一:渐隐 1 2 3 4 效果二:移动 1 2 3 4 接下来,我们来大致说下整个轮播的思 ...
- Javascript轮播 支持平滑和渐隐两种效果
Javascript轮播 支持平滑和渐隐两种效果 先上两种轮播效果:渐隐和移动 效果一:渐隐 1 2 3 4 效果二:移动 1 2 3 4 接下来,我们来大致说下整个轮播的思路: 一.先来看简单的 ...
- 基于VC++ Win32+CUDA+OpenGL组合与VC++ MFC SDI+CUDA+OpenGL组合两种方案的遥感影像显示：获得的重要结论！
1.基于VC++ Win32+CUDA+OpenGL组合的遥感影像显示 在该组合方案下,初始化时将OpenGL设置为下面两种方式,效果一样 //设置方式1 glutInitDisplayMode (G ...
- 【转载】CMake 两种变量原理
原文地址:https://cslam.cn/archives/c9f565b5.html 摘要: 本文记录一下 CMake 变量的定义.原理及其使用.CMake 变量包含 Normal Variabl ...
随机推荐
- jquery失去焦点与获取焦点事件blur() focus()
以前我们在js中写input各种事件时都会直接在input中写,昨天开始我开始全面使用jquery了,现在来谈一下我对jquery blur() focus()事件的学习笔记. 对于元素的焦点事件,我 ...
- Python 字符串操作
Python 字符串操作(string替换.删除.截取.复制.连接.比较.查找.包含.大小写转换.分割等) 去空格及特殊符号 s.strip() .lstrip() .rstrip(',') 复制字符 ...
- 【LintCode】链表求和
问题分析: 我们通过遍历两个链表拿到每个位的值,两个值加上前一位进位值(0或者1)模10就是该位的值,除以10就是向高位的进位值(0或者1). 由于两个链表可以不一样长,所以要及时判断,一旦为null ...
- 【BZOJ-4059】Non-boring sequences 线段树 + 扫描线 （正解暴力）
4059: [Cerc2012]Non-boring sequences Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 440 Solved: 16 ...
- NAT功能的研究
通俗的话:现在大部分的家用路由器都是这个功能,一个公网IP的拨号网络,然后地下全部电脑都可以用这个IP上网,进行数据转发,这就是NAT. 参考:http://baike.baidu.com/link? ...
- HDU1150 Machine Schedule
匈牙利算法 目前为止还是半懂不懂的状态 #include<iostream> #include<cstdio> #include<cstring> using na ...
- IAR使用记录
1. Project-->Options... 更改器件:General-->Target-->Device 添加其它需包含的目录:C/C++ Compiler-->Prepr ...
- 电影发烧友必备知识-720P、1080P、4K的区别
随着技术的进步,现在的影视作品的清晰度也越来越高,观众的体验也越来越好,普清的电影基本没人看了,尤其是影视爱好者现在都是看1080P或蓝光原盘.4K. 目前主流清晰度主要分为720P(高清).1080 ...
- hihocoder #1052 基因工程
传送门:基因工程 这道题拖了好久,一直没有清晰的思路. 当然,$K\le\frac{N}{2}$时,比较简单.下面我着重讲一下当$K>\frac{N}{2}$,即前$K$个字符与后$K$个字符有 ...
- DLUTOJ1216
题目大意是:给出N个正整数,其中至多有一个数只出现一次,其余的数都出现了两次.判断是否有某个数只出现一次,若有输出这个数,否则输出“-1”. 1<=N<=5000000 这道题的正解是用位 ...