Js图片轮播思路

Js图片轮播思路

<a href=”http://liping.site”>js图片轮播效果代码</a>
首先我们需要引入一张图片，通过更改img标签中src的值，达到图片切换功能。html代码：<img src=”http://liping.site/1.jpg” width=”331″ height=”220″ id=”carousel”>在这我们需要理理自己的思路，一、图片从何而来 二、怎么样使图片轮播，能够动起来自定义一个数组，将需要的图片存在中间，代码如下：var arr=new Array();
arr[0]=’1.jpg’;
arr[1]=’2.jpg’;
arr[2]=’3.jpg’;
arr[3]=’4.jpg’;接着我们需要能够对图片进行操作定义一个函数，function tImg(){var obj=document.getElementById(‘carousel’);obj.src=”+arr[carIndex];}
准备好以后我们只需要获取数组的下标即可定义初始化下标：var carIndex=0;在函数中如果carIndex变量等于数组的字符串长度-1的情况下，赋给carIndex=0的初始数值。

不是的情况下carIndex就+或者=1，代码如下：
function tImg(){
var obj=document.getElementById(‘carousel’);
if(carIndex==arr.length-1){
carIndex=0;}
else{
carIndex+=1;}
obj.src=”+arr[carIndex];obj.onmouseover=function(){
}
逻辑关系理清楚后我们下一步就是使他们动起来，我们需要引入setInterval来控制函数的时间，代码如下：var time=setInterval(tImg,3000);函数3秒执行一次做到这里我们已经能过使图片进行切换了。

求详细讲解javascript轮播图代码！

&lt

简单的HTML+js图片轮播?

h5代码：
<div id=“wrap”><ul id=“list”><li>10</li><li>9</li><li>8</li><li>7</li><li>6</li><li>5</li><li>4</li><li>3</li><li>2</li><li>1</ul></div>

css代码：
<style type=”text/css”>@-webkit-keyframes move{0%{left:-500px;}100%{left:0;}}#wrap{width:600px;height:130px;border:1px solid #000;position:relative;margin:100px auto;overflow:
hidden;}#list{position:absolute;left:0;top:0;padding:0;margin:0;-webkit-animation:5s move infinite linear;width:200%;}#list li{list-style:none;width:120px;height:130px;border:1px solid red;background: pink;color:#fff;text-align: center;float:left;font:normal 50px/2.5em ‘微软雅黑’;}#wrap:hover #list{-webkit-animation-play-state:paused;}</style>
扩展资料：
轮播图是网站介绍其主要产品或重要信息的一种方式。简单的一点是，在网页的某一部分，会依次呈现几个带有重要信息的图片，这样访问者就可以快速了解网站想要表达的主要信息。

各种新闻网站的头版头条也是以这种方式呈现的重要信息。

轮播图的实现方式：例如：有5张轮播的图片，每张图片的宽度为1024px，高度为512px。那么旋转的窗口大小应该是一张图片的大小，即1024×512，然后，将五张0px的图片水平连接，形成一张5120px宽、512px高的图片，最后，通过每次向左移动1024px，可以旋转大的合成图像。

js代码实现banner图片轮播

这是我以前写过的一个，样式你改一下就OK了<div class=”fbanner widget3924″> <div id=”i_focus”> <div id=”i_focus_pic”> <ul id=”i_focus_piclist”> <li style=”display: none;”> <a href=”” target=”_blank” style=”background: url(/templates/runlinjinguan/images/banner1.jpg) center 0 no-repeat;”> </a> </li> <li style=”display: list-item;”> <a href=”” target=”_blank” style=”background: url(/templates/runlinjinguan/images/banner4.jpg) center 0 no-repeat;”> </a> </li> <li style=”display: none;”> <a href=”” target=”_blank” style=”background: url(/templates/runlinjinguan/images/banner3.jpg) center 0 no-repeat;”> </a> </li> <li style=”display: none;”> <a href=”” target=”_blank” style=”background: url(/templates/runlinjinguan/images/banner2.jpg) center 0 no-repeat;”> </a> </li> </ul> <div id=”i_focus_opdiv”> </div> <ul id=”i_focus_btn”> <li id=”p0″ class=””> <span> </span> </li> <li id=”p0″ class=”i_cur”> <span> </span> </li> <li id=”p0″ class=””> <span> </span> </li> <li id=”p0″ class=””> <span> </span> </li> </ul> </div> </div> <script type=”text/javascript” src=”/templates/runlinjinguan/js/flash.js”></script> <script type=”text/javascript”> $(“#i_focus_btn”).find(“li”).eq(0).addClass(“i_cur”); </script> </div>引用的js文件// JavaScript Document //flash js$(document).ready(function () { var i_curIndex = 0; var beauBeauSlide; //函数对象 var i_curID = 0; //取得鼠标下方的对象ID var pictureID = 0; //索引ID $(“#i_focus_piclist li”).eq(0).show(); //默认 autoScroll(); $(“#i_focus_btn li”).hover(function (e) { StopScrolll(); $(“#i_focus_btn li”).removeClass(“i_cur”) //所有的li去掉当前的样式加上正常的样式 $(this).addClass(“i_cur”); //而本身则加上当前的样式去掉正常的样式 i_curID = $(this).attr(“id”); //取当前元素的ID pictureID = $(“#i_focus_btn li”).index(this);// i_curID.substring(i_curID.length – 1); //取最后一个字符 $(“#i_focus_piclist li”).eq(pictureID).fadeIn(“slow”); //本身显示 $(“#i_focus_piclist li”).not($(“#i_focus_piclist li”)[pictureID]).hide(); //除了自身别的全部隐藏 $(“#i_focus_tx li”).hide(); $(“#i_focus_tx li”).eq(pictureID).show(); }, function () { //当鼠标离开对象的时候获得当前的对象的ID以便能在启动自动时与其同步 i_curID = $(this).attr(“id”); //取当前元素的ID pictureID = i_curID.substring(i_curID.length – 1); //取最后一个字符 i_curIndex = pictureID; autoScroll(); }); //自动滚动 function autoScroll() { var myNubli = $(“#i_focus_btn li”).size(); if (myNubli > 1) { $(“#i_focus_btn li:last”).removeClass(“i_cur”); $(“#i_focus_tx li:last”).hide(); $(“#i_focus_btn li”).eq(i_curIndex).addClass(“i_cur”); $(“#i_focus_btn li”).eq(i_curIndex – 1).removeClass(“i_cur”); $(“#i_focus_tx li”).eq(i_curIndex).show(); $(“#i_focus_tx li”).eq(i_curIndex – 1).hide(); $(“#i_focus_piclist li”).eq(i_curIndex).fadeIn(“slow”); $(“#i_focus_piclist li”).eq(i_curIndex – 1).hide(); i_curIndex++; i_curIndex = i_curIndex >= myNubli ? 0 : i_curIndex; beauBeauSlide = setTimeout(autoScroll, 5000); } } function StopScrolll() //当鼠标移动到对象上面的时候停止自动滚动 { clearTimeout(beauBeauSlide); }});//第二个渐隐幻灯开始var defaultOpts = { interval: 3000, fadeInTime: 800, fadeOutTime: 500};var _titles = $(“ul.slide-txt li”);var _titles_bg = $(“ul.op li”);var _bodies = $(“ul.slide-pic li”);var _count = _titles.length;var _current = 0;var _intervalID = null;var stop = function () { window.clearInterval(_intervalID);};var slide = function (opts) { if (opts) { _current = opts.current || 0; } else { _current = (_current >= (_count – 1)) ? 0 : (++_current); }; _bodies.filter(“:visible”).fadeOut(defaultOpts.fadeOutTime, function () { _bodies.eq(_current).fadeIn(defaultOpts.fadeInTime); _bodies.removeClass(“cur”).eq(_current).addClass(“cur”); }); _titles.removeClass(“cur”).eq(_current).addClass(“cur”); _titles_bg.removeClass(“cur”).eq(_current).addClass(“cur”);}; //endof slidevar go = function () { stop(); _intervalID = window.setInterval(function () { slide(); }, defaultOpts.interval);}; //endof govar itemMouseOver = function (target, items) { stop(); var i = $.inArray(target, items); slide({ current: i });}; //endof itemMouseOver_titles.hover(function () { if ($(this).attr(‘class’) != ‘cur’) { itemMouseOver(this, _titles); } else { stop(); }},go);//_titles_bg.hover(function() { itemMouseOver(this, _titles_bg); }, go);_bodies.hover(stop, go);go();var slideX = { _this: $(‘.catalog .imgbox’), _btnLeft: $(‘.catalog .left’), _btnRight: $(‘.catalog .right’), init: function () { slideX._btnLeft.click(slideX.slideLeft); slideX._btnRight.click(slideX.slideRight); }, slideLeft: function () { slideX._btnLeft.unbind(‘click’, slideX.slideLeft); for (i = 0; i < 2; i++) { slideX._this.find(‘li:last’).prependTo(slideX._this); } slideX._this.css(‘marginLeft’, -224); slideX._this.animate({ ‘marginLeft’: 0 }, 500, function () { slideX._btnLeft.bind(‘click’, slideX.slideLeft); }); return false; }, slideRight: function () { slideX._btnRight.unbind(‘click’, slideX.slideRight); slideX._this.animate({ ‘marginLeft’: -224 }, 500, function () { slideX._this.css(‘marginLeft’, ‘0’); for (i = 0; i < 2; i++) { slideX._this.find(‘li:first’).appendTo(slideX._this) } slideX._btnRight.bind(‘click’, slideX.slideRight); }); return false; }}$(document).ready(function () { slideX.init();})$(document).ready(function () { var newTime = new Date(); var newTime = newTime.getTime(); var $imgTmp = $(‘#topromotion’).find(‘img:first’); var osrc = $imgTmp.attr(‘src’); $imgTmp.attr(‘src’, osrc + ‘?’ + newTime);});希望对你有帮助！

js原生代码实现轮播图

<!DOCTYPE html><html lang=”en”><head> <meta charset=”UTF-8″> <title>最简单的轮播广告</title> <style> body, div, ul, li { margin: 0; padding: 0; } ul { list-style-type: none; } body { background: #000; text-align: center; font: 12px/20px Arial; } #box { position: relative; width: 492px; height: 172px; background: #fff; border-radius: 5px; border: 8px solid #fff; margin: 10px auto; } #box .list { position: relative; width: 490px; height: 170px; overflow: hidden; border: 1px solid #ccc; } #box .list li { position: absolute; top: 0; left: 0; width: 490px; height: 170px; opacity: 0; transition: opacity 0.5s linear } #box .list li.current { opacity: 1; } #box .count { position: absolute; right: 0; bottom: 5px; } #box .count li { color: #fff; float: left; width: 20px; height: 20px; cursor: pointer; margin-right: 5px; overflow: hidden; background: #F90; opacity: 0.7; border-radius: 20px; } #box .count li.current { color: #fff; opacity: 0.7; font-weight: 700; background: #f60 } </style></head><body><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> <ul class=”count”> <li class=”current”>1</li> <li class=””>2</li> <li class=””>3</li> <li class=””>4</li> <li class=””>5</li> </ul></div><script> 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; //中间量，统一声明； var play=null; console.log(box,uls,imgs,btn);//获取正确 //图片切换, 淡入淡出效果我是用（transition: opacity 0.8s linear）做的,不纠结、简单 在css里面 function show(a){ //方法定义的是当传入一个下标时，按钮和图片做出对的反应 for(i=0;i<btn.length;i++ ){ btn[i].className=”; //很容易看懂吧？每个按钮都先设置成看不见，然后把当前按钮设置成可见。 btn[a].className=’current’; } for(i=0;i<imgs.length;i++){ //把图片的效果设置和按钮相同 imgs[i].style.opacity=0; imgs[a].style.opacity=1; } } //切换按钮功能，响应对应图片 for(i=0;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=0);//可能有优先级问题，所以用了括号，没时间测试了。

show(index); },1000) } autoPlay();//马上调用，我试过用window.onload调用这个方法，但是调用之后影响到了其他方法，使用autoPlay所以只能这样调用了 //div的鼠标移入移出事件 box.onmouseover=function(){ clearInterval(play); }; box.onmouseout=function(){ autoPlay(); }; //按钮下标也要加上相同的鼠标事件，不然图片停止了，定时器没停，会突然闪到很大的数字上。 貌似我可以直接追加到之前定义事件中。