原生js实现图片轮播特效
本文特意为原生js实现图片轮播特效代码做了下总结，分享给大家供大家参考，欢迎大家学习。
运行效果图：
具体代码：
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&最简单的轮播广告&/title&
body, div, ul, li {
margin: 0;
padding: 0;
list-style-type:
background: #000;
text-align:
font: 12px/20px A
width: 492
height: 172
background: #
border-radius: 5
border: 8px solid #
margin: 10
#box .list {
width: 490
height: 170
border: 1px solid #
#box .list li {
width: 490
height: 170
opacity: 0;
transition: opacity 0.5s linear
#box .list li.current {
opacity: 1;
#box .count {
#box .count li {
height: 20
margin-right: 5
background: #F90;
opacity: 0.7;
border-radius: 20
#box .count li.current {
opacity: 0.7;
font-weight: 700;
background: #f60
&div id="box"&
&ul class="list"&
&li class="current" style="opacity: 1;"&&img src="img/images04/01.jpg" width="490" height="170"&&/li&
&li style="opacity: 0;"&&img src="img/images04/02.jpg" width="490" height="170"&&/li&
&li style="opacity: 0;"&&img src="img/images04/03.jpg" width="490" height="170"&&/li&
&li style="opacity: 0;"&&img src="img/images04/04.jpg" width="490" height="170"&&/li&
&li style="opacity: 0;"&&img src="img/images04/05.jpg" width="490" height="170"&&/li&
&ul class="count"&
&li class="current"&1&/li&
&li class=""&2&/li&
&li class=""&3&/li&
&li class=""&4&/li&
&li class=""&5&/li&
var box=document.getElementById('box');
var uls=document.getElementsByTagName('ul');
var imgs=uls[0].getElementsByTagName('li');
var btn=uls[1].getElementsByTagName('li');
var i=index=0; //中间量，统一声明；
console.log(box,uls,imgs,btn);//获取正确
//图片切换, 淡入淡出效果我是用（transition: opacity 0.8s linear）做的,不纠结、简单 在css里面
function show(a){
//方法定义的是当传入一个下标时，按钮和图片做出对的反应
for(i=0;i&btn.i++ ){
btn[i].className='';
//很容易看懂吧？每个按钮都先设置成看不见，然后把当前按钮设置成可见。
btn[a].className='current';
for(i=0;i&imgs.i++){ //把图片的效果设置和按钮相同
imgs[i].style.opacity=0;
imgs[a].style.opacity=1;
//切换按钮功能，响应对应图片
for(i=0;i&btn.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&=imgs.length&&(index=0);//可能有优先级问题，所以用了括号，没时间测试了。
show(index);
autoPlay();//马上调用，我试过用window.onload调用这个方法，但是调用之后影响到了其他方法，使用autoPlay所以只能这样调用了
//div的鼠标移入移出事件
box.onmouseover=function(){
clearInterval(play);
box.onmouseout=function(){
autoPlay();
//按钮下标也要加上相同的鼠标事件，不然图片停止了，定时器没停，会突然闪到很大的数字上。 貌似我可以直接追加到之前定义事件中。
希望本文所述对大家学习javascript程序设计有所帮助。
顶一下(0) 踩一下(0)
热门标签：【实例演示】
前几天用jquery做了一个JS的，现在用原生的javascript代码实现同样的功能，当练习用吧，代码写得不是很满意。看到BlueDream在他博客上写的的效果，代码实在是优雅，相比较差别一下就凸显了，下次再把他代码的精髓偷过来，嘿嘿。
【原理简述】
html和css跟里面的一样，略去。主要是几个公共函数，渐显和渐失，用闭包实现。至于主体逻辑部分，非常一般。
【程序源码】
贴几个公共函数算了，fadeIn,渐显,fadeOut,渐失
function id(name) {return document.getElementById(name);}
//遍历函数
function each(arr, callback) {
if (arr.forEach) {arr.forEach(callback);}
else {&&for (var i = 0, len = arr. i & i++) callback.call(this, arr[i], i, arr);}
function fadeIn(elem) {
setOpacity(elem, 0)
for ( var i = 0; i & 20; i++) {
(function() {
var pos = i * 5;
setTimeout(function() {
setOpacity(elem, pos)
}, i * 25);
function fadeOut(elem) {
for ( var i = 0; i &= 20; i++) {
(function() {
var pos = 100 - i * 5;
setTimeout(function() {
setOpacity(elem, pos)
}, i * 25);
// 设置透明度
function setOpacity(elem, level) {
if (elem.filters) {
elem.style.filter = "alpha(opacity=" + level + ")";
elem.style.opacity = level / 100;
【调用方法】
//count:图片数量，wrapId:包裹图片的DIV,ulId:按钮DIV,infoId：信息栏
babyzone.scroll(count,wrapId,ulId,infoId);
babyzone.scroll(4,"banner_list","list","banner_info");
【源码下载】
本文地址：
阅读(...) 评论()基于jQuery+CSS3的图片场景标注弹窗特效代码，适合在图片上标注某个物件，单击弹出详情说明，兼容360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗，不支持IE8及以下浏览器。...
| 更新时间：
基于baguetteBox的轻量级图片特效插件，支持自适应屏幕大小的js图片相册浏览特效代码，代码简洁易用，推荐下载。兼容IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。...
| 更新时间：
基于jQuery的一款旋转木马特效，支持全屏显示，弹窗浏览大图等，兼容IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗浏览器。...
| 更新时间：
基于jQuery的一款百叶窗过渡特效插件，支持四种不同的百叶窗过渡特效，适合用在网站图集上使用，推荐下载学习。360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗
不支持IE8及以下浏览...
| 更新时间：
纯CSS3实现的一款图片展示特效代码，支持鼠标悬停图片会抖动的特效，简洁好用，推荐下载试用。360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗
不支持IE8及以下浏览器。...
| 更新时间：
基于CSS3实现的图集浏览特效，可以实现如Lightbox灯箱效果的图片展示特效，单击小图弹出带遮罩层的大图，有三种不同的特效效果，适合网站图集浏览功能，推荐下载试用。...
| 更新时间：
基于jQuery的图片特效代码，支持左右滚动显示，当前图片自动放大显示，可以设置图片标题等，效果不错，推荐下载！兼容IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗浏览器。...
| 更新时间：
一款基于jQuery的lightbox图片灯箱浏览特效代码，有多种不同的弹出窗口效果，支持单图及组图浏览效果，可设置遮罩背景色等，功能较好，推荐下载试用。...
| 更新时间：
带缩放效果的jQuery选项卡TAB图片切换特效代码，适合做图片展示，兼容IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗浏览器。...
| 更新时间：
基于jQuery的图片放大特效，在鼠标划过时会自动放大当前图片，兼容IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗浏览器。...
| 更新时间：
jQuery幻灯
jQuery相册
jQuery幻灯
jQuery幻灯
jQuery幻灯问题：(html)关于js实现图片轮播
描述:大家好，我是一个大一的学生，最近想自学下前端的简单知识。我是个菜鸟，入门级都没达到的菜鸟。最近在模仿一个网站，/ 我想实现这个网上首页的那种多个图片轮播的效果。我在网上找到了其他实现这种效果的代码，但是跟这个网站上的实现方法好像都不一样？麻烦各位前辈指导指导，这个网站的实现原理是什么样子的？核心代码应该是这一部分吧？
this.switchImg=function(b,a,d)
this.currentImg=(a=!a)?(b+1)%this.realLen:Math.abs(b+this.realLen-1)%this.realL
this.switchType.call(this,a,d)
this.switchType=function(b,a)
this.switchFunc.call(this,b,a);
this.switchDot.call(this)
this.switchDot=function()
var b=this.options.dotList.children("li");
b.removeClass("hover-li");
$(b[this.currentImg]).addClass("hover-li")
this.autoRun=function()
b.inter=setInterval(function(){e.switchImg(e.currentImg,!1,!0)},this.options.switchMin)
this.switchType()
b.rollFunc=function(b,f)
var h=this.currentImg,a=0,d=this.options.unitWidth,c=this.options.switchS
f?0==h&&b?(a=this.realLen*d,this.largeBoxView.stop().animate({marginLeft:-a+"px"},c)):
h==this.realLen-1&&!b?(a=h*d,this.largeBoxView.css("margin-left",-(this.realLen*d)+"px"),this.largeBoxView.stop().animate({marginLeft:-a+"px"},c)):h&=this.realLen-1&&0&=h&&(a=h*d,1==h&&b&&this.largeBoxView.css("margin-left","0px"),this.largeBoxView.stop().animate({marginLeft:-a+"px"},c)):(a=h*d,this.largeBoxView.stop().animate({marginLeft:-a+"px"},c))
b.fadeFunc=function()
this.largeBoxView.find("a").hide();
$(this.largeBoxView.find("a")[this.currentImg]).show()
b.prototype={};
amsControl([26,27,28,29],function(e) {
e.success?(e={unitWidth:580,unitHeight:320,switchFunc:b.rollFunc,useArrow:!0,useDot:!0,switchMin:4E3,switchSpeed:300,itemView:$(".promo-largebox").find(".promo-item"),container:$(".promo-wrap")},(new b(e)).init(),f.call()):($(".promo-largebox .go-out-click").remove(),$(".repair").show(),$(".dot-list").hide())
)可是，为什么我在本地模仿着实现以后，页面上不显示轮播的图片呢？我查看网页源码的时候，那些图片确实是可以打开的？谢谢大家啦。请多多指教。解决方案1:不知你查看源代码可以打开是什么意思，你可以把你的代码放在jsfiddle上，这样别人才能看到问题。轮播图的实现归根到底连续放一长串图片，然后显示一张，隐藏掉其他，然后通过移动位置改变显示的图片。无论用CSS实现还是JS实现，还是加些什么效果，原理都类似。你用的这个例子都一样，你可以看看F12里，它banner随着图片切换改变的都只是margin-left，而且里面有三张照片，两张相同的，这就是最基础的轮播图实现方法。解决方案2:如果你只是想实现效果，可以直接用插件，很方便，有很多。要是学东西的话，还是得好好学js,原理懂了就很容易做了。你这个效果实现不了，可能是没引入js库，或代码不全。你可以打开浏览器的调试工具查看，这部分内容网上有许多教程。解决方案3:原理基本很简单的，加上现在CSS的transition过度效果，可以直接用原生js写出jquery.animate的动画效果；原理基本都是左右移动dom元素，操作css，进栈出栈实现隐藏与显示;自己写原生js的话兼容性很蛋疼，各种浏览器会烦死的，但是这必须面对的问题。我写过两个类似的图片切换效果，需要研究的话可以发你。
以上介绍了“(html)关于js实现图片轮播”的问题解答，希望对有需要的网友有所帮助。
本文网址链接：/itwd/1120994.html
上一篇： 下一篇：喜欢: 0 & 回复:
喜欢: 0 & 回复:
喜欢: 1 & 回复:
喜欢: 0 & 回复:
喜欢: 0 & 回复:
喜欢: 0 & 回复:
喜欢: 0 & 回复:
喜欢: 0 & 回复:
喜欢: 0 & 回复:
喜欢: 0 & 回复:
喜欢: 0 & 回复:
喜欢: 0 & 回复: