本文目录
- 图片轮播效果，，从网上复制的代码，但是不知道为什么只是并列显示图片，没有轮播的效果，求大神~~~
- 刚入门web求大神解释这个js源码的意思
- 网页图片轮播特效，修改成经过停止滚动，请大神指点
- 网页设计中如何实现图片的自动切换，好想动画效果似的，但不是插入的视频，如下图所示
- 为什么这段图片轮播切换js代码在ie中可以调用，火狐浏览器和谷歌浏览器都不管用呢，请高手指点一下
- javascript怎么做出图片轮播效果左右滑动的那部分，菜鸟求教
- jquery图片轮播思路
- 请JS高手帮忙解决问题，一个焦点图代码在Google浏览器下不能正常显示
图片轮播效果，，从网上复制的代码，但是不知道为什么只是并列显示图片，没有轮播的效果，求大神~~~
《script src=“js/jquery-1.7.1.min.js“ type=“text/javascript“》《/script》《script src=“js/jquery.slideBox.min.js“ type=“text/javascript“》《/script》是这两段的代码中js/jquery-1.7.1.min.js 和js/jquery.slideBox.min.js“路径错误，或没有引入吗？
刚入门web求大神解释这个js源码的意思
你好！这段代码是轮播图的自动切换。其中还设置了鼠标移入移出的效果。setInteval函数是个定时器，两个参数:一个是执行的函数，一个是时间间隔。就是根据给定的的时间间隔(单位是毫秒)执行函数。setInterval(autoChange,3000)就是每3秒执行一次autoChange这个函数。说下autoChange函数:有一个current_index变量，用来记录当前显示的轮播图是第几个。每次执行的时候，都会先给这个变量进行自增1个。通过循环判断所有轮播图中的元素，如果索引与变量的值相同，分别设置对应元素的样式，否则设置为另一种样式。再看hotChange函数:定义了一个timer变量，也就是上面说的定时器。找出id为button的元素，并找出它下面的li子元素。用了一个for循环来遍历这个子元素数组。在循环里面做了两件事:为子元素设置onmouseover事件和onmouseout事件。其中onmouseout事件里面就是为timer重新赋值。而onmouseover事件，则是先判断timer变量是否有值。有值的话，使用clearInterval清空，也就是停止定时器；无值的话，则通过循环，为其设置样式。无值这里的循环内逻辑与autoChange函数是相同的。希望对你有帮助！
网页图片轮播特效，修改成经过停止滚动，请大神指点
非常简单，只需要关闭和打开阀门即可。我用的jquery你自己思考一下。$(“#header_03“).mouseover(function(){m_over=false;});$(“#header_03“).mouseout(function(){m_over=true;});焦点图的mouseover事件，当鼠标悬空在焦点图框上的时候阀门m_over=false阀门关上，整个移动函数停止。焦点图的mouseout事件，当鼠标离开焦点图框的时候,阀门m_over=true阀门开启，整个移动函数开始。function zx_dog(){ if(m_over){ if(dog_i《0){dog_i=dog_count;} $(“.dog_p_div“).hide(); $(“#dog_p“+dog_i).show(); $(“.btnbox img“).stop(true,true); $(“.btnbox img“).removeClass(“img_hover“); $(“.btnbox img“).animate({bottom:’0px’},200); $(“#btn_img“+dog_i).addClass(“img_hover“); $(“#btn_img“+dog_i).animate({bottom:’10px’},200); $(“#big_imgbox“).stop(); $(“#big_imgbox“).animate({left:’-845’*dog_i+’px’}); if(dog_i《dog_count){dog_i++;}else{dog_i=0;} } }移动焦点图的主函数。当m_over为true的时候主函数运行，焦点图轮播。
网页设计中如何实现图片的自动切换，好想动画效果似的，但不是插入的视频，如下图所示
焦点图效果是javascript代码《script type=“text/javascript“》《!-- var focus_width=860var focus_height=410var text_height=0var swf_height = focus_height+text_height var pics=’images/201101.jpg|images/201102.jpg|images/201103.jpg|images/201104.jpg|images/201105.jpg|images/201106.jpg’var links=’#|#|#’var texts=’||’ document.write(’《object classid=“clsid:d27cdb6e-ae6d-11cf-96b8-444553540000“ codebase=“http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0“ width=“’+ focus_width +’“ height=“’+ swf_height +’“》’);document.write(’《param name=“allowScriptAccess“ value=“sameDomain“》《param name=“movie“ value=“images/focus.swf“;》《param name=“quality“ value=“high“》’);document.write(’《param name=“menu“ value=“false“》《param name=wmode value=“opaque“》’);document.write(’《param name=“FlashVars“ value=“pics=’+pics+’&links=’+links+’&texts=’+texts+’&borderwidth=’+focus_width+’&borderheight=’+focus_height+’&textheight=’+text_height+’“》’);document.write(’《embed wmode=“opaque“ FlashVars=“pics=’+pics+’&links=’+links+’&texts=’+texts+’&borderwidth=’+focus_width+’&borderheight=’+focus_height+’&textheight=’+text_height+’“ menu=“false“ bgcolor=“#DADADA“ quality=“high“ width=“’+ focus_width +’“ height=“’+ swf_height +’“ allowScriptAccess=“sameDomain“ type=“application/x-shockwave-flash“ pluginspage=“http://www.macromedia.com/go/getflashplayer“; /》’); document.write(’《/object》’); //--》《/script》
为什么这段图片轮播切换js代码在ie中可以调用，火狐浏览器和谷歌浏览器都不管用呢，请高手指点一下
您好！很高兴为您答疑。
因为您提交代码的方式，无法为您进行调试，但是此类问题多是css兼容造成的。而且考虑到后期维护和兼容性，不推荐使用纯css的方式实现百叶窗效果，为您推荐可以良好兼容火狐浏览器的百叶窗插件如下：30款jQuery常用网页焦点图。
如果对我们的回答存在任何疑问，欢迎继续问询。
javascript怎么做出图片轮播效果左右滑动的那部分，菜鸟求教
在左右图标上加入点击事件，具体你要使用那种效果你可以自己查手册，例如简单的情况下可以定义一个div里面有几个小的div用来放置图片，点击的时候，获取下一个div show然后将兄弟节点都hide就可以，jquery选择器里面可以使用index来算到了哪一个div,也可以为当前div添加属性pre=“前一个图片id“ next=“后一个图片id“,点击时获取这个ID就可以。
jquery图片轮播思路
使用jQuery做轮播图是网页特效中很常见的一个特效。
工具原料：器、浏览器、jQuery
1、实现的总体思路：
首先是初始化部分：将除了第一张轮播图片意外的图片都隐藏，并且隐藏向前、向后按钮，使第一个索引按钮处于激活状态。
2、实现的具体事件处理思路：
事件部分：通过jquery的hover()绑定鼠标上悬以及离开时的事件处理， jquery的bind()方法绑定鼠标点击事件处理向前、向后翻动、轮播控制：pre(), next(), play(), start()开始自动轮播，stop()停止自动轮播。
3、简单的代码示例如下：
《!DOCTYPE html》 《html》 《head》 《meta charset=“UTF-8“》 《title》jquery轮播效果图 《/title》 《script type=“text/javascript“ src=“scripts/jquery-1.9.1.js“》《/script》 《style type=“text/css“》 * { padding: 0px; margin: 0px; } a { text-decoration: none; } ul { list-style: outside none none; } .slider, .slider-panel img, .slider-extra { width: 650px; height: 413px; } .slider { text-align: center; margin: 30px auto; position: relative; } .slider-panel, .slider-nav, .slider-pre, .slider-next { position: absolute; z-index: 8; } .slider-panel { position: absolute; } .slider-panel img { border: none; } .slider-extra { position: relative; } .slider-nav { margin-left: -51px; position: absolute; left: 50%; bottom: 4px; } .slider-nav li { background: #3e3e3e; border-radius: 50%; color: #fff; cursor: pointer; margin: 0 2px; overflow: hidden; text-align: center; display: inline-block; height: 18px; line-height: 18px; width: 18px; } .slider-nav .slider-item-selected { background: blue; } .slider-page a{ background: rgba(0, 0, 0, 0.2); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); color: #fff; text-align: center; display: block; font-family: “simsun“; font-size: 22px; width: 28px; height: 62px; line-height: 62px; margin-top: -31px; position: absolute; top: 50%; } .slider-page a:HOVER { background: rgba(0, 0, 0, 0.4); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); } .slider-next { left: 100%; margin-left: -28px; } 《/style》 《script type=“text/javascript“》 $(document).ready(function() { var length, currentIndex = 0, interval, hasStarted = false, //是否已经开始轮播 t = 3000; //轮播时间间隔 length = $(’.slider-panel’).length; //将除了第一张图片隐藏 $(’.slider-panel:not(:first)’).hide(); //将第一个slider-item设为激活状态 $(’.slider-item:first’).addClass(’slider-item-selected’); //隐藏向前、向后翻按钮 $(’.slider-page’).hide(); //鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动 $(’.slider-panel, .slider-pre, .slider-next’).hover(function() { stop(); $(’.slider-page’).show(); }, function() { $(’.slider-page’).hide(); start(); }); $(’.slider-item’).hover(function(e) { stop(); var preIndex = $(“.slider-item“).filter(“.slider-item-selected“).index(); currentIndex = $(this).index(); play(preIndex, currentIndex); }, function() { start(); }); $(’.slider-pre’).unbind(’click’); $(’.slider-pre’).bind(’click’, function() { pre(); }); $(’.slider-next’).unbind(’click’); $(’.slider-next’).bind(’click’, function() { next(); }); /** * 向前翻页 */ function pre() { var preIndex = currentIndex; currentIndex = (--currentIndex + length) % length; play(preIndex, currentIndex); } /** * 向后翻页 */ function next() { var preIndex = currentIndex; currentIndex = ++currentIndex % length; play(preIndex, currentIndex); } /** * 从preIndex页翻到currentIndex页 * preIndex 整数，翻页的起始页 * currentIndex 整数，翻到的那页 */ function play(preIndex, currentIndex) { $(’.slider-panel’).eq(preIndex).fadeOut(500) .parent().children().eq(currentIndex).fadeIn(1000); $(’.slider-item’).removeClass(’slider-item-selected’); $(’.slider-item’).eq(currentIndex).addClass(’slider-item-selected’); } /** * 开始轮播 */ function start() { if(!hasStarted) { hasStarted = true; interval = setInterval(next, t); } } /** * 停止轮播 */ function stop() { clearInterval(interval); hasStarted = false; } //开始轮播 start(); }); 《/script》 《/head》 《body》 《div class=“slider“》 《ul class=“slider-main“》 《li class=“slider-panel“》 《a href=“ title=“图片1“ src=“images/1.jpg“》《/a》 《/li》 《li class=“slider-panel“》 《a href=“#“》《img title=“图片2“ src=“images/1.jpg“》《/a》 《/li》 《li class=“slider-panel“》 《a href=“#“》《img title=“图片3“ src=“images/1.jpg“》《/a》 《/li》 《li class=“slider-panel“》 《a href=“#“》《img title=“图片4“ src=“images/1.jpg“》《/a》 《/li》 《/ul》 《div class=“slider-extra“》 《ul class=“slider-nav“》 《li class=“slider-item“》1《/li》 《li class=“slider-item“》2《/li》 《li class=“slider-item“》3《/li》 《li class=“slider-item“》4《/li》 《/ul》 《div class=“slider-page“》 《a class=“slider-pre“ href=“javascript:;;“》《《/a》 《a class=“slider-next“ href=“javascript:;;“》》《/a》 《/div》 《/div》 《/div》 《/body》 《/html》请JS高手帮忙解决问题，一个焦点图代码在Google浏览器下不能正常显示
ff,gg不显示是因为不支持filters滤镜，所以改为透明载入的方式实现。页面刚载入的时候也没有轮播，鼠标over的时候也没有停止轮播，以上错误我都已改正。我是豪情，豪情就是我。var picarry = ;var lnkarry = ;var ttlarry = ;picarry = “images/01.jpg“;lnkarry = “#“;ttlarry = “# 标题1“;picarry = “images/02.jpg“;lnkarry = “#“;ttlarry = “# 标题2“;picarry = “images/03.jpg“;lnkarry = “#“;ttlarry = “# 标题3“;picarry = “images/04.jpg“;lnkarry = “#“;ttlarry = “# 标题4“;var currslid = 0;var slidint;/** * 设置透明度 * @param {Object} elem * @param {Object} level (0-100) */function setOpacity(elem, level){ if(elem.filters){ //如果是IE elem.style.filter = ’alpha(opacity=’ + level + ’)’; elem.style.zoom = 1; } else { //否则是W3C elem.style.opacity = level / 100; }}/** * 透明度渐显 From: http://mrthink.net/js-fadein-fadeout-fadeto/ * @param {Object} elem * @param {Number} speed 淡入速度,正整数(可选) * @param {Number} opacity 淡入到指定的透明度,0~100(可选) */function fadeInThink(elem, speed, opacity){ speed = speed || 20; opacity = opacity || 100; //show(elem); setOpacity(elem, 0); //初始化透明度变化值为0 var val = 0; //循环将透明值以5递增,即淡入效果 (function(){ setOpacity(elem, val); val += 5; if (val 《= opacity) { setTimeout(arguments.callee, speed) } })();}function setfoc(id) { stopit(); var focpic = document.getElementById(“focpic“); focpic.src = picarry + “《/a》“; //currslid = id; for (i = 0; i 《 4; i++) { document.getElementById(“tmb“ + i).className = “thubpic“; }; document.getElementById(“tmb“ + id).className = “thubpiccur“;if(focpic.filters){ focpic.style.visibility = “hidden“; focpic.filters.Apply(); if (focpic.style.visibility == “visible“) { focpic.style.visibility = “hidden“; focpic.filters.revealTrans.transition = 12; } else { focpic.style.visibility = “visible“; focpic.filters.transition = 12; } focpic.filters.Play(); } else { fadeInThink(focpic); }}function playnext() { if (currslid == 3) { currslid = 0; } else { currslid++; }; setfoc(currslid); playit();};function playit() { slidint = setTimeout(playnext,2000);};function stopit() { clearTimeout(slidint);}; playit();
