本文目录
- 求助，解析一段JS代码（关于幻灯片的轮询时间）
- 做图片轮播功能（要一直从右往左播，不断的循环），js怎么写看一下我的代码给我讲几句重要的代码
- javascript怎么做出图片轮播效果左右滑动的那部分，菜鸟求教
- 如何理解js的轮播图 if if slide
- js实现轮播代码怎么写
- 求js轮播图代码,有详细注释
- 用js制作个最为简单的幻灯片思路，初学者，步骤加代码，详细点，谢谢
- JS如何实现左右滚动轮播代码详细点
- js简单问题、轮播代码没搞懂
求助，解析一段JS代码（关于幻灯片的轮询时间）
轮训的控制时间一般都是setTimeout或者setInterval,鼠标悬停的话应该是mousemove（mouseenter）事件，你搜下应该很容易找到的
做图片轮播功能（要一直从右往左播，不断的循环），js怎么写看一下我的代码给我讲几句重要的代码
你把整个ul想成是一张图片，你要做的就是把ul左右移动，然后在ul外面可以套一个div，样式为{overflow:hidden}，关于复位，你可以用％运算，当移动到最后一个li的时候，跳到第一个li去。
javascript怎么做出图片轮播效果左右滑动的那部分，菜鸟求教
在左右图标上加入点击事件，具体你要使用那种效果你可以自己查手册，例如简单的情况下可以定义一个div里面有几个小的div用来放置图片，点击的时候，获取下一个div show然后将兄弟节点都hide就可以，jquery选择器里面可以使用index来算到了哪一个div,也可以为当前div添加属性pre=“前一个图片id“ next=“后一个图片id“,点击时获取这个ID就可以。
如何理解js的轮播图 if if slide
不用详细讲解，在不添加类镜的情况下（最精简装），代码其实很简单。由以下三部分构成：1、通过Js的document.getElementById(“*“).innerHtml=“《img src=“+i+“/》“;把图片放进相应的id的位置，同时自增i，并封装到一个函数内。假设成为f()2、设置运行上述函数的运行时间:setTimeout(f,3000);3、绑定到window.onload=setTimeout(f,3000);//每三秒换一张图片 P.S.我自讲述最简单，最经典的案例。
js实现轮播代码怎么写
《!DOCTYPE html》
《html》
《head》
《meta charset=“UTF-“》
《title》最简单的轮播广告《/title》
《style》
body, div, ul, li {
margin: ;
padding: ;
}
ul {
list-style-type: none;
}
body {
background: #;
text-align: center;
font: px/px Arial;
}
#box {
position: relative;
width: px;
height: px;
background: #fff;
border-radius: px;
border: px solid #fff;
margin: px auto;
}
#box .list {
position: relative;
width: px;
height: px;
overflow: hidden;
border: px solid #ccc;
}
#box .list li {
position: absolute;
top: ;
left: ;
width: px;
height: px;
opacity: ;
transition: opacity .s linear
}
#box .list li.current {
opacity: ;
}
#box .count {
position: absolute;
right: ;
bottom: px;
}
#box .count li {
color: #fff;
float: left;
width: px;
height: px;
cursor: pointer;
margin-right: px;
overflow: hidden;
background: #F;
opacity: .;
border-radius: px;
}
#box .count li.current {
color: #fff;
opacity: .;
font-weight: ;
background: #f
}
《/style》
《/head》
《body》
《div id=“box“》
《ul》
《li style=“opacity: ;“》《img src=“img/images/.jpg“ width=““ height=““》《/li》
《li style=“opacity: ;“》《img src=“img/images/.jpg“ width=““ height=““》《/li》
《li style=“opacity: ;“》《img src=“img/images/.jpg“ width=““ height=““》《/li》
《li style=“opacity: ;“》《img src=“img/images/.jpg“ width=““ height=““》《/li》
《li style=“opacity: ;“》《img src=“img/images/.jpg“ width=““ height=““》《/li》
《/ul》
《ul》
《li》《/li》
《li class=““》《/li》
《li class=““》《/li》
《li class=““》《/li》
《li class=““》《/li》
《/ul》
《/div》
《script》
var box=document.getElementById(’box’);
var uls=document.getElementsByTagName(’ul’);
var imgs=uls.getElementsByTagName(’li’);
var btn=uls.getElementsByTagName(’li’);
var i=index=; //中间量，统一声明；
var play=null;
console.log(box,uls,imgs,btn);//获取正确
//图片切换, 淡入淡出效果我是用（transition: opacity .s linear）做的,不纠结、简单 在css里面
function show(a){ //方法定义的是当传入一个下标时，按钮和图片做出对的反应
for(i=;i《btn.length;i++ ){
btn[i].className=’’; //很容易看懂吧？每个按钮都先设置成看不见，然后把当前按钮设置成可见。
btn[a].className=’current’;
}
for(i=;i《imgs.length;i++){ //把图片的效果设置和按钮相同
imgs[i].style.opacity=;
imgs[a].style.opacity=;
}
}
//切换按钮功能，响应对应图片
for(i=;i《btn.length;i++){
btn[i].index=i; //不知道你有没有发现，循环里的方法去调用循环里的变量体i，会出现调到的不是i的变动值的问题。所以我先在循环外保存住
btn[i].onmouseover=function(){
show(this.index);
clearInterval(play); //这就是最后那句话追加的功能
}
}
//自动轮播方法
function autoPlay(){
play=setInterval(function(){ //这个paly是为了保存定时器的，变量必须在全局声明 不然其他方法调不到 或者你可以调用auto.play 也许可以但是没时间试了
index++;
index》=imgs.length&&(index=);//可能有优先级问题，所以用了括号，没时间测试了。
show(index);
},)
}
autoPlay();//马上调用，我试过用window.onload调用这个方法，但是调用之后影响到了其他方法，使用autoPlay所以只能这样调用了
//div的鼠标移入移出事件
box.onmouseover=function(){
clearInterval(play);
};
box.onmouseout=function(){
autoPlay();
};
//按钮下标也要加上相同的鼠标事件，不然图片停止了，定时器没停，会突然闪到很大的数字上。 貌似我可以直接追加到之前定义事件中。
《/script》
《/body》
《/html》
求js轮播图代码,有详细注释
《!DOCTYPE html》《html lang=“en“》《head》《meta charset=“UTF-8“》《title》《/title》《style type=“text/css“》* {padding: 0;margin: 0;list-style: none;border: 0;}.all {width: 500px;height: 200px;padding: 7px;border: 1px solid #ccc;margin: 100px auto;position: relative;}.screen {width: 500px;height: 200px;overflow: hidden;position: relative;}.screen li {width: 500px;height: 200px;overflow: hidden;float: left;}.screen ul {position: absolute;left: 0;top: 0px;width: 3000px;}.all ol {position: absolute;right: 10px;bottom: 10px;line-height: 20px;text-align: center;}.all ol li {float: left;width: 20px;height: 20px;background: #fff;border: 1px solid #ccc;margin-left: 10px;cursor: pointer;}.all ol li.current {background: #DB192A;}#arr {display: none;}#arr span {width: 40px;height: 40px;position: absolute;left: 5px;top: 50%;margin-top: -20px;background: #000;cursor: pointer;line-height: 40px;text-align: center;font-weight: bold;font-family: ’黑体’;font-size: 30px;color: #fff;opacity: 0.3;border: 1px solid #fff;}#arr #right {right: 5px;left: auto;}《/style》《/head》《body》《div class=“all“ id=’box’》《!--相框--》《div class=“screen“》《ul》《li》《img src=“images/41.jpg“ width=“500“ height=“200“ /》《/li》《li》《img src=“images/42.jpg“ width=“500“ height=“200“ /》《/li》《li》《img src=“images/43.jpg“ width=“500“ height=“200“ /》《/li》《li》《img src=“images/44.jpg“ width=“500“ height=“200“ /》《/li》《li》《img src=“images/45.jpg“ width=“500“ height=“200“ /》《/li》《/ul》《ol》《/ol》《/div》《div id=“arr“》《span id=“left“》《《/span》《span id=“right“》》《/span》《/div》《/div》《!-- 《script src=“common.js“》《/script》 --》《script》function my$(id) {return document.getElementById(id);}function setInnerText(element, content) {if (typeof element.textContent === “undefined“) {//IE浏览器element.innerText = content;} else {element.textContent = content;}}function animate(element, target) {//先干掉定时器clearInterval(element.timeId);element.timeId = setInterval(function () {//时时的获取元素的当前的位置var current = element.offsetLeft;//每次移动的步数var step = 10;//设置每次移动的步数是正数还是负数step = current 《 target ? step : -step;//移动后的当前的位置current += step;if (Math.abs(target - current) 》 Math.abs(step)) {element.style.left = current + “px“;} else {clearInterval(element.timeId);element.style.left = target + “px“;}}, 20);}//获取最外面的divvar box = my$(“box“);//获取相框var screen = box.children;//获取相框的宽度var imgWidth = screen.offsetWidth;//获取ulvar ulObj = screen.children;//获取ul中的livar ulLiObj = ulObj.children;//获取olvar olObj = screen.children;//获取的是左右焦点的divvar arr = my$(“arr“);//获取左边的按钮var left = my$(“left“);//获取右边的按钮var right = my$(“right“);var pic = 0;//页面加载后先创建小按钮,根据ul中的li个个数来创建li,把li加入到ol中for (var i = 0; i 《 ulLiObj.length; i++) {//创建livar liObj = document.createElement(“li“);//把li加入到ol中olObj.appendChild(liObj);setInnerText(liObj, (i + 1)); //兼容代码//为每个ol中的li添加一个自定义属性存储索引值liObj.setAttribute(“index“, i);//为每个li注册鼠标进入事件liObj.onmouseover = function () {//先把ol中所有的li的背景颜色全部干掉for (var j = 0; j 《 olObj.children.length; j++) {olObj.children[j].removeAttribute(“class“);}//设置当前鼠标进入的li有背景颜色this.className = “current“;//移动ul//获取鼠标进入的ol中的li的索引值pic = this.getAttribute(“index“);animate(ulObj, -pic * imgWidth);};}//第一个标签设置颜色olObj.children.className = “current“;//追加一个图片到ul中ulObj.appendChild(ulObj.children.cloneNode(true));//页面加载之后自动移动var timeId = setInterval(f1, 1000);//鼠标进入box.onmouseover = function () {arr.style.display = “block“;clearInterval(timeId);}//鼠标离开box.onmouseout = function () {arr.style.display = “none“;timeId = setInterval(f1, 1000);}//右边焦点right.onclick = f1;function f1() {//判断是否到达最后一张if (pic == ulLiObj.length - 1) {//跳转到第一张pic = 0;ulObj.style.left = -pic * imgWidth + “px“;}pic++;//调用动画函数animate(ulObj, -pic * imgWidth);//刷一遍for (var i = 0; i 《 olObj.children.length; i++) {olObj.children[i].removeAttribute(“class“);}//第一个按钮的颜色if (pic == ulLiObj.length - 1) {olObj.children.className = “current“;} else {olObj.children[pic].className = “current“;}};//左边焦点left.onclick = function () {//判断是否到达第一张图片if (pic == 0) {//跳转到第六张图片pic = ulLiObj.length - 1;ulObj.style.left = -pic * imgWidth + “px“;}pic--;//调用动画函数animate(ulObj, -pic * imgWidth);//刷一遍for (var i = 0; i 《 olObj.children.length; i++) {olObj.children[i].removeAttribute(“class“);}olObj.children[pic].className = “current“;}《/script》《/body》《/html》
用js制作个最为简单的幻灯片思路，初学者，步骤加代码，详细点，谢谢
div+css你至少得会吧？首先定义一个轮播器大盒子。设置overflow为hidden。设置其宽度，高度、position设置为相对再在里面套一个图片盒子，里面加多个img标签。float设置为left。每张照片的大小就是轮播器的大小。那么在轮播器范围内的img’就会显示出来。其他的img就因为上面设置的overflow属性而被隐藏了。position设置为绝对定位。js代码方面你在窗口window.onload=function(){ 写上一个定时器 设置定时器执行的方法，就是每隔多少秒就把图片盒子里的left属性设置为轮播器大小的--、基本的就出来了。 其他的代码bug自己完善。}你提问前问题因为更具体点。代码自己百度，思路给你说了，要是你还要代码只能说明至少你现在不适合干程序设计。自己不敲代码，光想百度复制粘贴运行没多大用
JS如何实现左右滚动轮播代码详细点
var datas = [{imgSrc:“（图片 ）“},{imgSrc:“（图片 ）“},{imgSrc:“（图片 ）“},{imgSrc:“（图片 ）“},{imgSrc:“（图片 ）“},{imgSrc:“（图片 ）“}];var banner = document.getElementById(“banner“);var list = document.getElementById(“list“);for(var i = 0,len = datas.length;i《len;i++){var div = document.createElement(“div“);var li = document.createElement(“li“);if(i==0){ //默认第一项轮播项显示 对应的控制按钮被选中div.className = “item active“;li.className = “active“;}else{ //其他项隐藏 其他的控制按钮样式不改变div.className = “item“;li.className = ““;}div.innerHTML = ’《a href=“’ + datas[i].targetSrc + ’“》’ +’《img src=“’ + datas[i].imgSrc + ’“ /》’ +’《/a》’;li.innerHTML = i + 1;banner.appendChild(div);list.appendChild(li);}var lunBo = document.getElementById(“lunBo“);var items = document.querySelectorAll(“#lunBo #banner .item“);var lis = document.querySelectorAll(“#lunBo #list li“); var currentIndex = 0;//(控制按钮和轮播项共同的索引)for(var i = 0,len = lis.length;i《len;i++){lis[i].index = i;lis[i].onmouseenter = function(){currentIndex = this.index;for(var j = 0;j《len;j++){lis[j].className = ““;items[j].className = “item“;}this.className = “active“;items[this.index].className = “item active“;}}var termId; //全局变量function autoPlay(){termId = setInterval(function(){currentIndex++;if(currentIndex==lis.length){currentIndex = 0;}lis[currentIndex].onmouseenter();},3000);}autoPlay();//打开页面自动轮播//鼠标进入停止轮播lunBo.onmouseenter = function(){clearInterval(termId);}//鼠标离开继续轮播lunBo.onmouseleave = function(){autoPlay();}我这还有其他的，先采纳一下加我，我给你发
js简单问题、轮播代码没搞懂
setInterval(function(){ img[pos].style.display = ’none’;//设置索引为0的图片（就是第一张）样式为dislay：none； pos = ++pos == len? 0 : pos;//如果索引值 == 你所添加图片的数量就把索引值设置为0，如果不等于就把自加后的索引值 赋给pos； img[pos].style.display = ’inline’;//设置相对应索引值的图片样式为dislay：inline； },1000)每隔一秒执行一次，一直循环