js簡單的圖片輪播

Ⅰ 簡單輪播圖的實現及原理講解（js）

三個div，最外層id為 parent 的大div內包含了 uls 和 buttons 兩個div，div uls 中包含了兩個列表 img_ul （圖片列表）, litCir_ul （小圓點列表），div buttons 里則包含了「左」， 「右」兩個按鈕。

之所用js添加小圓點，是因為小圓點的數量是由圖片張數決定的。

默認 li 的 class 為 quiet , 第一張默認為 active 。

首先先理解該輪播圖如何滾動，這里是通過控制 img_ul 的 left 值來控制顯示某張圖片， 為了實現「滾動」的效果，我們需要 逐漸 改變 img_ul 的 left 值，而不能直接使該值變化圖片寬度的倍數。這里我們定義一個動畫效果函數 Roll() 。

試想下面的情況，當圖片從最後一張切換到第一張時，這時就不能通過逐漸改變 img_ul 的 left 值來實現滾動的效果，於是 克隆第一張圖片至列表尾部，當滾動完最後一張圖片時，繼續滾動到克隆的第一張，然後將 img_ul 的 left 值置為0。

需要注意的是小圓點和圖片列表的 li 數目是不一樣的，當滾動到最後一個克隆項時，此時小圓點實際上在第一個位置。

開始自動滾動：
timer = setInterval(autoRun, gap);

給每個小圓點綁定了onmouseover事件，這個方法有個細節，會根據兩次小圓點的距離差調整速率為 rate*times ，使切換效果更自然（也就是說每次切換說花的時間基本一致，無論是第一張到第二張，還是第一張到最後一張）。

觸及區域，清除定時器，顯示按鈕。
離開區域，添加定時器，隱藏按鈕。

自動播放就是間隔一定時間不斷調用函數「下一張」的過程，所以這里的按鈕 right 下一張的實現就是上面的 autoRun 函數。

以上就是輪播圖各部分的實現原理，如果你有其他的方法，歡迎一起交流！
2019.3.30更新：
用requestAnimationFrame()實現一個輪播圖

Ⅱ 怎麼用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);
}
}

Ⅲ js如何製作圖片輪播

工具/材料

Sublime Text

• 01

  首先在Sublime Text下面准備一個html和5張圖片，圖片寬高為600px和400px，如下圖所示

• 02

  然後在HTML頁面中布局輪播圖的結構，如下圖所示，主要包括圖片區域，圓形按鈕，左右箭頭

• 03

  接下來需要給輪播圖頁面布局聲明一些樣式，請按照下圖所示的樣式代碼進行聲明

• 04

  最後就是實現輪播圖的JS腳本功能，如下圖所示，主要包括前進，後退，自動播放的功能

• 05

  最後運行頁面，你就會看到下圖所示的輪播圖效果，點擊圓圈或者左右箭頭可以切換輪播圖

Ⅳ js實現效果：循環輪播圖

跟普通的左右切換輪播圖類似，但是它看起來是首尾相連的。

首先來講一下我的思路：
我們要想無縫切換圖片，必須要在所有圖片的最後添加一張第一張圖片，因為要實現從最後一張切換到第一張時有過渡效果；
之後我們要讓你處在第一張時，向前向後切換都要進行 隱式切換 。

我們也可以將所有的輪播圖的圖片外面套一層div，並設置絕對定位，然後使用 父相子絕 ，來讓圖片可以相對父元素定位（父元素就是裝輪播圖的盒子）

之後，只要我們讓不該顯示的圖片定位到盒子范圍外的位置（父元素設置overflow:hidden;），在需要切換圖片時，我們就把當前圖片前後的圖片定位到對應位置，然後通過setInterval方法循環改變其位置實現輪播效果。之後更改當前圖片的索引即可。

Ⅳ JS製作輪播圖

輪播圖是每個網站中必不可少的元素，那麼如何用JS製作輪播圖呢？下面我就給大家分享一下。

工具/材料

Sublime Text

• 01

  首先需要在Sublime中創建HTML文檔，然後在文檔的body區域中加入如下圖所示的輪播圖內容

• 02

  然後我們需要在style標簽中給所添加的輪播圖內容聲明樣式，如下圖所示

• 03

  接下來我們就需要在script標簽中實現輪播圖的動畫腳本內容了，如下圖所示，注意script標簽的type類型一定要是javascript

• 04

  最後我們運行界面程序，你就會看到如下圖所示的輪播圖了，點擊左右的箭頭和中間的圓點都可以進行輪播圖的切換

Ⅵ JS實現圖片的輪播功能

<!--輪播開始-->
<divclass="slider">
<ulclass="slider-main">
<liclass="slider-panel"><imgsrc="../view/mis/app/handle/images/01.jpg"></li>
<liclass="slider-panel"><imgsrc="../view/mis/app/handle/images/02.jpg"></li>
<liclass="slider-panel"><imgsrc="../view/mis/app/handle/images/03.jpg"></li>
<liclass="slider-panel"><imgsrc="../view/mis/app/handle/images/04.jpg"></li>
</ul>

<divclass="slider-extra">
<ulclass="slider-nav">
<liclass="slider-item">1</li>
<liclass="slider-item">2</li>
<liclass="slider-item">3</li>
<liclass="slider-item">4</li>
</ul>

<divclass="slider-page">
<aclass="slider-pre"href="javascript:;;"><</a><a
class="slider-next"href="javascript:;;">></a>
</div>
</div>
<!--輪播結束-->


上面的我的頁面
這是css文件
.w_lr{width:100%;height:100%;}
.w_lr.left{width:50%;height:350px;float:left;}
.w_lr.right{width:49%;height:350px;float:right;}

a{
text-decoration:none;
}
ul{
list-style:outsidenonenone;
}
.slider,.slider-panelimg,.slider-extra{
width:330px;
height:280px;
}
.slider{
text-align:center;
margin:10pxauto;
position:relative;
}
.slider-panel,.slider-nav,.slider-pre,.slider-next{
position:absolute;
z-index:8;
}
.slider-panel{
position:absolute;
}
.slider-panelimg{
border:none;
}
.slider-extra{
position:relative;
}
.slider-nav{
margin-left:-51px;
position:absolute;
left:50%;
bottom:4px;
}
.slider-navli{
background:#3e3e3e;
border-radius:50%;
color:#fff;
cursor:pointer;
margin:02px;
overflow:hidden;
text-align:center;
display:inline-block;
height:18px;
line-height:18px;
width:18px;
}
.slider-nav.slider-item-selected{
background:blue;
}
.slider-pagea{
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-pagea:HOVER{
background:rgba(0,0,0,0.4);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
}
.slider-next{
left:100%;
margin-left:-28px;
}

Ⅶ 求一段簡單的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；那麼就可以實現兩張圖片同時隱藏顯示了；

Ⅸ 簡單的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</li>
</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>

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

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

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

Ⅹ js實現左右切換輪播圖思路

我們在 CSS 階段就已經接觸到輪播圖。通過輪播圖我們可以達到一些好玩的特效，但使用 CSS 做出來的輪播圖只有左右切換，漸變切換和簡單的點擊切換。局限性較大，觀看效果也不佳。但當我們接觸 js 之後，你就發現使用js來實現輪播圖後，在看CSS實現輪播的效果就是...。我想說啥你知道的。廢話不多說，咱們一起看看如何使用js來實現輪播效果。

（本文以陰陽師中「平安世界」模塊的輪播圖為例）

這個輪播圖，我們通過兩大模塊構成；左右點擊模塊和姓名點擊模塊。然後在兩者相關聯來達到最終的效果。

在使用js實現輪播圖的效果前，先使用HTML和CSS完善這一模塊的布局。

本輪播圖使用8張圖片。每次出現兩張。我們在使用HTML和CSS布局時可以先把第一組的兩張圖片放好位置。其他的放在兩邊隱藏起來。需要使用的時候在出現移動到中間。

左右點擊切換模塊：

我們通過對左右按鈕進行點擊監聽。在點擊後做出反應。左右點擊的思路一樣。我們先說一下右邊按鈕點擊事件。

當我們點擊右邊按鈕後，我們通過對點擊次數進行累計。此處我使用初始化常量然後累加最後通過判斷來達到循環效果

對每一張圖片進行編碼，以此來達到循環切換圖片的效果。在切換圖片時，我們可以使用排他思想。當點擊按鈕切換下一張圖片的時候，我們可以先遍歷所有的圖片，把所有的圖片移動到兩邊，然後將要移動的圖片移動到中央來達到切換效果

在移動的過程中的動畫和定時器設置的延遲可以自己添加一下。

左邊按鈕的原理和右邊一樣反操作即可。注意常量要使用一個。否則兩個按鈕都只能單方向運動，可能還會出現其他問題。

本次現講一下左右切換的思路。