两种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 ...
随机推荐
- HashMap和TreeMap的区别
HashMap:数组方式存储key/value,线程非安全,允许null作为key和value,key不可以 重复,value允许重复,不保证元素迭代顺序是按照插入时的顺序,key的hash值是先计算 ...
- C#微信开发之旅(二)：基础类之HttpClientHelper(更新：SSL安全策略）
public class HttpClientHelper 2 { 3 /// <summary> 4 /// get请求 5 ...
- Yii日志记录Logging
.Yii::getLogger()->log($message, $level, $category = 'application') .Yii::trace($message, $catego ...
- 【BZOJ-4059】Non-boring sequences 线段树 + 扫描线 （正解暴力）
4059: [Cerc2012]Non-boring sequences Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 440 Solved: 16 ...
- linux中nc详解
|是管道符号,表示左边的输出作为右边的输入. 1.TCP端口扫描 # nc -v -z -w2 127.0.0.1 1-100 Connection to 127.0.0.1 22 port [tcp ...
- Linq Like
Like的操作,有点像in,但是,方向变了.什么意思呢.就是你给定一个字符串,去寻找数据中某个字段包含这个字符串.就是给定的字符串是某字段的子集.Sql Script是这么写的. Selec * fr ...
- Discuz! X2.5 /source/class/helper/helper_seo.php Remote Code Execution Vul
catalog . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 SEO模块中的preg_replace+修正符e+双引号引发的远程代码执 ...
- js调用刷新
_self.fireEvent('refresh');
- 简单二维元胞自动机 MATLAB实现
20世纪50年代,乌尔姆和冯·诺依曼(对此人真是崇拜的五体投地)为了研究机器人自我复制的可能性,提出了一种叫做元胞自动机(Cellular Automaton,CA)的算法.该算法采用局相互作用规则, ...
- Web 使用PostMan提交特殊格式数据
使用PostMan 选择POST模式中的RAW模式 然后点击Headers添加Content-Type 类型比如是 application/json 然后就可以在body中以Json格式上传数据了 前 ...