两种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 ...
随机推荐
- 控件（选择类）: ListBox, RadioButton, CheckBox, ToggleSwitch
1.ListBox 的示例Controls/SelectionControl/ListBoxDemo.xaml <Page x:Class="Windows10.Controls.Se ...
- dede使用方法----如何自定义字段
我们在用dede做东西的时候,有时候需要添加一些dede里面没有的字段,有dede后台里面可以添加相关的自段,下面我就以如何给产品添加一个价格的字段来讲述一下如何给dede添加字段,并且调用它. 1. ...
- 【BZOJ-4561】圆的异或并 set + 扫描线
4561: [JLoi2016]圆的异或并 Time Limit: 30 Sec Memory Limit: 256 MBSubmit: 254 Solved: 118[Submit][Statu ...
- 【BZOJ-3631】松鼠的新家 树形DP？+ 倍增LCA + 打标记
3631: [JLOI2014]松鼠的新家 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 1231 Solved: 620[Submit][Stat ...
- BZOJ 1034 泡泡堂BNB 贪心+简单博弈
同样是今天做bzoj时做到的,感觉能力范围之内的就做了,也是蛮简单的 1034: [ZJOI2008]泡泡堂BNB Time Limit: 10 Sec Memory Limit: 162 MB Su ...
- oracle merge into 的例子
内容来自 oracle 11g 实用教程 郑阿奇等编 在 oracle 11g中有merge语句,用于根据与原表连接的结果,对目标表执行插入,更新,或者删除操作.例如,根据在一个表中找到的差异在另一个 ...
- 【poj1260】 Pearls
http://poj.org/problem?id=1260 (题目链接) 题意 购买珍珠,所有珍珠分成n个档次,第i个档次购买每个珍珠的价格为p[i],需要购买第i档次的珍珠a[i]个.若要购买第i ...
- hdu5124 线段树+离散化
题意:令a[l..r]都+1,求a[1..n]的最大值 裸的成段更新+区间最值,但是本题坐标范围很大(10^9),所以需要离散化 顺便离散化模板get 离散化的基本思路: 设一共有m个数,范围1--n ...
- hdu5187 奇怪题
本来很水的,答案就是(2^n)-2,但是写坑了QAQ 因为原题要求答案要mod P,一开始我是这么干的: LL ans=pow_mod(,N,P); ans=(ans-)%P; ) ans=%P; p ...
- struts2 CVE-2014-0050(DoS), CVE-2014-0094(ClassLoader manipulation) S2-20 DoS attacks and ClassLoader manipulation
catalog . Description . Effected Scope . Exploit Analysis . Principle Of Vulnerability . Patch Fix 1 ...