社区
JavaScript
帖子详情
请教:怎样只用js而不用jquery实现图片轮播的效果
luludyl
2012-10-31 05:02:15
请教:怎样只用js而不用jquery实现图片轮播的效果,基本思路是怎样的啊,最好有代码?谢谢啦!!
...全文
363
8
打赏
收藏
请教:怎样只用js而不用jquery实现图片轮播的效果
请教:怎样只用js而不用jquery实现图片轮播的效果,基本思路是怎样的啊,最好有代码?谢谢啦!!
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
8 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
morphillen
2013-01-21
打赏
举报
回复
这类代码蛮多的,找个研究下就可以了·~~~
luludyl
2013-01-21
打赏
举报
回复
谢谢各位的帮忙了
wu184412656
2012-11-01
打赏
举报
回复
代码已发,方向向左,。。。你懂的自己看。
wu184412656
2012-11-01
打赏
举报
回复
<style type="text/css">
.container, .container *{margin:0; padding:0;}
/*设置窗口大小*/
.container{width:700px; height:400px; overflow:hidden;position:relative;}
.slider{position:absolute;}
.slider li{ list-style:none;display:inline;}
/*要显示出的图片大小*/
.slider img{ width:700px; height:400px; display:block;}
/*存放图片*/
.slider2{width:35000px;}
.slider2 li{float:left;}
/*显示数字*/
.num{ position:absolute; right:5px; bottom:5px;}
/*对应图片数字的效果*/
.num li{
float: left;
color: #FF7300;
text-align: center;
line-height: 20px;
width: 20px;
height: 20px;
font-family: Arial;
font-size: 16px;
cursor: pointer;
overflow: hidden;
margin: 3px 1px;
border: 1px solid #FF7300;
background-color: #fff;
}
/*选中对应图片数字的效果*/
.num li.on{
color: #fff;
line-height: 25px;
width: 25px;
height: 25px;
font-size: 20px;
margin: 0 1px;
border: 0;
background-color: #FF7300;
font-weight: bold;
}
</style>
<div class="container" id="idTransformView" style="margin:0px auto;" align="center">
<ul class="slider slider2" id="idSlider">
<li><img src="image/bug1.jpg" height="400" width="700"/></li>
<li><img src="image/bug2.jpg" height="400" width="700"/></li>
<li><img src="image/bug3.jpg" height="400" width="700"/></li>
<li><img src="image/bug4.jpg" height="400" width="700"/></li>
<li><img src="image/bug5.jpg" height="400" width="700"/></li>
</ul>
<ul class="num" id="idNum">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<br />
<script type="text/javascript">
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : 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];
}
return destination;
}
var TransformView = Class.create();
TransformView.prototype = {
//容器对象,滑动对象,切换参数,切换数量
initialize: function(container, slider, parameter, count, options) {
if(parameter <= 0 || count <= 0) return;
var oContainer = $(container), oSlider = $(slider), oThis = this;
this.Index = 0;//当前索引
this._timer = null;//定时器
this._slider = oSlider;//滑动对象
this._parameter = 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.Auto;
this.Pause = Math.abs(this.options.Pause);
this.onStart = this.options.onStart;
this.onFinish = this.options.onFinish;
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: false,//是否向上(否则向左)
Step: 5,//滑动变化率
Time: 50,//滑动延时
Auto: true,//是否自动转换
Pause: 5000,//停顿时间(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.Index;
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.Step;
if (iStep == 0) return 0;
if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1);
return iStep;
},
//停止
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.length; i < len; i++) { fun(list[i], i); }
};
var objs = $("idNum").getElementsByTagName("li");
var tv = new TransformView("idTransformView", "idSlider", 700, 5, {
onStart : function(){ Each(objs, function(o, i){ o.className = tv.Index == i ? "on" : ""; }) }//按钮样式
});
tv.Start();
Each(objs, function(o, i){
o.onmouseover = function(){
o.className = "on";
tv.Auto = false;
tv.Index = i;
tv.Start();
}
o.onmouseout = function(){
o.className = "";
tv.Auto = true;
tv.Start();
}
})
}
</script>
hch126163
2012-11-01
打赏
举报
回复
setTimeout 设置 image src 就可以
似梦飞花
2012-10-31
打赏
举报
回复
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function init(){
var imges=document.images;
for(var i=0;i<imges.length;i++){
imges[i].style.position="absolute";
imges[i].style.width="100px";
imges[i].style.height="200px";
imges[i].style.left=0+100*i+"px";
imges[i].style.top="0px";
}
move();
}
function move(){
var t="";
var imges=document.images;
for(var i=0;i<imges.length;i++){
imges[i].style.left=parseInt(imges[i].style.left)-1+"px";
if(parseInt(imges[i].style.left)==-200){
imges[i].style.left="200px";
}
}
t=window.setTimeout(move,10);
if(parseInt(imges[0].style.left)==200){
window.clearTimeout(t);
window.setTimeout(move,1000);
}
}
window.onload=init;
</script>
</head>
<body>
<div id="test" style="position:absolute;left:400px;top:100px;width:200px;height:200px;overflow:hidden">
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
</div>
</body>
</html>
大体这样试试
licip
2012-10-31
打赏
举报
回复
这个要通过javaScript+css+html来实现。
通过setTimeout或setInteral来实现吧。
A900616A
2012-10-31
打赏
举报
回复
可以讨论 但没有现成的代码...
我觉得通过setTimeout隔段时间刷新,来实现一个切换...不过没有jquery切换那么好看...
zepto中使用swipe.
js
制作轮播图附swipeUp,swipeDown不起
效果
问题
在移动web开发中,由于手机界面较小,为了能展示更多的图片经常使用轮播图并且还需要考虑到手机流量的问题,通过
请教
他人以及百度,个人感觉swipe.
js
比较好用。 它是一个纯javascript工具,不需要跟其它
js
库一起...
基于JavaScript
实现
动画轮播
效果
原本是使用
jquery
写的,后来被强制改回JavaScript...鬼知道我那时经历了什么。 直接上代码(Carousel.
js
): var img_list = document.getElementById("carousel-box").getElementsByTagName("div")[0]; var ori...
图片轮播
轮播是学习
jquery
开始的第二个
实现
的动效,也是学习时间最久的一个。在
实现
轮播的过程中总是会遇到各种各样的问题,
请教
过很多人,也多次问过度娘。今天,也不敢果敢的说,可以马上写好一个轮播。希望是通过随笔的...
静态HTML旅行主题网页作业——青岛民俗7页html+css+javascript+
jquery
地方民俗网页设计与
实现
HTML DⅣV+ CSS
JS
等来完成页面的排版设计,一般的网页作业需要融入以下知识点:div布局、浮动定位、高级css、表格、表单及验证、
js
轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过
效果
等知识点,学生网页...
基于zepto使用swipe.
js
制作轮播图demo
在移动web开发中,由于手机界面较小,为了能展示更多的图片经常使用轮播图并且还需要考虑到手机流量的问题,通过
请教
他人以及百度,个人感觉swipe.
js
比较好用 它是一个纯javascript工具,不需要跟其它
js
库一起导入...
JavaScript
87,910
社区成员
224,616
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章