js簡單圖片輪播圖_簡單的HTML+js圖片輪播

⑴ 簡單的HTML+js圖片輪播

h5代碼：

css代碼：

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>

(1)js簡單圖片輪播圖擴展閱讀：

輪播圖是網站介紹其主要產品或重要信息的一種方式。簡單的一點是，在網頁的某一部分，會依次呈現幾個帶有重要信息的圖片，這樣訪問者就可以快速了解網站想要表達的主要信息。各種新聞網站的頭版頭條也是以這種方式呈現的重要信息。

輪播圖的實現方式：例如：有5張輪播的圖片，每張圖片的寬度為1024px，高度為512px。那麼旋轉的窗口大小應該是一張圖片的大小，即1024×512，然後，將五張0px的圖片水平連接，形成一張5120px寬、512px高的圖片，最後，通過每次向左移動1024px，可以旋轉大的合成圖像。

⑵ 怎麼用js做一個簡單的輪播圖

obj1.onmouseover = function () {
clearInterval(time);
}
obj1.onmouseout = function () {
time = setInterval("turn();", 6000);
}
for (var num = 0; num < obj2.length; num++) {
obj2[num].onmouseover = function () {
turn(this.innerHTML);
clearInterval(time);
}
obj2[num].onmouseout = function () {
time = setInterval("turn();", 6000);
}
}

⑶ 簡單的HTML+js圖片輪播

h5代碼：

css代碼：

(3)js簡單圖片輪播圖擴展閱讀：

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

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

⑷ 求用js製作簡單的圖片輪播效果，三張圖片為佳

setInterval(showIMG,1000); //每1000ms執行一次showIMG函數，不明白再追問。
function showIMG(){
//todo 實現圖片切換部分
}

⑸ 求一段簡單的js圖片輪播代碼，剛學js，不要太復雜。謝謝！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="焦點圖" />
<meta name="description" content="焦點圖代碼" />
<title>焦點圖</title>

<script type="text/javascript" src="http://www.jinchuwenhua.com/templets/default/js/jquery.js"></script>
<script type="text/javascript" src="http://www.jinchuwenhua.com/templets/default/js/slide.js"></script>

</head>
<body>


<style>
.ck-slide ul { margin: 0; padding: 0; list-style-type: none;}
.ck-slide { position: relative; overflow: hidden;}
.ck-slide ul.ck-slide-wrapper { position: absolute; top: 0; left: 0; z-index: 1; margin: 0; padding: 0;}
.ck-slide ul.ck-slide-wrapper li { position: absolute;}
.ck-slide .ck-prev, .ck-slide .ck-next { position: absolute; top: 50%; z-index: 2; width: 35px; height: 70px; margin-top: -35px; border-radius: 3px; opacity: .15; background: red; text-indent: -9999px; background-repeat: no-repeat; transition: opacity .2s linear 0s;}
.ck-slide .ck-prev { left: 5px; background: url(templets/default/images/arrow-left.png) #000 50% no-repeat;}
.ck-slide .ck-next { right: 5px; background: url(templets/default/images/arrow-right.png) #000 50% no-repeat;}
.ck-slidebox { position: absolute; left: 50%; bottom: 0px; z-index: 30; hright:30px;width:100%}
.ck-slidebox ul { height: 30px; padding: 0 4px; background: rgba(0,0,0,0.5); text-align:center}
.ck-slidebox ul li { float: left; height: 30px; margin: 0px 4px;line-height:30px;color:#fff;display:none}
.ck-slidebox ul li em { display: block; width: 100%; height: 30px; cursor: pointer; font-size:14px}
.ck-slidebox ul li.current em {color:#fff }
.ck-slidebox ul li em:hover { }
.ck-slide { width: 600px; height: 400px; margin: 0 auto;}

.ck-slide ul.ck-slide-wrapper { height: 400px;}
.ck-slide-wrapper li {display:none}
.ck-slidebox ul li{display:none}
.current{display:block!important}
</style>
<div class="ck-slide">

<ul class="ck-slide-wrapper">
<li>

<a target="_blank" href="http://www.jinchuwenhua.com/a/xinwen/2015/1014/307.html" target="_blank"><img id="slide-img-1" src="http://www.jinchuwenhua.com/uploads/allimg/151014/1-151014114S60-L.jpg" class="slide" alt="國考明起報名招2.7萬人首次僅面向體制外招錄" style='width:600px'/></a>

</li>
<li>

<a target="_blank" href="http://www.jinchuwenhua.com//a/xinwen/2015/1014/289.html" target="_blank"><img id="slide-img-2" src="http://www.jinchuwenhua.com/uploads/151014/1-151014092105J3.jpg" class="slide" alt="中關村「變形記」：從電子賣場到7.2公里的創業大街" style='width:600px'/></a>

</li>
<li>

<a target="_blank" href="http://www.jinchuwenhua.com/a/xinwen/2015/1014/290.html" target="_blank"><img id="slide-img-3" src="http://www.jinchuwenhua.com/uploads/allimg/151014/1-151014092F30-L.jpg" class="slide" alt="金星大聊兩性話題辣評娛樂圈男星：沒我想睡的" style='width:600px'/></a>

</li>

</ul>

<a href="javascript:" class="ctrl-slide ck-prev">上一張</a> <a href="javascript:" class="ctrl-slide ck-next">下一張</a>

<div class="ck-slidebox">

<div class="slideWrap">

<ul class="dot-wrap">

<li><em>國考明起報名招2.7萬人首次僅面向體制外招錄</em></li>
<li><em>中關村「變形記」：從電子賣場到7.2公里的創業大街</em></li>
<li><em>金星大聊兩性話題辣評娛樂圈男星：沒我想睡的</em></li>

</ul>

</div>

</div>

</div>



<script>

$('.ck-slide').ckSlide({

autoPlay: true
});

</script>

</body>
</html>

⑹ JS簡單的輪播圖，像圖片這種怎麼做

如果你想要上下同時切換的方法也很簡單，只要你定ID的時候有點規律就好了，例如img1和imgs1，function asd(target){
document.getElementById("img"+target).style.display="none";
document.getElementById("imgs"+target).style.display="none";
}
那麼只要target傳入圖片序號如：1；那麼就可以實現兩張圖片同時隱藏顯示了；

⑺ 跪求類似圖里這樣的圖片輪播代碼，最好是沒有js的純HTML的，越簡單的越好

像這種情況,一般情況下都會用到JS的,純HTML的目前至少以我的能力沒有辦法寫出來!

⑻ 求一個簡單的js實現輪播代碼

<!DOCTYPEHTML>
<html>
<head>
<title>JS無縫滾動圖片</title>
<metacharset=UTF-8/>
<styletype="text/css">
*{
	margin:0;
	padding:0;
}
#div2{
	margin:auto;
	width:602px;
	overflow:hidden;
	left:200px;
}
#div1{
	position:relative;
	left:0px;
	width:1200px;
}
#div1li{
	list-style-type:none;
	float:left;
	width:200px;
	height:180px;
}
img{
	width:200px;
	height:180px;
}
ul#ul1{
	position:relative;
}
</style>
<scripttype="text/javascript">
	window.onload=function()
{
	varoUl=document.getElementById('ul1');
	vart,o;
	varspeed=0;
	varfunny=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>
	<divid="div2">
		<divid="div1">
			<ulid="ul1">
				<li><imgsrc="../../images/choose.png">
				</li>
				<li><imgsrc="../../images/deck.png">
				</li>
				<li><imgsrc="../../images/el.png">
				</li>
				<li><imgsrc="../../images/list.png">
				</li>
			</ul>
		</div>
	</div>
</body>
</html>

⑼ javascript麻煩幫我看下哪裡錯了我想做一個簡單的圖片輪換效果！

試試這個圖片輪換效果

功能比你的強大很多

有12345數字一起切換

滑鼠點一下數字會變換到另一張圖片，不點就會自動換

裡面有教程和源碼

⑽ JS圖片輪播的原理。。。

導航:首頁 > 好看圖片 > js簡單圖片輪播圖

js簡單圖片輪播圖

與js簡單圖片輪播圖相關的資料