js图片点击左右滚动代码（js图片左右移动的代码）

今天给各位分享js图片点击左右滚动代码的知识，其中也会对js图片左右移动的代码进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、js中怎么实现图片不间断的向左滚动效果，要那种代码清晰的~
• 2、JS如何实现左右滚动轮播代码详细点
• 3、怎么用JS脚本使多张图片滚动？
• 4、js实现图片自动的滚动效果
• 5、js图片左右滚动 怎么弄 有没案例代码 求帮忙
• 6、js实现图片左右滚动

js中怎么实现图片不间断的向左滚动效果，要那种代码清晰的~

script type="text/javascript"

var speed = 20;//滚动速度

var maq;

var m1;//第一份滚动的内容

var m2;//第二份滚动的内容

var timer;//定时器

function run(){

if(m1.offsetWidth=maq.scrollLeft){

maq.scrollLeft-=m1.offsetWidth;

}else{

maq.scrollLeft+=6;

}

}

window.onload=function(){

maq=document.getElementById("maq");

m1=document.getElementById("m1");

m2=document.getElementById("m2");

m2.innerHTML=m1.innerHTML;

if(timer==null){

timer=window.setInterval(run,speed);

}

maq.onmouseover=function(){

window.clearInterval(timer);

}

maq.onmouseout=function(){

timer=window.setInterval(run,speed);

}

}

/script

/head

body

div id="maq" style="height:200px; width:180px; overflow:hidden"

table

tr

td id="m1"

table

tr

tdimg src="" width="174" height="268" //td

tdimg src="" width="174" height="268" //td

tdimg src="" width="174" height="268" //td

/tr

/table

/td

td id="m2"/td

/tr

/table

/div

/body

楼主详细代码在这里这已经是相当的简介版了你只要把图片路径改一下就能用了，~要采纳呦~你懂得~~

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脚本使多张图片滚动？

推荐使用marquee实现图片滚动,示例:

marquee

scrolldelay="100"

direction="up"

onmouseover="this.stop()"

onmouseout="this.start()"img

src="xxxxxxx"/marquee

其中scrolldelay="100"

===指滚动延迟时间,单位是毫秒ms,默认为90ms

direction="up"

===指滚动方向,默认从左往右,可取的值为:up,down,left,right

onmouseover="this.stop()"

===指鼠标悬停在图片上时,图片静止

onmouseout="this.start()"

===指鼠标离开图片时,图片运动

希望对您有所帮助

js实现图片自动的滚动效果

自动滚动，主要思路是用js自带的setInterval方法。

定义和用法

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法

setInterval(code,millisec[,"lang"])

参数

code    必需。要调用的函数或要执行的代码串。  

millisec    必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。  

返回值

一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

简单的例子，仅供参考：

style    

*{ margin:0; padding:0; list-style:none;}    

#box{ width:840px; border:1px solid #000; height:210px; margin:30px auto; position:relative; overflow:hidden;}    

#box ul{ position:absolute; left:0; top:0;}    

#box ul li{ width:200px; height:200px; float:left; padding:5px;}    

/style    

script    

window.onload=function(){    

var oBox=document.getElementById('box');    

var oUl=oBox.children[0];    

var aLi=oUl.children;    

//复制一份内容    

oUl.innerHTML+=oUl.innerHTML;    

oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';    

setInterval(function(){    

var l=oUl.offsetLeft+10;    

if(l=0){    

l=-oUl.offsetWidth/2;    

}    

oUl.style.left=l+'px';    

},30);    

};    

/script    

/head    

body    

div id="box"    

ul    

    liimg src="img/1.jpg" width="200"/li    

       liimg src="img/2.jpg" width="200"/li    

       liimg src="img/3.jpg" width="200"/li    

       liimg src="img/4.jpg" width="200"/li    

   /ul    

/div    

/body

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();

   })

})

大体是这么个意思，至于怎么延伸在你

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图片点击左右滚动代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于js图片左右移动的代码、js图片点击左右滚动代码的信息别忘了在本站进行查找喔。