当前位置：首页 » 网站代码 » 首页图片轮播

首页图片轮播

发布时间: 2021-03-16 09:59:20

Ⅰ 如何在淘宝主页上设置图片轮播

如果你是标准版旺铺，本身就有这个轮播功能的。如果是扶持版的，就要自己买个模块。图片要你自己先做好，尺寸要一样大，然后上传到图片空间，再复制图片地址，粘贴进去就可以了。

Ⅱ 首页图片轮播，怎么把图片换掉

做一张尺寸大小一样的，上传到图片空间
然后复制图片链接放轮播上就可以了！

Ⅲ 如何在网页上添加轮播图片

1.程序说明
原理就是通过不断设置滑动对象的left(水平切换)和top(垂直切换)来实现图片切换的动态效果。
首先需要一个容器，程序会自动设置容器overflow为hidden，如果不是相对或绝对定位会同时设置position为relative，
滑动对象会设置为绝对定位：
var p = CurrentStyle(this._container).position;
p == "relative" || p == "absolute" || (this._container.style.position = "relative");
this._container.style.overflow = "hidden";
this._slider.style.position = "absolute";

如果没有设置Change切换参数属性，会自动根据滑动对象获取：
this.Change = this.options.Change ? this.options.Change :
this._slider[bVertical ? "offsetHeight" : "offsetWidth"] / this._count;

执行Run方法就会开始进入切换，其中有一个可选参数用来重新设置要切换的图片索引：
index == undefined && (index = this.Index);
index < 0 && (index = this._count - 1) || index >= this._count && (index = 0);
== undefined && (index = this.Index);
index < 0 && (index = this._count - 1) || index >= this._count && (index = 0);
之后就到设置使用tween缓动时需要的参数了，
包括_target(目标值)、_t(时间)、_b(初始值)和_c(变化量)：
this._target = -Math.abs(this.Change) * (this.Index = index);
this._t = 0;
this._b = parseInt(CurrentStyle(this._slider)[this.options.Vertical ? "top" : "left"]);
this._c = this._target - this._b;
还有Duration(持续时间)是自定义属性。
参数设置好后就执行Move程序开始移动了。
里面很简单，首先判断_c是否有值（等于0表示不需要移动）和_t是否到达Duration，
未满足条件就继续移动，否则直接移动到目标值并进行下一次切换：
if (this._c && this._t < this.Duration) {
this.MoveTo(Math.round(this.Tween(this._t++, this._b, this._c, this.Duration)));
this._timer = setTimeout(Bind(this, this.Move), this.Time);
}else{
this.MoveTo(this._target);
this.Auto && (this._timer = setTimeout(Bind(this, this.Next), this.Pause));
}
使用说明
实例化需要3个参数，分别是容器对象，滑动对象和切换数量，之后可以直接执行Run方法运行：
new SlideTrans("idContainer", "idSlider", 3).Run();
还有以下可选属性：
Vertical: true,//是否垂直方向（方向不能改）
Auto: true,//是否自动
Change: 0,//改变量
Duration: 50,//滑动持续时间
Time: 10,//滑动延时
Pause: 2000,//停顿时间(Auto为true时有效)
onStart: function(){},//开始转换时执行
onFinish: function(){},//完成转换时执行
Tween: Tween.Quart.easeOut//tween算子
其中Vertical初始化后就不能修改，Tween算子可参照这里的缓动效果选择（实例中选了其中3个）。
还有提供了以下方法：
Next: 切换下一个
Previous: 切换上一个
Stop: 停止自动切换
还有上面说到的Run
程序代码:
var SlideTrans = function(container, slider, count, options) {
this._slider = $(slider);
this._container = $(container);//容器对象
this._timer = null;//定时器
this._count = Math.abs(count);//切换数量
this._target = 0;//目标值
this._t = this._b = this._c = 0;//tween参数

this.Index = 0;//当前索引

this.SetOptions(options);

this.Auto = !!this.options.Auto;
this.Duration = Math.abs(this.options.Duration);
this.Time = Math.abs(this.options.Time);
this.Pause = Math.abs(this.options.Pause);
this.Tween = this.options.Tween;
this.onStart = this.options.onStart;
this.onFinish = this.options.onFinish;

var bVertical = !!this.options.Vertical;
this._css = bVertical ? "top" : "left";//方向

//样式设置
var p = CurrentStyle(this._container).position;
p == "relative" || p == "absolute" || (this._container.style.position = "relative");
this._container.style.overflow = "hidden";
this._slider.style.position = "absolute";

this.Change = this.options.Change ? this.options.Change :
this._slider[bVertical ? "offsetHeight" : "offsetWidth"] / this._count;
};
SlideTrans.prototype = {
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
Vertical: true,//是否垂直方向（方向不能改）
Auto: true,//是否自动
Change: 0,//改变量
Duration: 50,//滑动持续时间
Time: 10,//滑动延时
Pause: 2000,//停顿时间(Auto为true时有效)
onStart: function(){},//开始转换时执行
onFinish: function(){},//完成转换时执行
Tween: Tween.Quart.easeOut//tween算子
};
Extend(this.options, options || {});
},
//开始切换
Run: function(index) {
//修正index
index == undefined && (index = this.Index);
index < 0 && (index = this._count - 1) || index >= this._count && (index = 0);
//设置参数
this._target = -Math.abs(this.Change) * (this.Index = index);
this._t = 0;
this._b = parseInt(CurrentStyle(this._slider)[this.options.Vertical ? "top" : "left"]);
this._c = this._target - this._b;

this.onStart();
this.Move();
},
//移动
Move: function() {
clearTimeout(this._timer);
//未到达目标继续移动否则进行下一次滑动
if (this._c && this._t < this.Duration) {
this.MoveTo(Math.round(this.Tween(this._t++, this._b, this._c, this.Duration)));
this._timer = setTimeout(Bind(this, this.Move), this.Time);
}else{
this.MoveTo(this._target);
this.Auto && (this._timer = setTimeout(Bind(this, this.Next), this.Pause));
}
},
//移动到
MoveTo: function(i) {
this._slider.style[this._css] = i + "px";
},
//下一个
Next: function() {
this.Run(++this.Index);
},
//上一个
Previous: function() {
this.Run(--this.Index);
},
//停止
Stop: function() {
clearTimeout(this._timer); this.MoveTo(this._target);
}
};

Ⅳ 请问淘宝店铺首页的轮播大图怎么弄的

1、登录淘宝，点击卖家中心

(4)首页图片轮播扩展阅读

使用淘宝助理添加商品时，每隔30分钟上传一个，上网高峰期可将时间调整为10~20分钟，这样操作可获得更多展示机会，让更多用户看到你的商品，从而提高淘宝店铺流量。

在淘宝论坛发布有意义的帖子，例如进货经验、开店感想，吸引论坛用户前来灌水。如果读者产生共鸣，就会与你交流或访问你的网店，达到免费宣传的目的。

Ⅳ 首页轮播图片怎么修改，包括先后顺序的修改

我通过火狐查看，你的第一张轮播图片是 .main_image li .img_2这个样式的，相应的把这个样式内的图片地址换掉即可
把这段替换掉你新的图片地址（/upload/20150317/merchant/9a1f6/36010/.png）

Ⅵ 首页轮播图怎么设置

后台有幻灯片BANNER栏目，直接添加到那里即可。如果栏目被删除了，就按照自己的设计开发。

Ⅶ 网站怎么做图片轮播

有赏是什么赏呢。。。6000财富值也就10块钱而已

O(∩_∩)O~

重要位置都给你做好了代码解释非常完善

html"><!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>简单的自动播放</title>
<style>
body{margin:0px;padding:0px;}
#banner{margin:auto;width:600px;height:300px;border:1pxsolid#ddd;position:relative;}
#bannerimg{width:100%;height:100%;}
#xd{position:absolute;right:0px;bottom:0px;}
#xdspan{display:block;float:left;margin-right:10px;margin-bottom:10px;cursor:pointer;}
#xdspan:hover{color:#069;}
.xd1{color:#eee;}
.xd2{color:#069;}
#foot{text-align:center;font-size:14px;}
</style>
</head>
<body>
<divid="banner">
<imgid="imgs"src="images/b1.jpg">
<divid="xd">
<spanclass="xd2">●</span>
<spanclass="xd1">●</span>
<spanclass="xd1">●</span>
<spanclass="xd1">●</span>
<spanclass="xd1">●</span>
<spanclass="xd1">●</span>
</div>
</div>
<divid="foot"><ahref="http://www.boaer.com">柏艾尔</a></div>
<script>
vartimer=setInterval("AutoPlay()",1300);//全局变量，定义定时器，每隔1300毫秒执行一次AutoPlay()函数
varp=1;//全局变量，存储当前播放的第几张图片
varxdspan=document.getElementById("xd").getElementsByTagName("span");//获取xd下的所有span标签
varxdspanlength=xdspan.length;//获取span标签的数量
for(vari=0;i<xdspanlength;i++){
	xdspan.item(i).onclick=function(){//通过for循环为所有span标签添加点击事件
		for(vari=0;i<xdspanlength;i++){//通过for循环为所有span标签设置class="xd1"
			xdspan.item(i).className="xd1";
			}
		this.className="xd2";//设置点击的span标签class="xd2"
		for(vari=0;i<xdspanlength;i++){
			if(xdspan.item(i).className=="xd2"){//通过for循环判断当前点击的是第几个小圆点，然后修改图片地址
				document.getElementById("imgs").src='images/b'+(i+1)+'.jpg';
				p=i+1;////全局变量，存储当前播放的第几张图片，以便从当前图片开始播放下一张图片
				}
			}
		}
	}
functionAutoPlay(){//自动播放函数
	if(p>=7){p=1;}//只有6张图片，当p大于等于7时就从第一张图片开始
	for(vari=0;i<xdspanlength;i++){//通过for循环为所有span标签设置class="xd1"
			xdspan.item(i).className="xd1";
			}
	xdspan.item(p-1).className="xd2";//设置当前播放的span标签class="xd2"
	document.getElementById("imgs").src='images/b'+p+'.jpg';//修改图片地址
	p++;
	}
document.getElementById("banner").onmouseover=function(){clearInterval(timer);}//当鼠标移入轮播区域时，停止自动播放
document.getElementById("banner").onmouseout=function(){timer=setInterval("AutoPlay()",1300);}//当鼠标移出轮播区域时，继续自动播放
</script>
</body>
</html>

width:600px; height:300px

对应的width是宽度 height是高度自行调整即可

Ⅷ 淘宝首页轮播图片怎么做

店铺管理，装修页面，编缉轮播，添加图片地址，也可从淘间上传，加入链接地址。

阅读全文

首页图片轮播

(4)首页图片轮播扩展阅读

与首页图片轮播相关的阅读推荐