js图片循环滚动代码(图片滚动js特效代码)

http://www.itjxue.com  2023-03-01 02:41  来源:未知  点击次数: 

js图片自动切换问题!以下是部分代码,autoPlay:true,为什么不自动切换图片呢?

如果你是用一个比较成熟的框架的话,排除框架错误后,只剩下一个就是CSS写的不正确。

好好查查CSS写的是不是和你下载下来的这个框架的CSS写的一样,再查查HTML是不是和原版一样。

JS图片滚动怎么让鼠标经过后停止啊?

我写的代码,要下班了,所以就简单注释一下。鼠标经过会停止,移开鼠标会继续走。已经测试过了。另存xx.htm打开可看效果。

script?type="text/javascript"

var?timer_movex;

start_timer();

function?start_timer(){

??timer_movex?=?setInterval(function()?{//setInterval是js循环定时器每隔一段时间就执行一次function代码

??var?x?=?document.getElementById('x');//获得id为x的html元素

??if(x.offsetLeft?=?800)

????x.style.left?=?0;//如果移动到了800的位置,则跳回左边0点重新开始移动

??else

????x.style.left?=?x.offsetLeft?+?50;//向右移动20个像素

},?1000);//每隔1000毫秒移动一次

}

function?stop_timer()?{

??clearInterval(timer_movex);

}

function?movex(v)?{

??var?x?=?document.getElementById('x');//获得id为x的html元素

??x.style.left?=?x.offsetLeft?+?v;//移动v个像素,v为正数则向右,负数则向左。x.style.left即为左边框位置。

}

/script

div?id="x"?style="position:absolute;?left:500px;?top:100px;?width:100px;?height:100px;?border=1px?solid?#000;"?onmouseover="stop_timer()"?onmouseout="start_timer()"

h1TEST/h1

/div

form

input?id="test"?onclick="movex(-100)"?value="点击左移"?type="button"/

input?id="test"?onclick="movex(100)"?value="点击右移"?type="button"/

input?id="test"?onclick="start_timer()"?value="start"?type="button"/

input?id="test"?onclick="stop_timer()"?value="stop"?type="button"/

/form

求教php首页上想让两张图片循环滚动代码怎么写啊

可以使用flexslider ,代码和下边类似

div class="slider"

div class="flexslider flexslider2"

ul class="slides item"

?php foreach($slide as $v) { ?

lia target="_bland" href="?php echo $v['Url']; ?"img src="?php echo '../'.$v['ImagePath']; ?" width="960" height="250"/a/li

?php } ?

/ul

/div

/div

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

(责任编辑:IT教学网)

更多

推荐站内动态文章