本文目录一览：
- 1、js实现图片左右滚动
- 2、如何制作JS+DIV左右滚动的切换图
- 3、哪位好心人能否给我写个简单js的幻灯片代码，三个文件（HTML,CSS,JS）我是初学者，一张图片
- 4、JS如何实现左右滚动轮播代码详细点
- 5、php页面的js图片左右滑动的幻灯片，为什么是竖向先载入了三张图片，一秒后才正常。很影响页面。
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+DIV左右滚动的切换图
在自己网站需要添加切换图的位置放上以下的HTML代码（用来显示切换的8张图片）；图片可以是固定的几张图片，也可以使用动态调用代码来调用网站文章中的图片。
在网站的CSS文件的底部粘贴下面的CSS文件，用来控制版块的样式。可以对CSS进行适当的修改来符合自己做网站的尺寸的需要。
*案例滚动图片样式*/
.anli8{width:980px; margin:0px auto;}
.anli_fot{width:980px; height:7px; background:url(../images/net2_07.jpg) no-repeat; margin-bottom:15px;}
.infiniteCarousel {
border-left:1px solid #ccc; border-right:1px solid #ccc; background-color:#F6F5F5; width:978px; position: relative; height:190px;
}
.infiniteCarousel .wrapper8 {
width:865px; height:198px; position:absolute; top:0; margin-left:53px;
}
.infiniteCarousel ul a img {
border:4px solid #E5E5E5; width:190px; height:130px; overflow:hidden;
}
.infiniteCarousel li{
text-align:center; font-weight:normal; font-size:12px; color:#333; line-height:26px;
}
.infiniteCarousel .wrapper8 ul{
width:865px; margin:0; position:absolute; padding-top:10px;
}
.infiniteCarousel .wrapper8 ul li {
display:block; float:left; padding:10px;
}
.infiniteCarousel .arrow {
display: block; text-indent: -999px; position:absolute; top:65px; cursor:pointer;
}
.infiniteCarousel .forward {
width:46px; height:45px; background:url(../images/net_05.jpg) no-repeat; right:5px; overflow:hidden;
}
.infiniteCarousel .back {
width:46px; height:45px; background:url(../images/net_03.jpg) no-repeat;left:5px;
}
.infiniteCarousel .forward:hover {
width:46px; height:45px; background:url(../images/net_05.jpg) no-repeat; right:5px;
}
.infiniteCarousel .back:hover {
width:46px; height:45px; background:url(../images/net_03.jpg) no-repeat; left:5px;
}
添加了DIV和CSS之后，只能将图片显示出来，但图片还不能动起来，还需要添加二个JS文件才能让它们自动切换起来。
下载二个JS文件，然后上传到自己网站空间的根目录下。
完成以上步骤之后，即可实现在自己网站上制作左右滚动的切换图的效果了。
哪位好心人能否给我写个简单js的幻灯片代码，三个文件（HTML,CSS,JS）我是初学者，一张图片
body onLoad=”setScrollPic()” leftmargin=”0″ topmargin=”0″
script language=”JavaScript1.2″
!–
//格式调用
transeffect = 0;
theeffects = new Array(24);
theeffects[0] = “盒状收缩”;
theeffects[1] = “盒状向外”;
theeffects[2] = “圆形收缩”;
theeffects[3] = “圆形向内”;
theeffects[4] = “从下向上”;
theeffects[5] = “从上向下”;
theeffects[6] = “从左向右”;
theeffects[7] = “从右向左”;
theeffects[8] = “百页窗形向右”;
theeffects[9] = “百页窗形向下”;
theeffects[10] = “棋盘形交叉向右”;
theeffects[11] = “棋盘形交叉向下”;
theeffects[12] = “随意溶解形”;
theeffects[13] = “左右向内”;
theeffects[14] = “左右向外”;
theeffects[15] = “上下向内”;
theeffects[16] = “上下向外”;
theeffects[17] = “条纹状向左下”;
theeffects[18] = “条纹状向左上”;
theeffects[19] = “条纹状向右下”;
theeffects[20] = “条纹状向右上”;
theeffects[21] = “解水平状”;
theeffects[22] = “溶解上下状”;
theeffects[23] = “随着溶解”;
//格式完成
//图片参数
var myImages = new Array(6);//加图片要修改这儿
for(i=0;imyImages.length;i++){
myImages[i] = new Image();
}
myImages[0].src = “images/ch02.jpg”;
myImages[1].src = “images/ch03.jpg”;
myImages[2].src = “images/ch04.jpg”;
myImages[3].src = “images/ch05.jpg”;
myImages[4].src = “images/ch06.jpg”;
myImages[5].src = “images/ch07.jpg”;
lastImageNum = 0 ;
function setScrollPic(){
if(lastImageNum=myImages.length) lastImageNum = 0 ;
document.all.ioriPic.filters.item(0).Apply();
document.all.ioriPic.filters.item(0).Transition = transeffect;
document.all.ioriPic.filters.item(0).Play(2.0);
document.all.ioriPic.src=myImages[lastImageNum].src
transeffect++;
if (transeffect == 24)
transeffect = 0;
lastImageNum++;
window.setTimeout(“setScrollPic()”,4000);
}
//图片完成
—
/script
img src=”images/ch01.jpg” name=”ioriPic” width=”1024″ height=”768″ style=”FILTER: revealTrans(Duration=3.0,Transition=1)”
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();
}
我这还有其他的，先采纳一下加我，我给你发
php页面的js图片左右滑动的幻灯片，为什么是竖向先载入了三张图片，一秒后才正常。很影响页面。
因为没看到具体代码，从你描述的现象来看，可能原因是图片载入时的容器属性是块级（默认独占一行），然后js运行时给图片的容器加了浮动。解决办法：你试着给图片的容器比如div ,li等加个浮动float:left,比如div style=”float:left”img src=”……”/div,当然把样式写在css文件中更好
原创文章，作者：W80QH，如若转载，请注明出处：https://www.506064.com/n/128901.html
微信扫一扫 
支付宝扫一扫 