社区
JavaScript
帖子详情
请教:怎样只用js而不用jquery实现图片轮播的效果
luludyl
2012-10-31 05:02:15
请教:怎样只用js而不用jquery实现图片轮播的效果,基本思路是怎样的啊,最好有代码?谢谢啦!!
...全文
376
8
打赏
收藏
请教:怎样只用js而不用jquery实现图片轮播的效果
请教:怎样只用js而不用jquery实现图片轮播的效果,基本思路是怎样的啊,最好有代码?谢谢啦!!
复制链接
扫一扫
分享
转发到动态
举报
AI
作业
写回复
配置赞助广告
用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
库一起导入,同时兼容
jQuery
和zepto,压缩版的大小只有6kb很适合移动端的开发,它的git地址:https://github.com/thebird/swipe 在git上对其的使用方式介绍的相当清楚,关键代码如下
基于JavaScript
实现
动画轮播
效果
这是之前做一个仿极客学院网站写的代码了,年代也比较久远。原本是使用
jquery
写的,后来被强制改回JavaScript...鬼知道我那时经历了什么。 直接上代码(Carousel.
js
): var img_list = document.getElementById("carousel-box").getElementsByTagName("div")[0]; var ori_im
图片轮播
轮播是学习
jquery
开始的第二个
实现
的动效,也是学习时间最久的一个。在
实现
轮播的过程中总是会遇到各种各样的问题,
请教
过很多人,也多次问过度娘。今天,也不敢果敢的说,可以马上写好一个轮播。希望是通过随笔的方式,记录下一些思维过程。 首先是html结构,一个简单的轮播,单张图片无缝轮播,主要分为三大层:div>ul>li,li里面的img图片。 其次,css样式:div固定住...
大学生网页制作期末作业——html+css+javascript+
jquery
旅游官网6页 html大学生网站开发实践作业 web网页设计实例作业
👨🎓静态网站的编写主要是用 HTML DⅣV+ CSS
JS
等来完成页面的排版设计👩🎓,一般的网页作业需要融入以下知识点:div布局、浮动定位、高级css、表格、表单及验证、
js
轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过
效果
等知识点,学生网页作业源码,制作水平和原创度都适合学习或交作业用,记得点赞。 🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页——🔥获取更多优质源码】 💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】 文章目录🌰一、网站题目👨🎓二、网站
静态HTML旅行主题网页作业——青岛民俗7页html+css+javascript+
jquery
地方民俗网页设计与
实现
👨🎓静态网站的编写主要是用 HTML DⅣV+ CSS
JS
等来完成页面的排版设计👩🎓,一般的网页作业需要融入以下知识点:div布局、浮动定位、高级css、表格、表单及验证、
js
轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过
效果
等知识点,学生网页作业源码,制作水平和原创度都适合学习或交作业用,记得点赞。 🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页——🔥获取更多优质源码】 💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】🚀 旅游景
JavaScript
87,996
社区成员
224,708
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章