js图片循环滚动代码(图片滚动js特效代码)
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