js實(shí)現(xiàn)炫酷的左右輪播圖
更新時(shí)間：2017年01月18日 10:58:55 作者：秋天1014童話
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)左右輪播圖的具體代碼，具有一定的參考價(jià)值，感興趣的朋友可以參考一下
本文實(shí)例為大家分享了js左右輪播圖的具體代碼，供大家參考，具體內(nèi)容如下
html代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta keyword="左右輪播圖-效果比較好"> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/css.css"> <script type="text/javascript" src="js/animate.js"></script> <script type="text/javascript" src="js/slider.js"></script> </head> <body> <div class="w-slider" id="js_slider"> <div class="slider"> <div class="slider-main" id="slider_main"> <div class="slider-main-img"><a href="#"><img src="images/1.jpg" alt=""></a></div> <div class="slider-main-img"><a href="#"><img src="images/2.jpg" alt=""></a></div> <div class="slider-main-img"><a href="#"><img src="images/3.jpg" alt=""></a></div> <div class="slider-main-img"><a href="#"><img src="images/4.jpg" alt=""></a></div> <div class="slider-main-img"><a href="#"><img src="images/5.jpg" alt=""></a></div> <div class="slider-main-img"><a href="#"><img src="images/6.jpg" alt=""></a></div> </div> </div> <div class="slider-ctrl" id="slider_ctrl"> <span class="slider-ctrl-prev"></span> <!-- <span class="slider-ctrl-con current"></span> <span class="slider-ctrl-con"></span> <span class="slider-ctrl-con"></span> <span class="slider-ctrl-con"></span> <span class="slider-ctrl-con"></span> <span class="slider-ctrl-con"></span> --> <span class="slider-ctrl-next"></span> </div> </div> <script> </script> </body> </html>
主要css代碼：
.w-slider{
width: 310px;
height: 265px;
background-color: pink;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.slider{
width: 310px;
height: 220px;
}
.slider-main{
width: 620px; /* 兩個(gè)圖片的寬度 */
height: 310px;
}
.slider-main img{
vertical-align: top; /* 消除圖片上下3px的間隙 */
}
.slider-main-img{
position: absolute;
top: 0;
left: 0;
}
.slider-ctrl{
text-align:center;
padding-top: 8px;
}
.slider-ctrl-con{
display: inline-block;
width: 24px;
height: 20px;
background-color: blue;
margin: 0 5px;
background: url(../images/icon.png) no-repeat -24px -782px;
cursor: pointer;
text-indent: -20em; /* 為了將span的標(biāo)號(hào)隱藏掉 */
overflow: hidden;
}
.slider-ctrl .current{
background-position: -24px -762px;
}
.slider-ctrl-prev,.slider-ctrl-next{
position: absolute;
top: 50%;
margin-top: -35px;
display: inline-block;
width: 30px;
height: 35px;
background: url(../images/icon.png) no-repeat 6px top;
opacity: 0.8;
cursor: pointer;
}
.slider-ctrl-prev{
left: 0;
}
.slider-ctrl-next{
right: 0;
background-position: -6px -44px;
}
主要js代碼（slider.js）：
window.onload = function(){
function $(id){ return document.getElementById(id);}
var js_slider = $("js_slider");
var slider_main = $("slider_main"); //獲取輪播圖片的父盒子
var imgs = slider_main.children; //得到圖片組
var slider_ctrl = $("slider_ctrl"); //獲取控制的 父盒子
//生成控制輪播的span
for(var i = 0; i< imgs.length; i++){
var span = document.createElement("span");
span.className = "slider-ctrl-con";
span.innerHTML = imgs.length - i;
slider_ctrl.insertBefore(span,slider_ctrl.children[1]);
}
var spans = slider_ctrl.children;
spans[1].setAttribute("class","slider-ctrl-con current"); //設(shè)置第一個(gè)span增加current樣式
//布局圖片，第一張?jiān)谡_位置，其余的在右邊
var scrollWidth = js_slider.clientWidth; //獲取大盒子的寬度，也就是后面動(dòng)畫走的距離
for(var i=1; i<imgs.length; i++){ //第一張圖片在正確位置
imgs[i].style.left = scrollWidth + "px"; //其余圖片在310px的位置
}
//遍歷三個(gè)按鈕--左、右和下面的span
var iNow = 0; //設(shè)置當(dāng)前顯示的圖片的索引號(hào)
for(var k in spans){ //k是索引號(hào)
spans[k].onclick = function(){
if(this.className == "slider-ctrl-prev"){
//當(dāng)前圖片右移（從0 -> 310px）
animate(imgs[iNow],{left: scrollWidth});
iNow = --iNow < 0 ? imgs.length-1 : iNow;
imgs[iNow].style.left = -scrollWidth + "px";//快速執(zhí)行，即將顯示的一頁立馬走到左邊，然后顯示
animate(imgs[iNow],{left:0}); //下一張圖片右移，從-310px->0
setSquare();
}else if(this.className == "slider-ctrl-next"){
//當(dāng)前圖片左移（從0 -> -310px）
animate(imgs[iNow],{left: -scrollWidth});
iNow = (++iNow) % imgs.length;
imgs[iNow].style.left = scrollWidth + "px";//快速執(zhí)行，即將顯示的一頁立馬走到右邊，然后左移顯示
animate(imgs[iNow],{left:0}); //下一張圖片左移，從310px->0
setSquare();
//或者精簡(jiǎn)為函數(shù)
/*autoPlay();*/
}else{
/*alert("點(diǎn)擊了下面的span");*/
var clickIndex = this.innerHTML - 1;
if(clickIndex > iNow){
//做法等同于右側(cè)按鈕
animate(imgs[iNow],{left: -scrollWidth});
imgs[clickIndex].style.left = scrollWidth + "px";//快速執(zhí)行，即將顯示的一頁立馬走到右邊，然后左移顯示
}else if(clickIndex < iNow){
//做法等同于左側(cè)
animate(imgs[iNow],{left: scrollWidth});
imgs[clickIndex].style.left = -scrollWidth + "px";//快速執(zhí)行，即將顯示的一頁立馬走到左邊，然后顯示
}
iNow = clickIndex;
animate(imgs[iNow],{left:0});
setSquare();
}
}
}
//控制span小方塊的樣式 函數(shù)
function setSquare(){
//下面的span樣式清空，將iNow設(shè)置為current，注意是下面的span，不包含左右控制按鈕
for(var i=1; i<spans.length-1; i++){
spans[i].className = "slider-ctrl-con";
}
spans[iNow+1].className = "slider-ctrl-con current"; //注意iNow是索引號(hào)，要加1
}
//設(shè)置定時(shí)器 ，和右側(cè)按鈕功能一致
var timer =null;
timer = setInterval(autoPlay,2000);
function autoPlay(){
animate(imgs[iNow],{left: -scrollWidth});
iNow = (++iNow) % imgs.length;
imgs[iNow].style.left = scrollWidth + "px";//快速執(zhí)行，即將顯示的一頁立馬走到右邊，然后左移顯示
animate(imgs[iNow],{left:0}); //下一張圖片左移，從310px->0
setSquare();
}
//清除定時(shí)器
js_slider.onmouseover = function(){
clearInterval(timer);
}
//開啟定時(shí)器
js_slider.onmouseout = function(){
clearInterval(timer); //要執(zhí)行定時(shí)器，先清除定時(shí)器
timer = setInterval(autoPlay,2000);
}
}
緩動(dòng)動(dòng)畫js代碼：（animate.js）
//返回當(dāng)前樣式
function getStyle(obj,attr){ //obj對(duì)象，attr屬性名
if(obj.currentStyle){ //ie等
return obj.currentStyle[attr];
}else{ //w3c
return window.getComputedStyle(obj,null)[attr];
}
}
function animate(obj,json,fn) { // 給誰 json
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var flag = true; // 用來判斷是否停止定時(shí)器 一定寫到遍歷的外面
for(var attr in json){ // attr 屬性 json[attr] 值
//開始遍歷 json
// 計(jì)算步長(zhǎng) 用 target 位置 減去當(dāng)前的位置 除以 10
// console.log(attr);
var current = 0;
if(attr == "opacity")
{
current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0; //用戶沒有定義opacity，則返回undefined
console.log(current);
}
else
{
current = parseInt(getStyle(obj,attr)); // 數(shù)值，去除樣式的 “px”
}
// console.log(current);
// 目標(biāo)位置就是 屬性值
var step = ( json[attr] - current) / 10; // 步長(zhǎng) 用目標(biāo)位置 - 現(xiàn)在的位置 / 10
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//判斷透明度
if(attr == "opacity") // 判斷用戶有沒有輸入 opacity
{
if("opacity" in obj.style) // 判斷 我們?yōu)g覽器是否支持opacity
{
// obj.style.opacity，//支持opacity-----opacity:0.3
obj.style.opacity = (current + step) /100;
}
else
{ // obj.style.filter = alpha(opacity = 30)
obj.style.filter = "alpha(opacity = "+(current + step)* 10+")";
}
}
else if(attr == "zIndex")
{
obj.style.zIndex = json[attr];
}
else
{
obj.style[attr] = current + step + "px" ;
}
if(current != json[attr]) // 只要其中一個(gè)不滿足條件 就不應(yīng)該停止定時(shí)器 這句一定遍歷里面
{
flag = false;
}
}
if(flag) // 用于判斷定時(shí)器的條件
{
clearInterval(obj.timer);
//alert("ok了");
if(fn) // 很簡(jiǎn)單 當(dāng)定時(shí)器停止了。 動(dòng)畫就結(jié)束了 如果有回調(diào)，就應(yīng)該執(zhí)行回調(diào)
{
fn(); // 函數(shù)名 + （） 調(diào)用函數(shù) 執(zhí)行函數(shù) 暫且這樣替代
}
}
},30)
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
fw.qq.com/ipaddress已失效 javascript獲得客戶端IP的新方法
一直以來，我都是通過http://fw.qq.com/ipaddress來獲得客戶端用戶的IP，這個(gè)方法簡(jiǎn)單、快速、實(shí)用2012-01-01
如果你不能向一個(gè)六歲的孩子解釋清楚，那么其實(shí)你自己根本就沒弄懂。好吧，我試著向一個(gè)27歲的朋友就是JS閉包(JavaScript closure)卻徹底失敗了2011-10-10
taro 實(shí)現(xiàn)購物車邏輯的實(shí)例代碼
這篇文章主要介紹了taro 實(shí)現(xiàn)購物車邏輯，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
JavaScript的setAttribute兼容性問題解決方法
JavaScript的setAttribute存在兼容性問題，下面與大家分享下具體的解決方法，感興趣的朋友可以參考下2013-11-11
Javascript是一門基于對(duì)象的動(dòng)態(tài)語言，也就是說，所有東西都是對(duì)象，一個(gè)很典型的例子就是函數(shù)也被視為普通的對(duì)象。Javascript可以通過一定的設(shè)計(jì)模式來實(shí)現(xiàn)面向?qū)ο蟮木幊?，其中this指針就是實(shí)現(xiàn)面向?qū)ο蟮囊粋€(gè)很重要的特性。2015-07-07
微信小程序?qū)崿F(xiàn)簡(jiǎn)單的select下拉框
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單的select下拉框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要為大家詳細(xì)介紹了JavaScript中雙向數(shù)據(jù)綁定，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
js實(shí)現(xiàn)按Ctrl+Enter發(fā)送效果
按Ctrl+Enter發(fā)送，思路是監(jiān)聽textarea的onkeydown事件，當(dāng)ctrl鍵被按下，并且，keycode為13（回車），時(shí)，調(diào)用發(fā)送表單的函數(shù)2014-09-09
這篇文章主要為大家詳細(xì)介紹了使用RequireJS簡(jiǎn)易繪圖程序開發(fā),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
基于javascript html5實(shí)現(xiàn)多文件上傳
這篇文章主要為大家詳細(xì)介紹了基于javascript html5實(shí)現(xiàn)多文件上傳的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-03-03