两种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 ...
随机推荐
- dede使用方法----更换模板
刚开始接触dede的时候,自己一直在纠结怎么更换自己的模板啊.后面在秀站网上找到了一个比较好的更换模板的文字教程.下面就我自己做的进行写的笔记. 准备:一个你自己做好的静态版网站,我们假设它的名称是w ...
- 运行python代码报错UnicodeDecodeError: 'ascii' codec can't decode byte 0xe7 in position 91: ordinal not in range(128)的解决办法
1.通过搜集网上的资料,自己多次尝试,问题算是解决了,在代码中加上如下几句即可: import sys reload(sys) sys.setdefaultencoding('utf-8') 2.原因 ...
- 【unity shaders】：Unity中的Shader及其基本框架
shader和Material的基本关系 Shader(着色器)实际上就是一小段程序,它负责将输入的Mesh(网格)以指定的方式和输入的贴图或者颜色等组合作用,然后输出.绘图单元可以依据这个输出来将图 ...
- python3 报错集合
1.格式 message = "GET / HTTP/1.1\r\n\r\n" s.sendall(message) TypeError: 'str' does not suppo ...
- 图像卷积、相关以及在MATLAB中的操作
图像卷积.相关以及在MATLAB中的操作 2016年7月11日 20:34:35, By ChrisZZ 区分卷积和相关 图像处理中常常需要用一个滤波器做空间滤波操作.空间滤波操作有时候也被叫做卷积滤 ...
- Jenkins 2.x版本的节点配置选项更新
[Dumb slave]改成了[Permanent Agent],效果一致 参考:http://serverfault.com/questions/793619/jenkins-trying-to-a ...
- ESPCMS /adminsoft/control/citylist.php Int SQLInjection Vul
catalog . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 Relevant Link:2. 漏洞触发条件 0x1: POC htt ...
- powershell小工具
保存为.ps1文件Set-ExecutionPolicy UnrestrictedSet-ExecutionPolicy Restricted 1. 批量修改文件后缀 $CodeFileDir=&qu ...
- Ubuntu 之 Personal Package Archive (PPA)
How do I use software from a PPA? To start installing and using software from a Personal Package Arc ...
- ANDROID版本号和版本名称的重要性介绍
当我们在刚开始学习ANDROID的时候,可能不会过多的关注这个位于manifest.xml文件中的versionCode和versionName. 但是其实一个好的版本控制,对于我们有至关重要的作用. ...