手机版图片切换效果代码

1. 图片滚动切换代码

楼上说的挺好，
你最好说说你要什么样的形式，可以的话给你做一个

2. 急求图片切换代码~~ 如下图，“点击或者滑过” 小图片的时候，大突变也跟着变~~~

这是存在两组图片的：一组小图，一组大图（当然了，如果有服务器端的程序支持，可以异步返回大图）。
一个简单的讲解：
<style type="text/css">
.xianshi{display:block;}
.yincang{display:none;}
</style>

<ul id="datuliebiao">
<li class="xianshi"><img src="大图1.jpg" /></li>
<!--第一张大图 默认为显示-->
<li class="yincang"><img src="大图2.jpg" /></li>
<li class="yicang"><img src="大图3.jpg" /></li>
</ul>
<ul id="xiaotuliebiao">
<li onclick="show(0)"><img src="小图1.jpg" /></li>
<li onclick="show(1)"><img src="小图2.jpg" /></li>
<li onclick="show(2)"><img src="小图3.jpg" /></li>
</ul>
<script language="javascript">
//得到大图列表
var arraydatu=document.getElementById("datuliebiao").document.getElementsByTagName("li");
//该方法需要传入一个索引值：i
function show(i){
//for循环大图列表
for(j=0;j<arraydatu.length;j++)
{
if(j==i)
{
//无论第i个元素的状态是“显示”或“隐藏”都将其设置为“显示”
arraydatu[i].className=="xianshi"?"xianshi":"xianshi";
}
else{arraydatu[j].className="yincang";}//其它的都设置为“隐藏”
}
}
</script>

基本就是这个思路，这是在记事本里写的，可能会有错误！仅供参考！呵呵

3. android怎么viewpager实现循环切换图片

Android中的ViewPager则实现了左右滑动的效果，ViewPager类提供了多界面切换的新效果。利用ViewPager实现图片循环滚动代码如下：

1、首先是布局文件，使用了一个ViewPager控件：

<spanstyle="padding:0px;margin:0px;font-size:14px;"><RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="@id/viewpager"
android:background="#33000000"
android:orientation="vertical"
android:padding="5dip">
<TextView
android:id="@+id/tv_image_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="第一个引导页面"
android:textColor="@android:color/white"
android:textSize="14sp"/>
<LinearLayout
android:id="@+id/ll_points"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dip"
android:layout_gravity="center_horizontal"
android:orientation="horizontal">
</LinearLayout>
</LinearLayout>
</RelativeLayout></span>

2、接下来实现一个继承PagerAdapter的MyAdapter类，实现一个PagerAdapter，代码如下：

<spanstyle="padding:0px;margin:0px;font-size:14px;">packagecom.example.viewpagertest;
importjava.util.List;
importandroid.support.v4.view.PagerAdapter;
importandroid.view.View;
importandroid.view.ViewGroup;
importandroid.widget.ImageView;
{
privateList<ImageView>mImageViewList;
publicViewPagerAdapter(List<ImageView>imageViewList){
super();
this.mImageViewList=imageViewList;
}
/**
*该方法将返回所包含的Item总个数。为了实现一种循环滚动的效果，返回了基本整型的最大值，这样就会创建很多的Item,
*其实这并非是真正的无限循环。
*/
@Override
publicintgetCount(){
returnInteger.MAX_VALUE;
}
/**
*判断出去的view是否等于进来的view如果为true直接复用
*/
@Override
publicbooleanisViewFromObject(Viewarg0,Objectarg1){
returnarg0==arg1;
}
/**
*销毁预加载以外的view对象,会把需要销毁的对象的索引位置传进来，就是position，
*因为mImageViewList只有五条数据，而position将会取到很大的值，
*所以使用取余数的方法来获取每一条数据项。
*/
@Override
publicvoiddestroyItem(ViewGroupcontainer,intposition,Objectobject){
container.removeView(mImageViewList.get(position%mImageViewList.size()));
}
/**
*创建一个view，
*/
@Override
publicObjectinstantiateItem(ViewGroupcontainer,intposition){
container.addView(mImageViewList.get(position%mImageViewList.size()));
returnmImageViewList.get(position%mImageViewList.size());
}
}
</span>

3、最后是主界面部分的代码：

<spanstyle="padding:0px;margin:0px;font-size:14px;">packagecom.example.viewpagertest;
importjava.util.ArrayList;
importjava.util.List;
importandroid.app.Activity;
importandroid.os.Bundle;
importandroid.os.Handler;
importandroid.os.Message;
importandroid.os.SystemClock;
importandroid.support.v4.view.ViewPager;
importandroid.support.v4.view.ViewPager.OnPageChangeListener;
importandroid.view.View;
importandroid.widget.ImageView;
importandroid.widget.LinearLayout;
importandroid.widget.LinearLayout.LayoutParams;
importandroid.widget.TextView;

{

privateList<ImageView>imageViewList;
privateTextViewtvDescription;
privateLinearLayoutllPoints;
privateString[]imageDescriptions;
=0;
privateViewPagermViewPager;
privatebooleanisLoop=true;
privateHandlerhandler=newHandler(){

@Override
publicvoidhandleMessage(Messagemsg){
super.handleMessage(msg);

mViewPager.setCurrentItem(mViewPager.getCurrentItem()+1);
}
};

@Override
protectedvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setView();
initView();
}

publicvoidsetView(){
setContentView(R.layout.activity_splash_viewpager);

//自动切换页面功能
newThread(newRunnable(){

@Override
publicvoidrun(){
while(isLoop){
SystemClock.sleep(2000);
handler.sendEmptyMessage(0);
}
}
}).start();
}

publicvoidinitView(){
mViewPager=(ViewPager)findViewById(R.id.viewpager);
tvDescription=(TextView)findViewById(R.id.tv_image_description);
llPoints=(LinearLayout)findViewById(R.id.ll_points);

prepareData();

ViewPagerAdapteradapter=newViewPagerAdapter(imageViewList);
mViewPager.setAdapter(adapter);
mViewPager.setOnPageChangeListener(this);

tvDescription.setText(imageDescriptions[previousSelectPosition]);
llPoints.getChildAt(previousSelectPosition).setEnabled(true);

/**
*2147483647/2=1073741820-1
*设置ViewPager的当前项为一个比较大的数，以便一开始就可以左右循环滑动
*/
intn=Integer.MAX_VALUE/2%imageViewList.size();
intitemPosition=Integer.MAX_VALUE/2-n;

mViewPager.setCurrentItem(itemPosition);
}

privatevoidprepareData(){
imageViewList=newArrayList<ImageView>();
int[]imageResIDs=getImageResIDs();
imageDescriptions=getImageDescription();

ImageViewiv;
Viewview;
for(inti=0;i<imageResIDs.length;i++){
iv=newImageView(this);
iv.setBackgroundResource(imageResIDs[i]);
imageViewList.add(iv);

//添加点view对象
view=newView(this);
view.setBackgroundDrawable(getResources().getDrawable(R.drawable.point_background));
LayoutParamslp=newLayoutParams(5,5);
lp.leftMargin=10;
view.setLayoutParams(lp);
view.setEnabled(false);
llPoints.addView(view);
}
}

privateint[]getImageResIDs(){
returnnewint[]{
R.drawable.bg1,
R.drawable.bg2,
R.drawable.bg3,
R.drawable.pic_01,
R.drawable.pic_02
};
}

privateString[]getImageDescription(){
returnnewString[]{
"第一个引导页面",
"第二个引导页面",
"第三个引导页面",
"第四个引导页面",
"第五个引导页面"
};
}
@Override
(intarg0){

}
@Override
publicvoidonPageScrolled(intarg0,floatarg1,intarg2){

}
@Override
publicvoidonPageSelected(intposition){
//改变图片的描述信息
tvDescription.setText(imageDescriptions[position%imageViewList.size()]);
//切换选中的点,把前一个点置为normal状态
llPoints.getChildAt(previousSelectPosition).setEnabled(false);
//把当前选中的position对应的点置为enabled状态
llPoints.getChildAt(position%imageViewList.size()).setEnabled(true);
previousSelectPosition=position%imageViewList.size();
}
@Override
protectedvoidonDestroy(){
super.onDestroy();
isLoop=false;
}
}
</span>

4. 急求图片切换代码！

你说的是网站上的首页的幻灯效果吧，这个图叫 banner .这个可以是js的也可以是直接FLASH的。
这个是banner的代码 放在你要出现的位置

代码：

<div class="banner">
<div class="all">
<div style="visibility:hidden;" id="KinSlideshow"><a href="图片要链接的地址"><img width="960" height="255" src="你的图片路径" alt="" /></a> <a href="/"><img width="960" height="255" src="第二张你的图片路径" alt="" /></a></div>
</div>
</div>
还需要给你网站的CSS样式文件中加入样式代码

.banner{
height:255px;
width:960px;
background:#FFFFFF;
overflow:hidden;
display:block;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 0px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 20px;
}
.banner .all{width:960px;height:350px;float:left;padding:0px;margin:0px;}

都添加好后，上传你的图片更改图片路径 就好了效果就是你要的幻灯图片切换。

纯手打，好累

5. 谁知道17素材网【zepto.js手机端网页上下手指滑动图片切换效果代码】怎么使用啊急求~~~~(>_<)~~~~

替换图片就好了啊，可以使用的。

6. asp.net做出的手机网站像手机淘宝一样的通过左右滑动手机屏幕切换图片！！跪求

手机淘宝有多个版本
你说的可以左右滑动的是触屏版，触屏版手机淘宝是通过js实现的你说的效果
触屏版手机是用在webkit浏览器上面的，webkit浏览器支持js脚本（雨IE略有不同）
获取代码可以用以下方法：
用webkit核心的浏览器（比如chrome），然后访问网址（m点淘宝点）网址你自己补全 回答不能填写网址
然后就能打开手机淘宝 你可以看到跟手机上是一样的，然后右键查看源代码就可以了
遵守webkit浏览器的js解析器的语法就可以写，与正常开发没什么不同

7. 图片自动切换代码

试试这个幻灯片切换
有12345数字一起切换
鼠标点一下数字会变换到另一张图片，不点就会自动换
里面有教程和源码

8. HTML中如何做图片切换效果，跪求代码

1、首先输入代码：

<div class="wrapper">

<div id="focus">

<ul>

<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/01.jpg" alt="QQ商城焦点图效果下载" /></a></li>

9. 求简单的图片切换代码

第一种：
把如下代码加入<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></DIV><IMG 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','http://www.windstudio.net/banner/banner1.gif','http://www.windstudio.net')
zhuanti[2]=new ztstr('2','http://www.windstudio.net/banner/banner2.gif','http://www.windstudio.net')
zhuanti[3]=new ztstr('3','http://www.windstudio.net/banner/banner3.gif','http://www.windstudio.net')
zhuanti[4]=new ztstr('4','http://www.windstudio.net/banner/banner4.gif','http://www.windstudio.net')

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(nn>imgcount) 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(tt<1) 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<=spacewidth&&dmheight<=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="http://www.windstudio.net/banner/banner1.gif" width=468 height=60 border=0 name=pic style="visibility:hidden;filter:revealtrans(ration=2.0,transition=12)"></a>

好，到这里就大功告成了。另外，试试改变transition的数值，可以得到不同的转换效果哟~~

10. 手机或触摸屏点击切换图片,怎么修改代码,以实现滑动切换图片。

也就是说现在你已经写出点击切换的代码了，把这部分代码修改下，放到滑动事件里，或者用swiper