原生js實現圖片左右滾動代碼（js圖片循環滾動代碼）

本文目錄一覽：

• 1、JS如何實現左右滾動輪播代碼詳細點
• 2、js實現圖片左右滾動
• 3、js實現圖片滾動效果
• 4、JS如何實現圖片滑動？
• 5、js圖片左右滾動 怎麼弄 有沒案例代碼 求幫忙

JS如何實現左右滾動輪播代碼詳細點

var datas = [

{imgSrc:”（圖片 ）”},

{imgSrc:”（圖片 ）”},

{imgSrc:”（圖片 ）”},

{imgSrc:”（圖片 ）”},

{imgSrc:”（圖片 ）”},

{imgSrc:”（圖片 ）”}

];

var banner = document.getElementById(“banner”);

var list = document.getElementById(“list”);

for(var i = 0,len = datas.length;ilen;i++){

var div = document.createElement(“div”);

var li = document.createElement(“li”);

if(i==0){ //默認第一項輪播項顯示 對應的控制按鈕被選中

div.className = “item active”;

li.className = “active”;

}else{ //其他項隱藏 其他的控制按鈕樣式不改變

div.className = “item”;

li.className = “”;

}

div.innerHTML = ‘a href=”‘ + datas[i].targetSrc + ‘”‘ +

‘img src=”‘ + datas[i].imgSrc + ‘” /’ +

‘/a’;

li.innerHTML = i + 1;

banner.appendChild(div);

list.appendChild(li);

}

var lunBo = document.getElementById(“lunBo”);

var items = document.querySelectorAll(“#lunBo #banner .item”);

var lis = document.querySelectorAll(“#lunBo #list li”);

var currentIndex = 0;//(控制按鈕和輪播項共同的索引)

for(var i = 0,len = lis.length;ilen;i++){

lis[i].index = i;

lis[i].onmouseenter = function(){

currentIndex = this.index;

for(var j = 0;jlen;j++){

lis[j].className = “”;

items[j].className = “item”;

}

this.className = “active”;

items[this.index].className = “item active”;

}

}

var termId; //全局變數

function autoPlay(){

termId = setInterval(function(){

currentIndex++;

if(currentIndex==lis.length){

currentIndex = 0;

}

lis[currentIndex].onmouseenter();

},3000);

}

autoPlay();//打開頁面自動輪播

//滑鼠進入停止輪播

lunBo.onmouseenter = function(){

clearInterval(termId);

}

//滑鼠離開繼續輪播

lunBo.onmouseleave = function(){

autoPlay();

}

我這還有其他的，先採納一下加我，我給你發

js實現圖片左右滾動

代碼：

    title/title

    style

        body{

            margin:0;

            padding:0;

            background-color:transparent;

        }

        div{

            width:350px;

            overflow:hidden;

        }

        table img{

            width:100px;

            height:100px;

        }

    /style

/head

body

    div id=”picScroll”

        table

            tr

                tdaimg src=”../pic/1.jpg” //a/td

                tdaimg src=”../pic/2.jpg”/a/td

                tdaimg src=”../pic/3.jpg”/a/td

                tdaimg src=”../pic/4.jpg”/a/td

                tdaimg src=”../pic/5.jpg”/a/td

            /tr

        /table

    /div

/body

/html

script

    var target = $(‘#picScroll’);

    var left = 0;

    var speed = 30;

    function Marqeen() {

        if (target[0].offsetWidth = left) {

            left -= target[0].offsetWidth;

        }

        else {

            left++;

        }

        target.scrollLeft(left);

    }

    $(function () {

        var marQueen = window.setInterval(Marqeen, speed);

        target.mouseover(function () {

            clearInterval(marQueen);

        });

        target.mouseout(function () {

            marQueen = window.setInterval(Marqeen, speed);

        });

    });

/script

js實現圖片滾動效果

SCRIPT language=”JavaScript”

var speed=50; //設置滾動速度

demo2.innerHTML=demo1.innerHTML //複製dome1為dome2

function Marquee(){

if(demo2.offsetTop-demo.scrollTop=0) //當滾動至dome1與dome2交界時

demo.scrollTop-=demo1.offsetHeight //dome跳到最頂端

else{

demo.scrollTop++

}

}

var MyMar=setInterval(Marquee,speed) //設置定時器

demo.onmouseover=function() {clearInterval(MyMar)}//滑鼠移上時清除定時器達到滾動停止的目的

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//滑鼠移開時重設定時器，繼續滾動

/SCRIPT

div id=”demo” style=”overflow: hidden; height: 600; width: 180; background: #214984; color: #ffffff”

div id=”demo1″ align=”center”

!– 定義圖片 —

/div

div id=”demo2″ align=”center”/div

/div

JS如何實現圖片滑動？

script language=”javascript” type=”text/javascript”

//圖片滾動展示 Start

var counts = 4;

//大圖//

img1 = new Image();

img1.src = ‘images/1.jpg’;

img2 = new Image();

img2.src = ‘images/2.jpg’;

img3 = new Image();

img3.src = ‘images/3.jpg’;

img4 = new Image();

img4.src = ‘images/4.jpg’;

var smallImg = new Array();

//小圖

smallImg[0] = ‘images/index_adb1.gif’;

smallImg[1] = ‘images/index_adb2.gif’;

smallImg[2] = ‘images/index_adb3.gif’;

smallImg[3] = ‘images/index_adb4.gif’;

//鏈接地址

url1 = new Image();

url1.src = ‘ ‘;

url2 = new Image();

url2.src = ‘ ‘;

url3 = new Image();

url3.src = ‘ ‘;

url4=new Image();

url4.src=’ ‘

//alt值

alt1 = new Image();

alt1.alt = ”;

alt2 = new Image();

alt2.alt = ”;

alt3 = new Image();

alt3.alt = ‘ ‘;

alt4 = new Image();

alt4.alt=”;

////歡迎來到標準之路.

var nn = 1;

var key = 0;

function change_img() {

if (key == 0) {

key = 1;

} else if (document.all) {

document.getElementById(“pic”).filters[0].Apply();

document.getElementById(“pic”).filters[0].Play(duration = 2);

}

eval(‘document.getElementById(“pic”).src=img’ + nn + ‘.src’);

eval(‘document.getElementById(“url”).href=url’ + nn + ‘.src’);

eval(‘document.getElementById(“pic”).alt=alt’ + nn + ‘.alt’);

if (nn == 1) {

document.getElementById(“url”).target = “_blank”;

document.getElementById(“url”).style.cursor = “pointer”;

} else {

document.getElementById(“url”).target = “_blank”

document.getElementById(“url”).style.cursor = “pointer”

}

for ( var i = 1; i = counts; i++) {

document.getElementById(“xxjdjj” + i).className = ‘axx’;

}

document.getElementById(“xxjdjj” + nn).className = ‘bxx’;

nn++;

if (nn counts) {

nn = 1;

}

tt = setTimeout(‘change_img()’, 7000);

}

function changeimg(n) {

nn = n;

window.clearInterval(tt);

change_img();

}

function imageshow() {

document.write(‘div class=”picshow_main”‘);

document.write(‘diva id=”url”img id=”pic” class=”imgbig” //a/div’);

document.write(‘div class=”picshow_change”‘);

for ( var i = 0; i counts; i++) {

document.write(‘a href=”javascript:changeimg(‘ + (i + 1)

+ ‘);” id=”xxjdjj’ + (i + 1)

+ ‘” class=”axx” target=”_self”img src=”‘ + smallImg[i]

+ ‘”/a’);

}

document.write(‘/div/div’);

change_img();

}

//圖片滾動展示 End

/script

script language=”javascript” type=”text/javascript”

imageshow();

/script

js圖片左右滾動 怎麼弄 有沒案例代碼 求幫忙

1.jquery.imgScroll.js

;(function($){$.fn.extend({“imgScroll”:function(object){object=$.extend({firstDiv:null,scrollBox:null,scrollImgBox:null,tabDiv:null,tabDivList:null,botPrev:null,botNext:null,changeType:”slide”,thumbNowClass:’on’,thumbOverEvent:true,changeTime:5000,ImgBoxMar:0,flag:true},object||{});var imgLen=$(object.scrollImgBox).length;var imgNum=0;var tabNum=0;var nowIndex=0;var index;var scrollWid=$(object.scrollImgBox).width()+object.ImgBoxMar;$(object.scrollImgBox).clone().appendTo($(this));function changeEffectNext(){if(object.changeType==’slide’){if(imgNumimgLen){imgNum++}else{if(imgNum==imgLen){$(object.scrollBox).css({‘margin-left’:0});imgNum=1}}$(object.scrollBox).animate({‘margin-left’:-scrollWid*imgNum});if(tabNumimgLen-1){tabNum++}else{if(tabNum==imgLen-1){tabNum=0}}$(object.tabDivList).eq(tabNum).addClass(object.thumbNowClass);$(object.tabDivList).eq(tabNum).siblings().removeClass(object.thumbNowClass)}if(object.changeType==’fadein’){if(imgNumimgLen-1){imgNum++}else{if(imgNum==imgLen-1){imgNum=0}}$(object.scrollImgBox).eq(imgNum).fadeIn(‘slow’);$(object.scrollImgBox).eq(imgNum).siblings().fadeOut(‘slow’);$(object.tabDivList).eq(imgNum).addClass(object.thumbNowClass);$(object.tabDivList).eq(imgNum).siblings().removeClass(object.thumbNowClass)}};function changeEffectPrev(){if(object.changeType==’slide’){if(imgNum0){imgNum–}else{if(imgNum==0){$(object.scrollBox).css({‘margin-left’:-scrollWid*imgLen});imgNum=imgLen-1}}$(object.scrollBox).animate({‘margin-left’:-scrollWid*imgNum});if(tabNum0){tabNum–}else{if(tabNum==0){tabNum=imgLen-1}}$(object.tabDivList).eq(tabNum).addClass(object.thumbNowClass);$(object.tabDivList).eq(tabNum).siblings().removeClass(object.thumbNowClass)}if(object.changeType==’fadein’){if(imgNum0){imgNum–}else{if(imgNum==0){imgNum=imgLen-1}}$(object.scrollImgBox).eq(imgNum).fadeIn(‘slow’);$(object.scrollImgBox).eq(imgNum).siblings().fadeOut(‘slow’);$(object.tabDivList).eq(imgNum).addClass(object.thumbNowClass);$(object.tabDivList).eq(imgNum).siblings().removeClass(object.thumbNowClass)}}if(object.flag==true){var s=setInterval(changeEffectNext,object.changeTime);$(object.firstDiv).hover(function(){clearInterval(s)},function(){s=setInterval(changeEffectNext,object.changeTime);});$(object.tabDiv).hover(function(){clearInterval(s)},function(){s=setInterval(changeEffectNext,object.changeTime)});$(object.botPrev).bind(“click”,function(){clearInterval(s)}).bind(“mouseover”,function(){clearInterval(s)});$(object.botNext).bind(“click”,function(){clearInterval(s)}).bind(“mouseover”,function(){clearInterval(s)})};$(object.botNext).click(function(){changeEffectNext()});$(object.botPrev).click(function(){changeEffectPrev()});function changesmallImg(index){$(object.tabDivList).eq(index).addClass(object.thumbNowClass);$(object.tabDivList).eq(index).siblings().removeClass(object.thumbNowClass);if(object.changeType==’slide’){$(object.scrollBox).animate({‘margin-left’:-scrollWid*index})}if(object.changeType==’fadein’){$(object.scrollImgBox).eq(index).fadeIn(‘slow’);$(object.scrollImgBox).eq(index).siblings().fadeOut(‘slow’)}imgNum=index;tabNum=index}if(object.thumbOverEvent==true){$(object.tabDivList).click(function(){var index=$(this).index();changesmallImg(index)})}if(object.thumbOverEvent==false){$(object.tabDivList).hover(function(){var index=$(this).index();changesmallImg(index)})}}})})(jQuery);

2.html結構

a,.lbPeo{-webkit-transition:all .2s ease-in-out 0s;-o-transition:all .2s ease-in-out 0s;-moz-transition:all .2s ease-in-out 0s;-ms-transition:all .2s ease-in-out 0s;transition:all .2s ease-in-out 0s;}

.lbCon{margin-top:33px;margin-bottom:37px;position: relative;}

.lbBtn{display:block;position: absolute;top:0;width:40px;height:143px;border:1px solid #D7D2CA;background:url(‘../../../images/special/140801/ctr_prev.png’) no-repeat center center;}

.lbPrev{left:0}.lbNext{right:0;background-image:url(‘../../../images/special/140801/ctr_next.png’)}

.lbBtn:hover{background-color: #ddd;}

.lbBox{width:900px;height:145px;margin-left: 50px;overflow: hidden;position: relative;}

.lbList{width:1000%;}

.lbBox ul{float:left}

.lbBox li{float:left;width:150px;height:145px;overflow: hidden;}

.lbPeo{text-align:center;line-height:18px;font-family:”微軟雅黑”;color:#333}

.lbPeo img{display:block;border: 1px solid #ddd;width:84px;height:103px;margin-left:32px;*margin-left:5px;}

.lbPeo h5{font-weight: bold;font-size:12px;padding-top: 5px;*padding-top: 0}

.lbPeo h6{font-size:12px;}

.lbBox li a:hover{text-decoration: none}

.lbBox li a:hover .lbPeo{color:#ff9600}

!– 人物–

div class=”lbCon comWith clearfix”

   div class=”lbBox”

      div class=”lbList”

      ul

        lia href=”” target=”_blank”

          div class=”lbPeo clearfix”

            img src=”” /

            h5李大紅/h5

            h6大公報副社長兼執行總編輯/h6

          /div

        /a/li

        lia href=”” target=”_blank”

          div class=”lbPeo clearfix”

            img src=”” /

            h5李大紅/h5

            h6大公報副社長兼執行總編輯/h6

          /div

        /a/li

        lia href=”” target=”_blank”

          div class=”lbPeo clearfix”

            img src=”” /

            h5李大紅/h5

            h6大公報副社長兼執行總編輯/h6

          /div

        /a/li

        lia href=”” target=”_blank”

          div class=”lbPeo clearfix”

            img src=”” /

            h5李大紅/h5

            h6大公報副社長兼執行總編輯/h6

          /div

        /a/li

        lia href=”” target=”_blank”

          div class=”lbPeo clearfix”

            img src=”” /

            h5李大紅/h5

            h6大公報副社長兼執行總編輯/h6

          /div

        /a/li

        lia href=”” target=”_blank”

          div class=”lbPeo clearfix”

            img src=”” /

            h5李大紅/h5

            h6大公報副社長兼執行總編輯/h6

          /div

        /a/li

      /ul

      ul

        lia href=”” target=”_blank”

          div class=”lbPeo clearfix”

            img src=”” /

            h5李大2紅/h5

            h6大公報副社長兼執行總編輯/h6

          /div

        /a/li

        lia href=”” target=”_blank”

          div class=”lbPeo clearfix”

            img src=”” /

            h5李2大紅/h5

            h6大公報副社長兼執行總編輯/h6

          /div

        /a/li

        lia href=”” target=”_blank”

          div class=”lbPeo clearfix”

            img src=”” /

            h5李大紅/h5

            h6大公報副社長兼執行總編輯/h6

          /div

        /a/li

        lia href=”” target=”_blank”

          div class=”lbPeo clearfix”

            img src=”” /

            h5李大紅/h5

            h6大公報副社長兼執行總編輯/h6

          /div

        /a/li

        lia href=”” target=”_blank”

          div class=”lbPeo clearfix”

            img src=”” /

            h5李大紅/h5

            h6大公報副社長兼執行總編輯/h6

          /div

        /a/li

        lia href=”” target=”_blank”

          div class=”lbPeo clearfix”

            img src=”” /

            h5李大紅/h5

            h6大公報副社長兼執行總編輯/h6

          /div

        /a/li

      /ul

      /div

   /div

   a href=”javascript:;” class=”lbBtn lbPrev”/a

   a href=”javascript:;” class=”lbBtn lbNext”/a

/div

3.頁面調用：

script type=”text/javascript” src=”js/jquery-1.9.1.js”/script

script type=”text/javascript” src=”js/jquery.imgScroll.js”/script(上面那個js)

$(‘.lbCon .lbBox .lbList’).imgScroll({

        firstDiv: ‘.lbCon .lbBox’,

        scrollBox: ‘.lbCon .lbBox .lbList’,

        scrollImgBox: ‘.lbCon .lbBox ul’,

        botPrev: ‘.lbCon .lbPrev’,

        botNext: ‘.lbCon .lbNext’,

        changeType: “slide”,

        thumbNowClass: ‘on’,

        thumbOverEvent: true,

        changeTime: 5000,

        ImgBoxMar: 0,

        flag: false

    });

4.至於滑鼠滑過 顯示左右按鈕,可以這麼寫（思路:css默認隱藏左右按鈕，滑鼠滑過顯示左右按鈕，划出隱藏，需要引入jquery.js）

$(function(){

   $(“.wj_jdt_1”).bind(“onmouseover”,function(){

       $(“.ctr_btn”).show();

   }).bind(“onmouseout”,function(){

       $(“.ctr_btn”).hide();

   })

})

大體是這麼個意思，至於怎麼延伸在你