网站怎么做图片轮播
有赏是什么赏呢。。。6000财富值也就10块钱而已
O(∩_∩)O~
重要位置都给你做好了代码解释 非常完善
!doctype html
html
head
meta charset="utf-8"
title简单的自动播放/title
style
body{ margin:0px; padding:0px;}
#banner{ margin:auto; width:600px; height:300px; border:1px solid #ddd; position:relative;}
#banner img{ width:100%; height:100%;}
#xd{ position:absolute; right:0px; bottom:0px;}
#xd span{display:block; float:left; margin-right:10px; margin-bottom:10px; cursor:pointer;}
#xd span:hover{color:#069;}
.xd1{color:#eee;}
.xd2{color:#069;}
#foot{ text-align:center; font-size:14px;}
/style
/head
body
div id="banner"
img id="imgs" src="images/b1.jpg"
div id="xd"
span class="xd2"●/span
span class="xd1"●/span
span class="xd1"●/span
span class="xd1"●/span
span class="xd1"●/span
span class="xd1"●/span
/div
/div
div id="foot"a href=""柏艾尔/a/div
script
var timer=setInterval("AutoPlay()",1300);//全局变量，定义定时器，每隔1300毫秒执行一次AutoPlay()函数
var p=1;//全局变量，存储当前播放的第几张图片
var xdspan=document.getElementById("xd").getElementsByTagName("span");//获取xd下的所有span标签
var xdspanlength=xdspan.length;//获取span标签的数量
for(var i=0;ixdspanlength;i++){
xdspan.item(i).onclick=function(){//通过for循环为所有span标签添加点击事件
for(var i=0;ixdspanlength;i++){//通过for循环为所有span标签设置class="xd1"
xdspan.item(i).className="xd1";
}
this.className="xd2";//设置点击的span标签class="xd2"
for(var i=0;ixdspanlength;i++){
if(xdspan.item(i).className=="xd2"){//通过for循环判断当前点击的是第几个小圆点，然后修改图片地址
document.getElementById("imgs").src='images/b'+(i+1)+'.jpg';
p=i+1;////全局变量，存储当前播放的第几张图片，以便从当前图片开始播放下一张图片
}
}
}
}
function AutoPlay(){//自动播放函数
if(p=7){p=1;}//只有6张图片，当p大于等于7时就从第一张图片开始
for(var i=0;ixdspanlength;i++){//通过for循环为所有span标签设置class="xd1"
xdspan.item(i).className="xd1";
}
xdspan.item(p-1).className="xd2";//设置当前播放的span标签class="xd2"
document.getElementById("imgs").src='images/b'+p+'.jpg';//修改图片地址
p++;
}
document.getElementById("banner").onmouseover=function(){clearInterval(timer);}//当鼠标移入轮播区域时，停止自动播放
document.getElementById("banner").onmouseout=function(){timer=setInterval("AutoPlay()",1300);}//当鼠标移出轮播区域时，继续自动播放
/script
/body
/html
width:600px; height:300px
对应的width是宽度 height是高度 自行调整即可
网页轮播图怎么做啊，搜了好多代码自己也做不出来
网页轮播图主要包含三部分：
1、轮播图片；2、css和html代码部分；3、轮播js代码部分
下面的可以参考：
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
titleDocument/title
link rel="stylesheet" type="text/css" href="swiper-3.4.1.min.css"
script type="text/javascript" src="jquery/jquery-3.0.0.min.js"/script
script type="text/javascript" src="swiper-3.4.1.jquery.min.js"/script
style type="text/css"
.swiper-container{
width: 790px;
height: 340px;
}
/style
/head
!-- 结构以及class的类名不允许更改 --
body
div class="swiper-container"
div class="swiper-wrapper"
div class="swiper-slide".jpg)/div
div class="swiper-slide".jpg)/div
div class="swiper-slide".jpg)/div
div class="swiper-slide".jpg)/div
div class="swiper-slide".jpg)/div
div class="swiper-slide".jpg)/div
div class="swiper-slide".jpg)/div
div class="swiper-slide".jpg)/div
/div
!-- 如果需要分页器 --
div class="swiper-pagination"/div
!-- 如果需要导航按钮 --
div class="swiper-button-prev"/div
div class="swiper-button-next"/div
!-- 如果需要滚动条 --
!-- div class="swiper-scrollbar"/div --
/div
script type="text/javascript"
var mySwiper = new Swiper ('.swiper-container', {
// 滚动方向 horizontal/vertical
direction: 'horizontal',
// 自动播放
autoplay:2000,
// 是否循环播放
loop: true,
// 如果需要分页器（小圆点）
// 是否需要分页器
pagination: '.swiper-pagination',
// 点击分页器是否切换到对应的图片 是 true 否 false
paginationClickable:true,
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 用户操作swiper之后，是否禁止autoplay。默认为true：停止。
// 如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。
// 操作包括触碰，拖动，点击pagination等。
autoplayDisableOnInteraction:false,
})
/script
/body
/body
/html
效果图如下：
另外 新手建议还是直接选用已有的，现在网上很多的！
网页设计中如何让图片轮播
网页设计中让图片轮播，需要用到的JS和比较好的div+css布局意识，主要还是需要了解left，top在css中的意思，这里我提交一段我以前写的代码；
html中的代码：
div id="box"
div id="woZaiHouDun" class='hide'
a id="btnLeft" href='javascript:void(0);' /a
a id="btnRight" href='javascript:void(0);' /a
ul
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)
}
这样是能实现轮播的。
网站首页轮播图怎么做简单？
首页轮播图是网站基础功能，最简单的手机拍照后修饰下就能做轮播图了。需要注意的是，不要随便从网上下载图片，这种有可能涉及到侵权。购买了版权的图片那就随意用吧。
暂无评论
发表评论