手机图片切换代码(手机图片切换代码怎么弄)
admin 发布:2022-12-19 16:54 189
本篇文章给大家谈谈手机图片切换代码,以及手机图片切换代码怎么弄对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。
本文目录一览:
HTML图片自动切换的代码
script language =javascript var curIndex=0; //时间间隔(单位毫秒),每秒钟显示一张,数组共有5张图片放在Photos文件夹下。 var timeInterval=1000; var arr=new Array(); arr[0]="photos/1.jpg"; arr[1]="photos/2.jpg"; arr[2]="photos/3.jpg"; arr[3]="photos/4.jpg"; arr[4]="photos/5.jpg"; setInterval(changeImg,timeInterval); function changeImg() { var obj=document.getElementById("obj"); if (curIndex==arr.length-1) { curIndex=0; } else { curIndex+=1; } obj.src=arr[curIndex]; } /script img id=obj src ="photos/1.jpg" width=200 height=150 border =0 可以自己配置,自己设置每张图片切换的时间间隔,自己设置每张图片的路径(绝对、相对路径都可以)虽然很简单,但是很实用。 ------------------------------------------------------------- 第二种方法: //修改图片的宽度、高度,注意要和下面的一样,修改显示位置 style type="text/css" #img1 {position:absolute; width:140px; height:105px; left:220px; top:125px; z-index:1; visibility:hidden;} #img2 {position:absolute; width:140px; height:105px; left:220px; top:125px; z-index:2} /style SCRIPT LANGUAGE="JavaScript" !-- Begin var ie5=(document.getElementById document.all); var ns6=(document.getElementById !document.all);
图片切换代码(html)网页
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titleqweq/title
link href="css/om_system.css" rel="stylesheet" type="text/css" /
script type="text/javascript" src="js/jquery-1.9.1.min.js"/script
style type="text/css"
.banner{
width: 1000px;
margin: 50px auto 0 auto;
height: 500px;
position: relative;
}
.banner img{
width: 100%
}
.banner ul{
height: 100%;
overflow:hidden;
}
.banner li{
display: none;
height: 100%;
overflow: hidden;
}
.banner li.on{
display: block;
}
.banner-btn{
width: 700px;
position: absolute;
left: 150px;
top: 200px;
}
.banner-btn button{
border: none;
background:none;
}
.pic-left{
float: left;
}
.pic-right{
float: right;
}
/style
/head
body class="body-bg"
div class="banner"
ul
li class="on"img src="images/4.jpg"/li
liimg src="images/5.jpg"/li
liimg src="images/6.jpg"/li
/ul
div class="banner-btn clear"
button class="pic-left"img src="images/arrow-3-l.png"/button
button class="pic-right"img src="images/arrow-3-r.png"/button
/div
/div
input value="dd" id="dd" /
script type="text/javascript"
$(function(){
$('.pic-left').click(function(){
var index=$('li.on').index();
var nextindex=(index+2)%3;
// alert(nextindex)
$("#dd").val(nextindex);
$('li.on').fadeOut(200,function(){
$('li.on').removeClass('on');
$('.banner li').eq(nextindex).addClass('on')
});
setTimeout(function(){$('.banner li').eq(nextindex).fadeIn(200)},200);
});
$('.pic-right').click(function(){
var index=$('li.on').index();
var nextindex=(index+1)%3;
// alert(nextindex)
$("#dd").val(nextindex);
$('li.on').fadeOut(200,function(){
$('li.on').removeClass('on');
$('.banner li').eq(nextindex).addClass('on')
});
setTimeout(function(){$('.banner li').eq(nextindex).fadeIn(200)},200);
});
});
/script
/body
/html
图片自己替换下,原理其实很简单:这边是通过ul li上加一个class='on',做标记(即当前显示),然后通过这个on来遍历下一个元素
手机或触摸屏点击切换图片,怎么修改代码,以实现滑动切换图片。
也就是说现在你已经写出点击切换的代码了,把这部分代码修改下,放到滑动事件里,或者用swiper
求简单的图片切换代码
第一种:
把如下代码加入body区域中
body onclick=Clicked()
SCRIPT
!--
transeffect = 0;
theeffects = new Array(24);
theeffects[0] = “盒状收缩“;
theeffects[1] = “盒状向外“;
theeffects[2] = “圆形收缩“;
theeffects[3] = “圆形向内“;
theeffects[4] = “从下向上“;
theeffects[5] = “从上向下“;
theeffects[6] = “从左向右“;
theeffects[7] = “从右向左“;
theeffects[8] = “百页窗形向右“;
theeffects[9] = “百页窗形向下“;
theeffects[10] = “棋盘形交叉向右“;
theeffects[11] = “棋盘形交叉向下“;
theeffects[12] = “随意溶解形“;
theeffects[13] = “左右向内“;
theeffects[14] = “左右向外“;
theeffects[15] = “上下向内“;
theeffects[16] = “上下向外“;
theeffects[17] = “条纹状向左下“;
theeffects[18] = “条纹状向左上“;
theeffects[19] = “条纹状向右下“;
theeffects[20] = “条纹状向右上“;
theeffects[21] = “溶解水平状“;
theeffects[22] = “溶解上下状“;
theeffects[23] = “随着溶解“;
current_image = “image1“;
function Clicked() {
var the_image, the_other;
text2.style.visiblity=“hidden“;
if (image1.style.visibility==“inherit“) {
the_image = image2;
the_other = image1;
}
else {
the_image = image1;
the_other = image2;
}
the_other.style.visibility=“hidden“;
the_image.filters.item(0).Apply();
the_image.filters.item(0).Transition = transeffect;
the_image.filters.item(0).Play(2.0);
the_image.style.visibility=“inherit“;
text2.innerText=theeffects[transeffect];
transeffect++;
if (transeffect == 24)
transeffect = 0;
text2.style.visibility=“visible“;
}
//--
/SCRIPT
DIV id=image
DIV id=text1/DIVIMG id=image1
src=“Upfiles/200422684962.gif“
style=“FILTER: revealTrans(Duration=3.0,Transition=1); VISIBILITY: hidden“ IMG id=image2 src=“Upfiles/200422684962.gif“
style=“FILTER: revealTrans(Duration=3.0,Transition=1); VISIBILITY: hidden“ /DIV
DIV id=text2/DIV
第二步:把body中的内容改为:
body bgcolor=“#fef4d9“ onclick=Clicked()
over feboy
第二种:
第一步、把下面这段代码插入到页面的head与/head之间:
script language=javascript
isns = navigator.appName == "Netscape";
function ztstr(id,picurl,linkurl)
{
this.id=id
this.picurl=picurl
this.linkurl=linkurl
}
zhuanti=new Array()
imgcount=1;
frequency=10*1000;//30秒
//在这里修改图片的路径和链接
zhuanti[1]=new ztstr('1','','')
zhuanti[2]=new ztstr('2','','')
zhuanti[3]=new ztstr('3','','')
zhuanti[4]=new ztstr('4','','')
imgcount=zhuanti.length-1
for(i=1;i=imgcount;i++)
{
eval_r("img"+i+"=new Image()")
eval_r("img"+i+".src=zhuanti["+i+"].picurl")
}
nn=1
var rand1 = 0;
var useRand = 0;
function swapPic() {
var imgnum = zhuanti.length - 1;
do {
var randnum = Math.random();
rand1 = Math.round((imgnum - 1) * randnum) + 1;
} while (rand1 == useRand);
useRand = rand1;
// alert(useRand);
nn=useRand;
change_img();
}
function change_img()
{
eval_r('document.pic.src=img'+nn+'.src');
nn++;
if(nnimgcount) nn=1
if(!isns)
{
pic.filters.item(0).apply()
pic.style.visibility='visible'
pic.filters.item(0).play()
setTimeout("pic.style.visibility='hidden'",frequency);
}
else
document.pic.visibility='visible'
tt=setTimeout('change_img()',frequency)
}
function pictarget()
{
tt=nn-1
if(tt1) tt=imgcount
cururl=zhuanti[tt].linkurl
window.open(cururl);
}
function ini()
{
if(!isns)
{
spacewidth=Math.round((divmask.offsetWidth-770)/2)
dmwidth=770+spacewidth
dmheight=divmask.offsetHeight
totalstep=50
timeout=50
dmstepw=Math.round(770/totalstep)
dmsteph=Math.round(dmheight/totalstep)
setTimeout('hidimg()',3000)
}
else swapPic()
}
function hidimg()
{
dmwidth-=dmstepw
dmheight-=dmsteph
eval_r('divmask.style.clip="rect(0,'+dmwidth+','+dmheight+',0)"')
hdrun=setTimeout('hidimg()',timeout)
if(dmwidth=spacewidthdmheight=0)
{
divmask.style.visibility='hidden'
clearTimeout(hdrun)
swapPic()
}
}
/script
第二步、调用定义好的javascript函数,在body里加上以下代码:
body onload=swapPic()
第三步、在页面中插入图片和链接:
a href=javascript :void(null) onclick='javascript :pictarget();return false;'img src="" width=468 height=60 border=0 name=pic style="visibility:hidden;filter:revealtrans(duration=2.0,transition=12)"/a
好,到这里就大功告成了。另外,试试改变transition的数值,可以得到不同的转换效果哟~~
手机图片切换代码的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于手机图片切换代码怎么弄、手机图片切换代码的信息别忘了在本站进行查找喔。
版权说明:如非注明,本站文章均为 AH站长 原创,转载请注明出处和附带本文链接;
- 上一篇:java登陆界面代码(java登陆页面代码)
- 下一篇:关于网信办网站源代码的信息
相关推荐
- 05-28图片轮播代码js(图片轮播代码cs6)(2024-05-28)
- 05-28javaee代码(javaee代码中文乱码)(2024-05-28)
- 05-28网页购物车代码(购物车代码js)(2024-05-28)
- 05-28淘宝好评秀代码(淘宝评价秀)(2024-05-28)
- 05-28php后台登录代码(登录界面php代码)(2024-05-28)
- 05-28html弹出悬浮图片代码(html悬浮窗代码)(2024-05-28)
- 05-28友情链接文字代码(友情链接怎么弄)(2024-05-28)
- 05-28html水果商城代码(水果机h5游戏源码)(2024-05-28)
- 05-28秒赞广告栏代码(秒赞网模板)(2024-05-28)
- 05-28验证手机号码的js代码(验证手机号码的js代码是什么)(2024-05-28)
取消回复欢迎 你 发表评论:
- 标签列表
- 最近发表
-
- 神马搜索创始人是谁啊[神马搜索创始人是谁啊图片]
- 党建小程序代码(党建小程序开发)(2024-05-28)
- java猜杯子游戏代码(猜数游戏java程序)(2024-05-28)
- 个人主页源代码(个人主页源代码 百度网盘)(2024-05-28)
- 论坛视频代码怎么用(论坛程序源码)(2024-05-28)
- asp.net人事管理系统源代码的简单介绍(2024-05-28)
- 积分商城源代码(积分商城 开源)(2024-05-28)
- php签到送积分代码(php实现签到)(2024-05-28)
- php开发代码下载(php开发代码网)(2024-05-28)
- 微信端qq在线咨询代码(微信代码网站)(2024-05-28)
- 友情链接