> gallery显示图片替换（手动和自动）
gallery显示图片替换（手动和自动）
penghaibo203 & &
发布时间： & &
浏览：100 & &
回复：0 & &
悬赏：0.0希赛币
gallery显示图片轮换（手动和自动）
1.gallery.xml& xml version="1.0" encoding="utf-8" &&LinearLayout& xmlns:android=""& android:cacheColorHint="#"& android:layout_width="fill_parent"& android:layout_height="wrap_content"&&
&FrameLayout
android:id="@+id/gallerylayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"&
&!-- 广告图片 --&
&Gallery android:id="@+id/gallery"
&&&&&&& android:layout_width="fill_parent"
&&&&&&& android:layout_height="160dp"&&&
&&&&&&& android:spacing="1dp"&&
&&&&&&& android:fadingEdge="none"
&LinearLayout
android:orientation="vertical"
android:layout_gravity="bottom"
android:background="@drawable/boke_titlebg"
android:layout_width="fill_parent"
android:layout_height="wrap_content" &
&TextSwitcher
android:id="@+id/TextSwitcher01"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content" &
&/TextSwitcher&
&&& &LinearLayout
android:id="@+id/hintlayout"
android:layout_gravity="right"
android:layout_width="wrap_content"
android:layout_height="wrap_content" &
&/LinearLayout&
&/LinearLayout&
&/FrameLayout& &/LinearLayout&2.代码中添加autoGallery = new Timer();
autoGallery.schedule(new TimerTask() {
public void run() {
if (gallerypisition & count - 1) {
gallerypisition = gallerypisition + 1;
gallerypisition = 0;
autoGalleryHandler.sendEmptyMessage(1);
}, );Handler autoGalleryHandler = new Handler() {
public void handleMessage(Message message) {
super.handleMessage(message);
switch (message.what)
g.setSelection(gallerypisition);
本问题标题：
本问题地址：
温馨提示：本问题已经关闭，不能解答。
暂无合适的专家
&&&&&&&&&&&&&&&
希赛网 版权所有 & &&原生javascript图片自动或手动切换示例附演示源码
字体：[ ] 类型：转载 时间：
图片自动或手动切换，想必会在很多地方有见过吧，本文将为大家介绍的是使用原生javascript实现的焦点图切换，感兴趣的朋友可以参考下
一、效果图 &二、html代码
代码如下: &style type="text/css"& .container, .container *{margin:0; padding:0;} .container{width:408 height:168 overflow:position:} .slider{position:} .slider li{ list-style:display:} .slider img{ width:408 height:168 display:} .slider2{width:2000} .slider2 li{float:} .num{ position: right:5 bottom:5} .num li{ float: color: #FF7300; text-align: line-height: 16 width: 16 height: 16 font-family: A font-size: 12 cursor: overflow: margin: 3px 1 border: 1px solid #FF7300; background-color: # } .num li.on{ color: # line-height: 21 width: 21 height: 21 font-size: 16 margin: 0 1 border: 0; background-color: #FF7300; font-weight: } &/style& &div class="container" id="idTransformView2"& &ul class="slider slider2" id="idSlider2"& &li&&img src="images/01.jpg"/&&/li& &li&&img src="images/02.jpg"/&&/li& &li&&img src="images/03.jpg"/&&/li& &/ul& &ul class="num" id="idNum2"& &li&1&/li& &li&2&/li& &li&3&/li& &/ul& &/div&
三、源代码
代码如下: var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : }; var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } Object.extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; }
} var TransformView = Class.create(); TransformView.prototype = { //容器对象,滑动对象,切换参数,切换数量 initialize: function(container, slider, parameter, count, options) { if(parameter &= 0 || count &= 0) var oContainer = $(container), oSlider = $(slider), oThis = this.Index = 0;//当前索引 this._timer =//定时器 this._slider = oS//滑动对象 this._parameter =//切换参数 this._count = count || 0;//切换数量 this._target = 0;//目标参数 this.SetOptions(options); this.Up = !!this.options.Up; this.Step = Math.abs(this.options.Step); this.Time = Math.abs(this.options.Time); this.Auto = !!this.options.A this.Pause = Math.abs(this.options.Pause); this.onStart = this.options.onS this.onFinish = this.options.onF oContainer.style.overflow = "hidden"; oContainer.style.position = "relative"; oSlider.style.position = "absolute"; oSlider.style.top = oSlider.style.left = 0; }, //设置默认属性 SetOptions: function(options) { this.options = {//默认值 Up: true,//是否向上(否则向左) Step: 5,//滑动变化率 Time: 10,//滑动延时 Auto: true,//是否自动转换 Pause: 2000,//停顿时间(Auto为true时有效) onStart: function(){},//开始转换时执行 onFinish: function(){}//完成转换时执行 }; Object.extend(this.options, options || {}); }, //开始切换设置 Start: function() { if(this.Index & 0){ this.Index = this._count - 1; } else if (this.Index &= this._count){ this.Index = 0; } this._target = -1 * this._parameter * this.I this.onStart(); this.Move(); }, //移动 Move: function() { clearTimeout(this._timer); var oThis = this, style = this.Up ? "top" : "left", iNow = parseInt(this._slider.style[style]) || 0, iStep = this.GetStep(this._target, iNow); if (iStep != 0) { this._slider.style[style] = (iNow + iStep) + "px"; this._timer = setTimeout(function(){ oThis.Move(); }, this.Time); } else { this._slider.style[style] = this._target + "px"; this.onFinish(); if (this.Auto) { this._timer = setTimeout(function(){ oThis.Index++; oThis.Start(); }, this.Pause); } } }, //获取步长 GetStep: function(iTarget, iNow) { var iStep = (iTarget - iNow) / this.S if (iStep == 0) return 0; if (Math.abs(iStep) & 1) return (iStep & 0 ? 1 : -1); return iS }, //停止 Stop: function(iTarget, iNow) { clearTimeout(this._timer); this._slider.style[this.Up ? "top" : "left"] = this._target + "px"; } }; window.onload=function(){ function Each(list, fun){ for (var i = 0, len = list. i & i++) { fun(list[i], i); } }; var objs = $("idNum2").getElementsByTagName("li"); var tv = new TransformView("idTransformView2", "idSlider2", 408, 3, { onStart: function(){ Each(objs, function(o, i){ o.className = tv.Index == i ? "on" : ""; }) },//按钮样式 Up: false }); tv.Start(); Each(objs, function(o, i){ o.onmouseover = function(){ o.className = "on"; tv.Auto = tv.Index = tv.Start(); } o.onmouseout = function(){ o.className = ""; tv.Auto = tv.Start(); } }) }
一看就名目了然了，所以就不细讲解代码！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具