js怎麼寫圖片輪播_js中怎樣用取模實現圖片輪播

『壹』簡單的HTML+js圖片輪播

h5代碼：

css代碼：

(1)js怎麼寫圖片輪播擴展閱讀：

輪播圖就是一種網站在介紹自己的主打產品或重要信息的傳播方式。說的簡單點就是將承載著重要信息的幾張圖片，在網頁的某一部位進行輪流的呈現，從而做到讓瀏覽者很快的了解到網站想要表達的主要信息。以及各種新聞網站的頭版頭條都是用這種方式呈現的重要信息。

輪播圖的實現方式：例如：有5張輪播的圖片，每張圖片的寬度為1024px、高度為512px.那麼輪播的窗口大小就應該為一張圖片的尺寸，即為：1024×512。之後將這5張圖片0px水平相接組成一張寬度為：5120px,高度依然為：512px。最後將這張合成後的大圖每次向左移動1024px即可實現輪播圖。

『貳』 Js圖片輪播思路

<ahref="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秒執行一次
做到這里我們已經能過使圖片進行切換了。

『叄』 js裡面可以寫輪播圖嗎

當然可以，css3就可以寫輪播，只不過js寫的輪播圖兼容性更好，使用順暢。

js實現輪播圖主要是搞懂原理，還有js知識就OK啦

圖片切換是index值切換
換下一張按鈕實現功能
到最後一張回到第一張
第一張往上翻回到最後一張
寫效果就OK啦

『肆』 js中無縫滾動輪播圖有多少種做法

還有就是用原生js模仿jQuery寫一個動畫函數，最簡單版的就是：
var timer = null;
function ani(ele,target) {
clearInterval(ele.timer);
ele.timer = setInterval(function() {
var step = (target - ele.offsetLeft)/10;
step = step>0?Math.ceil(step):Math.floor(step);
ele.style.left = ele.offsetLeft + step + "px";
console.log(1);
if (Math.abs(target - ele.offsetLeft) <= Math.abs(step)) {
ele.style.left = target + "px";
clearInterval(ele.timer);
}
},30);
}
利用動畫實現圖片位置的移動，也是放一個圖片到前面。
第二個就是還是放一張圖到前面，然後把帶圖片的li定位；用一個arr[{left:0},{left:"200px"},{left:"400px"},{left:"600px"}];這樣的數組把值分別賦給li；要滾動的時候把arr的最後一項放到最前面，再依次賦值給li，加上過渡就是輪播了，當然直接跳的那一下把過渡關了才是無縫輪播。

『伍』 js怎麼能讓圖片輪播

下載一個插件吧，網上多的很，你看不懂只用懂一點介面就可以了，自己寫你熟悉js的話一個上午也不一定寫出來，還漏洞百出

『陸』 js輪播圖

<style>
*{margin:0;padding:0;list-style:none;}
#box{width:840px;border:1pxsolid#000;height:210px;margin:30pxauto;position:relative;overflow:hidden;}
#boxul{position:absolute;left:0;top:0;}
#boxulli{width:200px;height:200px;float:left;padding:5px;}
</style>
<script>
window.onload=function(){
	varoBox=document.getElementById('box');
	varoUl=oBox.children[0];
	varaLi=oUl.children;
	
	//復制一份內容
	oUl.innerHTML+=oUl.innerHTML;
	oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';
	
	varW=oUl.offsetWidth/2;
	
	varleft=0;
	setInterval(function(){
		left+=10;
		oUl.style.left=(left%W-W)%W+'px';
	},30);
};
</script>
</head>
<body>
<divid="box">
	<ul>
	<li><imgsrc="img/1.jpg"width="200"></li>
<li><imgsrc="img/2.jpg"width="200"></li>
<li><imgsrc="img/3.jpg"width="200"></li>
<li><imgsrc="img/4.jpg"width="200"></li>

</ul>
</div>

『柒』 JS圖片滾動輪播的問題

<!DOCTYPE HTML> <html> <head> <title>JS無縫滾動圖片</title> <meta charset=UTF-8 /> <style type="text/css"> * { margin: 0; padding: 0; } #div2 { margin: auto; width: 602px; overflow: hidden; left: 200px; } #div1 { position: relative; left: 0px; width: 1200px; } #div1 li { list-style-type: none; float: left; width: 200px; height: 180px; } img { width: 200px; height: 180px; } ul#ul1 { position: relative; } </style> <script type="text/javascript"> window.onload = function () { var oUl = document.getElementById ('ul1'); var t,o; var speed = 0; var funny = function () { t && clearInterval(t); t = setInterval (function () { speed -= 200/11; if(speed<-200){ speed=0; oUl.appendChild (oUl.children[0]); t && clearInterval(t); t = null; o && clearTimeout(o); o=setTimeout(funny,1000); } oUl.style.left = speed + "px"; }, 60); } funny (); } </script> </head> <body> <div id="div2"> <div id="div1"> <ul id="ul1"> <li><img src="../../images/choose.png"> </li> <li><img src="../../images/deck.png"> </li> <li><img src="../../images/el.png"> </li> <li><img src="../../images/list.png"> </li> </ul> </div> </div> </body> </html>

『捌』 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 slide
var go = function () {
stop();
_intervalID = window.setInterval(function () {
slide();
},
defaultOpts.interval);
}; //endof go
var 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>
<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怎麼寫圖片輪播

js怎麼寫圖片輪播

與js怎麼寫圖片輪播相關的資料