html5图片自动轮播(HTML5图片轮播)
求助HTML5 图片轮播
!DOCTYPE?htmlhtml
????head
????????meta?charset="utf-8"?/
????????title轮播图/title
????????style?type="text/css"
????????????*?{????????????????margin:?0px;????????????????padding:?0px;
????????????}????????????#lunbotu?{????????????????width:?1226px;????????????????height:?460px;????????????????overflow:?hidden;????????????????position:?relative;????????????????margin:?0px?auto;????????????????position:?relative;
????????????}????????????#banner?{????????????????height:?460px;????????????????width:?6130px;????????????????position:?absolute;????????????????transition:?2s;????????????????left:?0px;
????????????}????????????#banner?img?{????????????????float:?left;
????????????}????????????#biao?{????????????????position:?absolute;????????????????top:?430px;????????????????left:?43%;
????????????}????????????#biao_1?{????????????????height:?20px;????????????????width:?20px;????????????????border:?1px?solid?#000;????????????????z-index:?10;????????????????float:?left;????????????????list-style:?none;????????????????border-radius:?50%;????????????????margin-left:?20px;????????????????text-align:?center;????????????????cursor:pointer;
????????????}????????/style
????/head
????body
????????div?id="lunbotu"
????????????div?id="banner"
????????????????img?class="m"?src="img/T1hiDvBvVv1RXrhCrK.jpg"?/
????????????????img?class="m"?src="img/T1jrxjB_VT1RXrhCrK.jpg"?/
????????????????img?class="m"?src="img/T1oTJjBKKT1RXrhCrK.jpg"?/
????????????????img?class="m"?src="img/T1RICjB7DT1RXrhCrK.jpg"?/
????????????????img?class="m"?src="img/T1vWdTBKDv1RXrhCrK.jpg"?/
????????????/div
????????????div?id="biao"
????????????????ul
????????????????????li?id="biao_1"1/li
????????????????????li?id="biao_1"2/li
????????????????????li?id="biao_1"3/li
????????????????????li?id="biao_1"4/li
????????????????????li?id="biao_1"5/li
????????????????/ul
????????????/div
????????/div
????/body
????script?type="text/javascript"
????????var?slid?=?document.getElementById("banner");????????//var?id?=?document.getElementById("bt");
????????var?imgwidth?=?document.getElementsByClassName("m");????????var?oli=document.getElementsByTagName("li");????????//console.log(oli);
????????//console.log(imgwidth?);
????????var?i?=0;
????????auto();
????????oli[0].style.cssText="background:#ff6700;color:#fff;";????????function?auto(){
????????????time?=?setInterval(function(){
????????????????i++;????????????if(i?=?4)?{
????????????????slid.style.left?=?slid.offsetLeft?-?1226?+?"px";
????????????????oli[i].style.cssText="background:#ff6700;color:#fff;";
????????????????oli[i-1].style.cssText="background:none;color:#000;";
????????????}?else?{
????????????????slid.style.left?="0px";
????????????????oli[4].style.cssText="background:none;color:#000;";
????????????????oli[0].style.cssText="background:#ff6700;color:#fff;";
????????????????i=0;
????????????}????????????console.log(i);
????????},?3000)
????????}????????????for(var?j=0;j=4;j++){????????????????//console.log(imgwidth[j].index);
????????????imgwidth[j].index=j;
????????????oli[j].index=j;
????????????oli[j].onmouseover=function(){????????????????this.style.cssText="background:#ff6700;color:#fff;"????
????????????????this.onmouseout=function(){????????????????????this.style.cssText="background:none;color:#000;"
????????????????}
????????????}
????????????oli[j].onclick=function(){
????????????????clearInterval(time);
????????????????m=this.index;
????????????????slid.style.left=-m*1226+"px";????
????????????????i=m;
????????????????auto();????????????????console.log(i);
????????????}
????????????}????
????/script/html
jquery里面，或者HTML，HTML5，C#里面如何实现下图的图片效果。滑动轮播类似的。 DW里面添加代码也行。
; (function ($) {
/* var i = 2;
$(document).ready(function () {
var arry = ['images/headback/001.jpg', 'images/headback/002.jpg', 'images/headback/003.jpg', 'images/headback/004.jpg', 'images/headback/005.jpg', 'images/headback/006.jpg', ]
setInterval(
function () {
$("#div_pic").css("backgroundImage", "url(" + arry[i] + ")");
i++;
if (i == 5) {
i = 0;
}
}
, 5000);
}); 定时换背景图片的代码 */
//下面是图片切换代码
/*
var t;
var speed = 2; //图片切换速度
var nowlan = 0; //图片开始时间
function changepic() {
var imglen = $("#div_pic").find("li").length;
$("#div_pic").find("li").hide();
$("#div_pic").find("li").eq(nowlan).show();
nowlan = nowlan + 1 == imglen ? 0 : nowlan + 1;
t = setTimeout("changepic()", speed * 1000);
}
onload = function () { changepic(); }
$(document).ready(function ()
//鼠标在图片上悬停让切换暂停
$("#div_pic").hover(function () { clearInterval(t); });
//鼠标离开图片切换继续
$("#div_pic").mouseleave(function () { changepic(); });
});
*/
//下面是图片轮播代码
/* var num = 0
$(function(){
$("#div_pic ol li").mouseover(function(e){
$(this).attr("class","current");
$(this).siblings().attr("class",""); //兄弟节点的class属性设置为空
//alert($('ul').index())
num = $('ul').index() + 2
var index = $(this).index(); //记录选定的li标签在ul中的索引
//图片会出现层叠现象为了显示当前的图片，把当前的图片的z-index 值设置为大于其他的兄弟元素
$("#div_pic ul li").eq(index).css({"left":"650px","zIndex":num})
$("#div_pic ul li").eq(index).siblings().css("zIndex",num-1);
//动画效果，图片从右侧飞入
$("#div_pic ul li").eq(index).animate({left:"0"},500)
});
}); */
//下面是可配置轮播动画代码
$.fn.slide=function(options){
var defaults= {
affect:1, //1：上下滚动; 2:幕布式; 3:左右滚动；4：淡入淡出
time: 5000, //间隔时间
speed:500, //动画快慢
dot_text:true,//按钮上有无序列号
};
var opts=$.extend(defaults,options);
var $this=$(this);
var ool=$("div class='dot'p/p/div");
var $box=$this.find("ul");
var $li=$box.find("li");
var timer=null;
var num=0;
$this.append(ool);
$box.find("li").each(function(i){
ool.find("p").append($("b/b"));
if(opts.dot_text){
ool.find("b").eq(i).html(i+1)
}
})
ool.find("b").eq(0).addClass("cur");
switch(opts.affect){
case 1:
break;
case 2:
$box.find("li").css("display","none");
break;
case 3:
$box.css({"width":$li.eq(0).width()*$li.length});
$li.css("float","left");
break;
case 4:
$box.find("li").css("display","none");
break;
}
$box.find("li").eq(0).show(0);
ool.find("b").mouseover(function(){
num=$(this).index();
run ();
})
timer=setInterval(auto,opts.time);
function auto(){
num$box.find("li").length-1?num++:num=0;
run();
}
function run(){
ool.find("b").eq(num).addClass("cur").siblings().removeClass("cur");
switch(opts.affect){
case 1:
$box.stop(true,false).animate({"top":-240*num},opts.speed);
break;
case 2:
$box.find("li").css({"position":"absolute"});
$box.find("li").stop(false,true).fadeOut(opts.speed).eq(num).slideDown(opts.speed);
break;
case 3:
$box.stop(true,false).animate({"left":-670*num},opts.speed);
break;
case 4:
$box.find("li").css({"position":"absolute"});
$box.find("li").stop(false,true).fadeOut(opts.speed).eq(num).fadeIn(opts.speed);
break;
}
}
$this.mouseover(function(){
clearInterval(timer);
})
$this.mouseout(function(){
timer=setInterval(auto,opts.time);
})
}
}(jQuery));
html怎么设置滚动图片？
方案一：直接使用HTML的滚动标签 marquee ，把图片放入滚滚标签内部，代码如下：
marquee
img src='1.jpg'
img src='2.jpg'
img src='3.jpg'
img src='4.jpg'
/marquee
方案二：使用第三方插件，比如swiper.js，
插件
怎么用html5+css3 实现图片轮播
1、首先我们创建一个简单的项目，如图所示包括html，css和img三个。
2、这里是html文件，引入css和html代码文件，如图所示。
3、这里是css文件代码，上面是div和图片显示的效果代码，后面是动画效果。
4、这里是事件，这里定义了四个时间段的状态，兼容了ie的。
5、如图所示这里是效果图，会根据时间轮播显示下一张图片 了。
如何实现canvas的图片轮播
图片自动滑动效果很多网站都要用，最近在学html5就拿这个练练手，发现用canvas实现起来其实很简单。代码比较粗糙，有很多改进的地方，不过还是先记录一下。
一. html文件
[html] view
plaincopy
!DOCTYPE html
html lang="en"
head
meta charset="utf-8"/
titleHTML5 Images Slider/title
script src=""/script
script src="test.js"/script
link href="style.css" rel="stylesheet" /
/head
body
div id="container"
canvas id="imgs" width="500" height="300" onclick="canvasClick()"/canvas
/div
div class="imgGallery"
span class="cover"img src="1.jpg" id="img1" width="125" height="150" onclick="iconClick(this.id)"/span
img src="2.jpg" id="img2" width="125" height="150" onclick="iconClick(this.id)"
img src="3.jpg" id="img3" width="125" height="150" onclick="iconClick(this.id)"
img src="4.jpg" id="img4" width="125" height="150" onclick="iconClick(this.id)"
/div
/body
footer
/footer
/html
二. js文件，名字test.js
[javascript] view
plaincopy
var images = new Array();
var cIndex = 0;
var speed = 5;
var context;
var canvas;
var currentImage;
var width=300;
var height=300;
var stopX = 95;
var stopY = 0;
var autoTimeout;
var manuTimeout;
var interval;
var img1;
var img2;
var img3;
var img4;
var timeoutInterval = 5;
function slideImage(id,x,y,imgObj){
this.speed = speed;
this.preImage = null;
this.nextImage = null;
this.imgObj=imgObj;
this.x=x;
this.y=y;
this.direction="right";
this.id = id;
}
function buttonNext(x,y,bwidth,bheight){
this.x = x;
this.y = y;
this.width = bwidth;
this.height = bheight;
}
$(document).ready(
function(){
InitImages();
canvas = document.getElementById("imgs");
context = canvas.getContext("2d");
//移动图片
context.drawImage(currentImage.imgObj,currentImage.x,currentImage.y,width,height);
context.drawImage(currentImage.preImage.imgObj,currentImage.preImage.x,currentImage.preImage.y,width,height);
context.drawImage(currentImage.nextImage.imgObj,currentImage.nextImage.x,currentImage.nextImage.y,width,height);
context.fillStyle="rgba(100,150,185,0.5)";
context.fillRect(0,0,100,height);
context.fillRect(400,0,100,height);
interval = setTimeout("intervalSlide()", 20);
}
);
function drawFrame(){
context.clearRect(0,0,canvas.width,canvas.height);
//调用beginPath()确保不会接着上次绘制的图形绘制
context.beginPath();
context.drawImage(currentImage.imgObj,currentImage.x,currentImage.y,width,height);
context.drawImage(currentImage.preImage.imgObj,currentImage.preImage.x,currentImage.preImage.y,width,height);
context.drawImage(currentImage.nextImage.imgObj,currentImage.nextImage.x,currentImage.nextImage.y,width,height);
context.drawImage(currentImage.preImage.preImage.imgObj,currentImage.preImage.preImage.x,currentImage.preImage.preImage.y,width,height);
//遮罩
context.fillStyle="rgba(100,150,185,0.5)";
context.fillRect(0,0,100,height);
context.fillRect(400,0,100,height);
//每一帧的位置变动
currentImage.x -= speed;
currentImage.preImage.x -= speed;
currentImage.nextImage.x -= speed;
currentImage.preImage.preImage.x -= speed;
if(currentImage.x == 200){
currentImage.nextImage.x = 500;
}
//到达指定位置停止变动
if(currentImage.x != stopX){
autoTimeout = setTimeout("drawFrame()",timeoutInterval);
}
else{
}
}
function InitImages(){
img1 = new slideImage("img1",-200,0,document.getElementById("img1"));
img2 = new slideImage("img2",100,0,document.getElementById("img2"));
img3 = new slideImage("img3",400,0,document.getElementById("img3"));
img4 = new slideImage("img4",700,0,document.getElementById("img4"));
img1.preImage = img4;
img1.nextImage = img2;
img2.preImage= img1;
img2.nextImage= img3;
img3.preImage=img2;
img3.nextImage=img4;
img4.preImage = img3;
img4.nextImage = img1;
currentImage=img2;
hilightSelectedImg();
}
function canvasClick(){
currentImage = currentImage.nextImage;
manuTimeout = setTimeout("drawFrame()",timeoutInterval);
}
function intervalSlide(){
currentImage = currentImage.nextImage;
hilightSelectedImg();
autoTimeout = setTimeout("drawFrame()", timeoutInterval);
setTimeout("intervalSlide()", 5000)
}
function iconClick(obj){
if(obj == "img1"){
currentImage = img1;
}
else if(obj == "img2"){
currentImage = img2;
}
else if(obj == "img3"){
currentImage = img3;
}
else if(obj == "img4"){
currentImage = img4;
}
currentImage.preImage.x = 100;
currentImage.preImage.preImage.x = -200;
currentImage.x = 400;
hilightSelectedImg();
manuTimeout = setTimeout("drawFrame()",timeoutInterval);
}
function hilightSelectedImg(){
img1.imgObj.width = 125;
img1.imgObj.height = 150;
img1.imgObj.style.opacity = 0.5;
img2.imgObj.width = 125;
img2.imgObj.height = 150;
img2.imgObj.style.opacity = 0.5;
img3.imgObj.width = 125;
img3.imgObj.height = 150;
img3.imgObj.style.opacity = 0.5;
img4.imgObj.width = 125;
img4.imgObj.height = 150;
img4.imgObj.style.opacity = 0.5
currentImage.imgObj.width = 150;
currentImage.imgObj.height = 175;
currentImage.imgObj.style.opacity = 1;
}
三. css文件。style.css
[css] view
plaincopy
canvas {
border:1px dashed black;
}
.imgGallery{
width:550px;
position:absolute;
height:170px
}
img{
opacity:0.5;
}
html5如何实现图片轮播
静态获取图片写法，给定图片的个数，用js实现轮播图自动转换。
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
titleDocument/title
!-- *******设置样式********** --
style type="text/css"
.show_div{
width: 400px;
height: 400px;
margin: ?0 auto;
border: 2px solid block;
overflow: hidden;
}
.scroll_div{
width: 2000px;
height: 400px;
}
.scroll_div img{
width: 400px;
height: 400px;
float: left;
}
/style
!-- end --
/head
body
div class="show_div"
div class="scroll_div"
img src="img/b.jpg" alt=""
img src="img/c.jpg" alt=""
img src="img/d.jpg" alt=""
img src="img/a.jpg" alt=""
img src="img/b.jpg" alt=""
/div
/div
/body
!-- *********js代码******** --
script type="text/javascript"
var scrollDiv = document.getElementsByClassName("scroll_div")[0];
// 定义初始值
var left =0;
// 定义一个定时器 走一步
function move(){
var timer = setInterval(function(){
left --;
if (left = -1600) {
left = 0;
}
if (left % -400 == 0) {
clearInterval(timer);
timer = null;
}
scrollDiv.style.marginLeft = left + "px";
},10);
}
// 定义一个定时器 每隔固定时间 走一张
setInterval(function(){
move();
},5000);
/script
/html