当前位置：首页 > 问答聚合 > 正文内容

网站首页图片轮转（图片转直链网站）

zhuangbi888.com2022-05-23 04:30问答聚合108

本篇文章给大家谈谈网站首页图片轮转，以及图片转直链网站对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文导读目录：

网站首页轮播图怎么做简单？

首页轮播图是网站基础功能，最简单的手机拍照后修饰下就能做轮播图了。需要注意的是，不要随便从网上下载图片，这种有可能涉及到侵权。购买了版权的图片那就随意用吧。

淘宝网首页图片轮播制作

div class="a5af-b363-e6eb-4dd1 box"

div class="b363-e6eb-4dd1-22e0 shop-slider"

div class="e6eb-4dd1-22e0-75cd bd"

div style="WIDTH: 340px; HEIGHT: 175px" class="4dd1-22e0-75cd-d7b2 slider-promo J_Slider tb-slide"

ul style="HEIGHT: 175px"

lia href="在这里加入宝贝的超级链接" target="_blank"

img border="0" src="请在这加入图片的地址" width="340" height="175"/a /li

a href="在这里加入宝贝的超级链接" target="_blank"

img border="0" alt="" src="请在这加入图片的地址" width="340" height="175"/a /li

a href="在这里加入宝贝的超级链接" target="_blank"

img border="0" alt="" src="请在这加入图片的地址" width="340" height="175"/a/li

/ul

li1 /li

li2 /li

li3/li

/ul

/div

直接复上去可以用了..如果你想要轮转更多张..那你就多复几行.....如下:

div class="22e0-75cd-d7b2-5c64 box"

div class="75cd-d7b2-5c64-14ff shop-slider"

div class="d7b2-5c64-14ff-08ec bd"

div style="WIDTH: 340px; HEIGHT: 175px" class="5c64-14ff-08ec-ad6e slider-promo J_Slider tb-slide"

ul style="HEIGHT: 175px"

lia href="在这里加入宝贝的超级链接" target="_blank"

img border="0" src="请在这加入图片的地址" width="340" height="175"/a /li

a href="在这里加入宝贝的超级链接" target="_blank"

img border="0" alt="" src="请在这加入图片的地址" width="340" height="175"/a /li

a href="在这里加入宝贝的超级链接" target="_blank"

img border="0" alt="" src="请在这加入图片的地址" width="340" height="175"/a/li

a href="在这里加入宝贝的超级链接" target="_blank"

img border="0" alt="" src="请在这加入图片的地址" width="340" height="175"/a/li

a href="在这里加入宝贝的超级链接" target="_blank"

img border="0" alt="" src="请在这加入图片的地址" width="340" height="175"/a/li

/ul

li1 /li

li2 /li

li3/li

li4/li

li5/li

/ul

/div

不明的可以问我..旺旺野蛮华华

你想修改轮转图片的大小就把..div style="WIDTH: 340px; HEIGHT: 175px

340是图片图宽..175是高注意把每一行的都改下同一样的大小.

HTML首页怎么加图片轮播

html

head

title图片滚动 /title

style

#div1 {position:relative;width:650px;height:210px;overflow:hidden; }

#div2{position:absolute;}

li{float:left;list-style-type:none;padding:5px;}

img{border:none;}

a{position:relative;}

/style

script

window.onload=function()

{

var odiv2=document.getElementById('div2');

var ali=odiv2.getElementsByTagName('li');

var aspeed=-5;

odiv2.innerHTML+=odiv2.innerHTML;

odiv2.style.width=ali[0].offsetWidth*ali.length+'px';

setInterval(function()

{

odiv2.style.left=odiv2.offsetLeft+aspeed+'px';

if (odiv2.offsetLeft-odiv2.offsetWidth/2)

{

odiv2.style.left='0px';

}

},30);};

}

/script

/head

body

div id='div1'

div id='div2'

lia href=""img src="1.jpg" //a/li

lia href=""img src="2.jpg" //a/li

lia href=""img src="3.jpg" //a/li

lia href=""img src="4.jpg" //a/li

!--这边你可以添加任意多的li，也就是你可以添加任意多的图片，使任意多的图片轮播--

/div

/body

/html

网站首页图片轮转

网页设计中如何让图片轮播

网页设计中让图片轮播，需要用到的JS和比较好的div+css布局意识，主要还是需要了解left，top在css中的意思，这里我提交一段我以前写的代码；

html中的代码：

div id="box"

div id="woZaiHouDun" class='37b7-a2d1-5c7d-ee74 hide'

a id="btnLeft" href='javascript:void(0);' /a

a id="btnRight" href='javascript:void(0);' /a

liimg width="400" height="260" src="./images/scholl/1.jpg"//li

liimg width="400" height="260" src="./images/scholl/2.jpg"//li

liimg width="400" height="260" src="./images/scholl/3.jpg"//li

liimg width="400" height="260" src="./images/scholl/1.jpg"//li

liimg width="400" height="260" src="./images/scholl/2.jpg"//li

liimg width="400" height="260" src="./images/scholl/3.jpg"//li

liimg width="400" height="260" src="./images/scholl/1.jpg"//li

liimg width="400" height="260" src="./images/scholl/2.jpg"//li

liimg width="400" height="260" src="./images/scholl/3.jpg"//li

/ul

/div

js中的代码：

ar t=null;

function woZaiHouDun(){

var oUl = document.getElementById('woZaiHouDun').getElementsByTagName('ul')[0];

var aLi = oUl.getElementsByTagName('li');

oUl.innerHTML += oUl.innerHTML;

oUl.style.width = aLi[0].offsetWidth*aLi.length + 'px';

var oBtnLeft = document.getElementById('btnLeft');

var oBtnRight = document.getElementById('btnRight');

var iTarget = 0;

var ispeed = -3;

oBtnLeft.onclick = function(){

ispeed = 3;

}

oBtnRight.onclick = function(){

ispeed = -3;

}

t=setInterval(function(){

iTarget = oUl.offsetLeft -ispeed;

if( iTarget - oUl.offsetWidth/2){

oUl.style.left =0 +'px';

iTarget = oUl.offsetLeft -ispeed;

}

if( iTarget 0){

oUl.style.left =- oUl.offsetWidth/2 +'px';

iTarget = oUl.offsetLeft -ispeed;

}

oUl.style.left =iTarget +'px';

},30)

}

这样是能实现轮播的。

HTML首页怎么加图片轮播？

可以通过输入代码来操作。

这里的图片轮播方法是我从网上参考的方法，只是自己做了一些改进，先来贴一发代码：

!DOCTYPE HTML

html

head

link rel="stylesheet" type="text/css" href="./css/init2.css"

script type="text/javascript" src="./js/jquery-1.11.3.min.js"/script

script type="text/javascript" src="./js/test2.js"/script

/head

body

div id="layout"

header class="14ff-08ec-ad6e-a80a clearfix"

div id="banner"

ul id="banner_img"

liimg src="./img/s1.jpg"/li

liimg src="./img/s2.jpg"/li

liimg src="./img/s3.jpg"/li

/ul

/div

/header

/div

/body

/html

在这个html的目录下有三个同级的文件夹，img中放图片，css和js分别存放这个网页的css文件和js文件，这里用到了jquery，记得引入顺序，jquery一定要放在其他js前面。

html代码很简单，不做过多解释。

看一下引入的css，init2.css

margin: 0px ;

padding: 0px ;

}

#layout{

width: 960px ;

margin: 0 auto ;

}

#banner{

position: relative;

overflow: hidden;

width: 600px;

height: 200px;

border-radius: 10px ;

border: 2px solid black;

}

#banner_img li{

float: left;

list-style-type: none;

}

#index{

position: absolute;

right: 8px ;

bottom: 8px ;

}

#index li{

float: left;

width: 16px ;

height: 16px ;

text-align: center;

line-height: 16px ;

border-radius: 5px ;

border:1px solid #FF7300 ;

background: white;

list-style: none;

margin-left: 8px ;

cursor: pointer;

}

.clearfix:after{

content: "" ;

height: 0px ;

display: block;

clear:both ;

}

.on

{

background:#FF7300 ;

}

css基本上和前面的html中的类对应，claerfix来清除浮动，on是代表轮播图片的索引中当前的正播放的图片的索引，其实就改个背景，这里的索引是后面动态加上去的，索引在html中看不到。主要思路就是把装图片的容器设置成overfl;hidden;

下面是一种比较简单的实现，利用jquery的fadeIn和fadeOut效果来实现。

//fadeIn and fadeOut

var time ;

var index = 1 ;

var tolnum = 3 ;

$(function(){

span style="white-space:pre" /spansetInterval("showBanner("+tolnum+")",3000);

});

function showBanner(n)

{

span style="white-space:pre" /spanvar ul = $("#banner_img") ;

span style="white-space:pre" /spanul.children().fadeOut("slow") ;

span style="white-space:pre" /spanul.children().eq(index).fadeIn("slow") ;

span style="white-space:pre" /spanindex = index+1n-1 ? 0 : index+1 ;

}

恩，不知道为什么到最后一张图片的时候会产生没有淡出的bug，不太懂，请大家指教。

第二种方法是利用jquery的animation来实现margin属性的过渡。

init();

function init()

{

$(function(){

var index = 0 ;

var adTime ;

var len = $("#banner_img li").length ;

addIndex(len) ;

var bannerLi = $("#index li");

//handle index

$("#index li").mouseover(function() {

index = $("#index li").index(this) ;

showImgs(index) ;

});

//toggleInterval

$("#banner").hover(function(){

clearInterval(adTimer);

},function(){

adTimer=setInterval(function(){

//alert(index) ;

showImgs(index);

index++;

if(index==len){

index=0;

}

},2000)

}).trigger('mouseleave');

});

}

//auto add index

function addIndex(n)

{

var ul = $("ul id=\"index\"/ul") ;

for(var i=1;i=n;i++)

{

var li = $("li/li") ;

li.append(function(num){

return num

}(i)) ;

ul.append(li) ;

}

ul.children().first().addClass('on') ;

$("#banner_img").append(ul);

}

function showImgs(index)

{

var adwidth=$("#banner_imgli:first").width();

$("#banner_img").stop(true, false) ;

//$("#banner_img").css('margin-left', -index*adwidth+"px");

$("#banner_img").animate({

"marginLeft":-adwidth*index+"px"

},1000);

$("#index li").removeClass('on').eq(index).addClass('on') ;

}

hover（）是一种代替mouseenter和mouseleave的方法，听说比较好用。trigger（）来触发当前对象的一个状态，这里要先触发一次mouseleave的状态来初始化计时器，因为这里的设定是当鼠标移到$("#banner")上就销毁定时器，锁定当前图片，移开鼠标就重新添加定时器。pre name="code" class="089b-37b7-a2d1-5c7d javascript" $("#banner_img").animate({

"marginLeft":-adwidth*index+"px"

},1000);

这了就是对jquery中animation方法的使用，通过传进来的index来改变banner_img的margin，这里是margin-left，所以图片就会从右往左刷（需要设置浮动），如果需要从下往上刷就设置margin-top就好了，还有我发现js中动态添加margin是不能触发css的transition的。

网站首页图片轮转的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于图片转直链网站、网站首页图片轮转的信息别忘了在本站进行查找喔。

标签: 网站首页图片轮转