js新闻幻灯片

A. js幻灯片是怎么实现

1.图片放置：你需要把所有图片放入一个div（这里就把它的class叫做pics吧）中，再把pics放入一个更大的div（就命名为container吧）中，然后把container的宽度设为一张图片的宽度，再给它设置overflow:hidden。然后把pics的宽度设置为所有图片的总宽度。这样方便后面从左向右切换。如下图所示：

2.图片轮播。基本要领是，当点击next按钮的时候，将pics容器的left属性定义到下一张图片的位置，从而移动到下一张图片，例如，假设当前是第二张图片，那么点击按钮的时候应该把pics的left值设为-640*2 + 'px'（因为我这里用的图片都是-640px的）（当然这里还要加入一个计数器，当点到最后一张图片的时候，计数器置0）。

如果你不打算加入平滑移动的动画，那到这里就可以结束了。但是如果你打算加入动画，这里就有一个问题：当移动到最后一张图片的时候，继续点击，图片组会由最后一张长途跋涉回滚到第一张，这样用户体验很不好。理想的状态应当是，当你滚动到最后一张继续滚动的时候，应当像之前滚向下一张一样无缝滚动。不知道我说的清不清楚，大致就是：像手机屏幕一样，当你滑动到最后一屏的时候接着滑动，会直接滑回一屏，也就是循环滑动。

它的基本原理是，你要在正常的图片组的最后面加入一张缓冲图片（src和第一张图片相同），当幻灯片正处于最后一张图片的时候，点击滑动按钮，平滑滑动到这张缓冲图片，当用户下一次点击的时候，再悄悄地把图片置换回真正的第一张图片，然后再执行动画。由于置换回第一张图片的时候是立即执行的，所以用户不会发现图片已经回到了真正的第一张，这就实现了循环滑动。

B. js如何实现新闻轮播

编写基本的样
<div class="slide" id="slide">
<div class="img-div">
<img src="img/banner1.png" title="图片1"/>
<img src="img/banner2.png" title="图片2"/>
<img src="img/banner3.png" title="图片3"/>
</div>
<div class="slide-btn">
<a href="#" class="hover">●</a>
<a href="#">●</a>
<a href="#">●</a>
</div>
</div>

获取文档对象
以id获取文档对象
$id:function(id){return document.getElementById(id);},
//以标签名获取文档对象
$tag:function(tagName,obj){return (obj ?obj : document).getElementsByTagName(tagName); },
以class获取文档对象
$c：function (claN,obj){
var tag = $tag('*'),reg = new RegExp('(^|\\s)'+claN+'(\\s|$)'),arr=[];
for(var i=0;i<tag.length;i++){
if (reg.test(tag[i].className)){
arr.push(tag[i]);
}
}
return arr;
}

添加和移除class
$add:function(obj,claN){
reg = new RegExp('(^|\\s)'+claN+'(\\s|$)');
if (!reg.test(obj.className)){

obj.className += ' '+claN;
}
},
//移除classs
$remve:function(obj,claN){var cla=obj.className,reg="/\\s*"+claN+"\\b/g";obj.className=cla?cla.replace(eval(reg),''):''},

css获取方法
css:function(obj,attr,value){
if(value){
obj.style[attr] = value;
}else{
return typeof window.getComputedStyle != 'undefined' ? window.getComputedStyle(obj,null)[attr] : obj.currentStyle[attr];
}
},

常用的easing方法
easing ={
linear:function(t,b,c,d){return c*t/d + b;},
swing:function(t,b,c,d) {return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;},
easeIn:function(t,b,c,d){return c*(t/=d)*t*t*t + b;},
easeOut:function(t,b,c,d){return -c*((t=t/d-1)*t*t*t - 1) + b;},
easeInOut:function(t,b,c,d){return ((t/=d/2) < 1)?(c/2*t*t*t*t + b):(-c/2*((t-=2)*t*t*t - 2) + b);}
}

初始化
config:{
index:0,
auto:true,
direct:'left' //滚动方向，left,top,
},
init:function(){
this.slide = this.$id('slide');
this.img_div = this.$c('img-div')[0],
this.slide_btn = this.$tag('a',this.$c('slide-btn')[0]);
this.img_arr = this.$tag('img',this.img_div);
if(this.config.auto) this.play();//是否自动播放
this.hover();//绑定导航悬停切换。即mouseover,mouseout事件
},

动画效果
animate:function(obj,attr,val){
var d = 1000;//动画时间一秒完成。
if(obj[attr+'timer']) clearInterval(obj[attr+'timer']);
var start = parseInt(zBase.css(obj,attr));//动画开始位置
//space = 动画结束位置-动画开始位置，即动画要运动的距离。
var space = val- start,st=(new Date).getTime(),m=space>0? 'ceil':'floor';
obj[attr+'timer'] = setInterval(function(){
var t=(new Date).getTime()-st;//表示运行了多少时间，
if (t < d){//如果运行时间小于动画时间
zBase.css(obj,attr,Math[m](zBase.easing['easeOut'](t,start,space,d)) +'px');
}else{
clearInterval(obj[attr+'timer']);
zBase.css(obj,attr,top+space+'px');
}
},20);
},

导航切换
hover:function(){
for(var i=0;i<this.slide_btn.length;i++){
this.slide_btn[i].index = i;
this.slide_btn[i].onmouseover = function(){
if(zBase.slide.timer) clearInterval(zBase.slide.timer);
zBase.config.index =this.index;

for(var j=0;j<zBase.slide_btn.length;j++){
zBase.$remve(zBase.slide_btn[j],'hover') ;
}
zBase.$add(zBase.slide_btn[zBase.config.index],'hover');
zBase.animate(zBase.img_div,zBase.config.direct,-zBase.config.index*500);//500是轮播器的大小，当前索引乘以500，再取负，就是轮播器要滚动f到的位置。
}
this.slide_btn[i].onmouseout = function(){
zBase.play();
}
}
},

自动播放
play:function(){
this.slide.timer = setInterval(function(){
zBase.config.index++;
if(zBase.config.index>=zBase.img_arr.length) zBase.config.index=0;

zBase.animate(zBase.img_div,zBase.config.direct,-zBase.config.index*500);
for(var j=0;j<zBase.slide_btn.length;j++){
zBase.$remve(zBase.slide_btn[j],'hover') ;
}
zBase.$add(zBase.slide_btn[zBase.config.index],'hover');

},3000)
},

调用代码
zBase.init();

C. 用HTML+CSS+JS制作出幻灯片效果

如果是复mac的用户，会有一个更快的方制式来制作，在AppStore下载iWork中的Keynote，打开ppt或制作ppt后可以导出为HTML文稿，所有特效所有细节全部保留，如果需要可以吧PPT发给我，帮你转换

D. js自动播放幻灯片函数

js自动播放幻灯片函数用法：
1、用setInterval() 每个几秒给<li></li>；
2、用attr()添加一个class；
3、用if()判断版li的索引 , 用eq(i)确定；权

4、读到的索引..用show() 显示 用级siblings 的img 用 hide()隐藏 。

E. asp调用新闻图片实现幻灯片效果

首先，你在添加新闻的时候，要记录新闻图片。
然后，在页面输出的时候，读出图片地址。
用JS/JQ/JS+FLASH（网上有很多，可以搜索下载：焦点图），至于如何拼参数，
不同程序不尽相同，一般下来的程序都有范例，参考一下即可。

F. JS幻灯片，请看代码！

slideList = ['./images/slide/zc/m1.jpg'];这是一个数组的写法，
slideList = ['./images/slide/zc/m1.jpg'，'./images/slide/zc/m1.jpg'，'./images/slide/zc/m1.jpg'];
多张就加多个路径，中间版用逗号隔权开

G. 网站常用的一种JS幻灯片代码问题

这个写得太复杂了，我发你一个自己写得
<!doctype html>
<html lang="en">
<head>
<title>图片切换</title>
<style>
li{
list-style-type:none;
}
#ad{
width:524px;
text-align:center;
}

#ad_screen{
width:524px;
height:190px;
float:left;
}

.ad_page{
float:left;
margin-top:-30px;
margin-left:210px;
}

.ad_page li{
float:left;
background-color:#999;
width:20px;
height:20px;
margin-left:3px;
}

.ad_page li a{
color:#fff;
}

</style>
<script>

function changead(num,refre)
{
if(num == 5)
num = 1;
var sc = document.getElementById("screens");
sc.src="images/ad-0" + num+ ".jpg";

}
</script>
</head>
<body>

<div class="middle">
<div id="ad">
<div id="ad_screen">
<img id="screens" src="images/ad-01.jpg" width="524" height="190">
</div>
<ul class="ad_page">
<li><a href="#" id="p1" onclick="changead(1);">1</a></li>
<li><a href="#" id="p2" onclick="changead(2);">2</a></li>
<li><a href="#" id="p3" onclick="changead(3);">3</a></li>
<li><a href="#" id="p4" onclick="changead(4);">4</a></li>
</ul>
</div>

</div>
</body>
</html>

<style>里面是样式，图片路径因为我的图片是连续的1，2，3，4，所以就可以直接这样写方法

H. 用js制作个最为简单的幻灯片思路，初学者，步骤加代码，详细点，谢谢

div+css你至少得会吧？来
首先定义一个源轮播器大盒子。设置overflow为hidden。设置其宽度，高度、position设置为相对
再在里面套一个图片盒子，里面加多个img标签。float设置为left。每张照片的大小就是轮播器的大小。那么在轮播器范围内的img'就会显示出来。其他的img就因为上面设置的overflow属性而被隐藏了。position设置为绝对定位。

js代码方面你在窗口window.onload=function(){
写上一个定时器

设置定时器执行的方法，就是每隔多少秒就把图片盒子里的left属性设置为轮播器大小的--、基本的就出来了。
其他的代码bug自己完善。
}
你提问前问题因为更具体点。代码自己网络，思路给你说了，要是你还要代码只能说明至少你现在不适合干程序设计。自己不敲代码，光想网络复制粘贴运行没多大用

I. javascript 原先有三个幻灯片，现在想增加两个幻灯片，请问哪里修改

• 第一种方法，点击小“+”号添加。当我们把光标指向小“+”号时，出现“新建下一张幻灯片”。

  

J. js幻灯片效果但是不显示幻灯片，是什么原因啊，如何改代码，图片链接是正确的，请帮我看看代码，谢谢啦

在你的css里加来入如下代码：源
.img {
width: expression(this.width > 130)this.width=120;
height: expression(this.height > 86)this.height=76;
}
//代码中数字为你要显示图片的宽和高
在body的图片标签中调用