本文目錄一覽：
- 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/zh-tw/n/128901.html
微信掃一掃 
支付寶掃一掃 