把以下js的代码改成JQuery（图片走马灯）

JavaScript021

把以下js的代码改成JQuery（图片走马灯）,第1张

写了个 大概的，还有很大改进的余地，照着思路改改吧~

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style type="text/css">

li{

display: inline

}

#scroll_div{

width: 200px

margin: 0 auto

overflow: hidden

white-space: nowrap

position: relative

}

</style>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script type="text/javascript">

$.fn.scrollImgLeft = function(options) {

var def={

speed:1,

scrollDiv:$('#scrollDiv'),

scrollBegin:$('#scrollBegin'),

scrollEnd:$('#scrollEnd')

}

var opts = $.extend(def, options)

opts.scrollEnd.html(opts.scrollBegin.html())

function Marquee() { 

if (opts.scrollEnd.outerWidth(true) - opts.scrollDiv.scrollLeft() <= 0) { 

opts.scrollDiv.scrollLeft() -= opts.scrollBegin.outerWidth(true) 

} else { 

opts.scrollDiv.scrollLeft(opts.scrollDiv.scrollLeft()+1) 

} 

} 

var MyMar = setInterval(Marquee,opts.speed) 

scroll_div.onmouseover = function () { 

clearInterval(MyMar) 

} 

scroll_div.onmouseout = function () { 

MyMar = setInterval(Marquee, opts.speed) 

}

} 

$(function(){

var opt = {

speed:2,

   scrollDiv:$('#scroll_div'),

   scrollBegin:$('#scroll_begin'),

   scrollEnd:$('#scroll_end')

}

$('#scroll_div').scrollImgLeft(opt)

})

</script>

</head>

<body>

<div id="scroll_div">

<div id="scroll_begin">

<ul>

<li>11111111</li>

<li>222222</li>

<li>3333</li>

<li>444444</li>

<li>55555555</li>

</ul>

</div>

</div>

<div id="scroll_end"></div>

</body>

</html>

<!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/htmlcharset=gb2312" />

<title>无缝滚动</title>

<style type="text/css">

img{

border:0

height:100pxwidth:150px

}

td img{

margin:0 10px

}

</style>

</head>

<body>

<!-- 纵向向无缝滚动-->

<div id="demo" style="overflow:hiddenheight:350pxwidth:200px">

<div id="demo1">

<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_01.jpg"></a><p>

<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_02.jpg"></a><p>

<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_03.jpg"></a><p>

<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_04.jpg"></a><p>

<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_05.jpg"></a><p>

<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_06.jpg"></a><p>

<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_07.jpg"></a><p>

<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_08.jpg"></a><p>

<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_10.jpg"></a><p>

<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_11.jpg"></a><p>

</div>

<div id="demo2">

</div>

</div>

<script>

var speed=40

var demo2=document.getElementById("demo2")

var demo1=document.getElementById("demo1")

var demo=document.getElementById("demo")

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo2.offsetTop-demo.scrollTop<=0)

demo.scrollTop-=demo1.offsetHeight

else{

demo.scrollTop++

}

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script>

<!-- 横向无缝滚动-->

<div style="margin-top:20px">

<div id="scroll_div" style="overflow: hiddenWIDTH: 778px" align=center>

<table border="0" cellpadding="0" cellspacing="0">

<tr>

<td id="scroll_begin">

<a href="#"><img src="jsfile/imagesa32/gundong_11.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_01.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_02.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_03.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_04.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_05.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_06.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_07.jpg" border=0></a></td>

<td id="scroll_end"></td>

</tr>

</table>

</div></div>

<script>

var speed1=40

var scroll_end = document.getElementById("scroll_end")

var scroll_div = document.getElementById("scroll_div")

scroll_end.innerHTML=scroll_begin.innerHTML

function Marquee1(){

if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)

scroll_div.scrollLeft-=scroll_begin.offsetWidth

else{

scroll_div.scrollLeft++

}

}

var MyMar1=setInterval(Marquee1,speed1)

scroll_div.onmouseover=function() {clearInterval(MyMar1)}

scroll_div.onmouseout=function() {MyMar1=setInterval(Marquee1,speed1)}

</script>

</body>

</html>

<!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>

<title>javascript无缝滚动</title>

<meta charset="gb2312"/>

<style type="text/css">

#marquee ,#marquee li { padding:0pxmargin:0px}

#marquee { position:relativelist-style:noneheight:150pxwidth:210pxpadding-left:5pxoverflow:hiddenborder:10px solid #eee}

#marquee li { position:absolutefont-size:12px}

#marquee a { display:blockcolor:#999999text-decoration:none}

</style>

<script type="text/javascript">

var Marquee = function(id){

try{document.execCommand("BackgroundImageCache", false, true)}catch(e){}

var container = document.getElementById(id),

slide = container.getElementsByTagName("li")[0],

speed = arguments[1] || 80, //速度

delta = 0,//当前滚动的位置

critical = slide.offsetHeight//临界点

slide.innerHTML += slide.innerHTML

var rolling = function(){

delta == -critical ? delta = 0 : delta--

slide.style.top = delta + "px"

}

var timer = setInterval(rolling,speed)//设置定时器

container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时，清除定时器，停止滚动

container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器

}

window.onload = function(){

Marquee("marquee")

}

</script>

</head>

<body>

<ul id="marquee">

<li>

<a href="#">纤云弄巧，飞星传恨，银汉迢迢暗度。</a><br />

<a href="#">金风玉露一相逢，便胜却、人间无数。</a><br />

<a href="#">柔情似水，佳期如梦。忍顾鹊桥归路！</a><br />

<a href="#">两情若是久长时，又岂在、朝朝暮暮。</a><br />

<a href="#">千重劫，百世难，亘古匆匆，弹指间！</a><br />

<a href="#">不死躯，不灭魂，震古烁今，无人敌！</a><br />

<a href="#">待到阴阳逆乱时，以我魔血染青天！</a><br />

</li>

</ul>

</body>

</html>