html怎麼換圖片_HTML中如何做圖片切換效果跪求代碼

『壹』 HTML 裡面的圖片怎麼移動位置

需要准備的材料分別有：電腦、chrome瀏覽器、html編輯器。

1、首先，打開html編輯器，新建一個html文件，例如：index.html，填充問題基礎代碼。

『貳』 HTML怎麼設置切換圖片

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>H5course</title>
<link rel="stylesheet" href="css/reset.css">
<style>
.imgview {
width: 255px;
height: 402px;
margin: 50px auto;
border: 10px solid red;
overflow: hidden;
}
.imgview img {
width: 255px;
height: 402px;
}
.imgview-nav {
width: 255px;
margin: 10px auto;
border: 1px solid red;
list-style-type: none;
}
.imgview-nav li {
float: left;
width: 15px;
height: 15px;
border: 1px solid blue;
margin: 10px;
}
span {
display: inline-block;
width: 50px;
height: 50px;
background: #CFC;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="wrap">
<div class="imgview" id="imgView">
<table cellspacing="0" cellpadding="0">
<tr>
<td><img src="img/1.jpg" alt=""></td>
<td><img src="img/2.jpg" alt=""></td>
<td><img src="img/3.jpg" alt=""></td>
<td><img src="img/4.jpg" alt=""></td>
<td><img src="img/5.jpg" alt=""></td>
<td><img src="img/6.jpg" alt=""></td>

</tr>
</table>
</div>
<ul class="imgview-nav" id="imgviewNav">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<span>左邊</span>
<span>右邊</span>
</div>
<script>
var imgView = document.getElementById('imgView'),
imgWidth = imgView.getElementsByTagName('img'),
btn = document.getElementsByTagName('li'),
len = btn.length,
imgNum = 0,
endPos = 0,
timer = null,
timer2 = null,
conSpan = document.getElementsByTagName('span');

conSpan[0].onclick = function (){
if (timer) {
clearInterval(timer);
};
if (timer2) {
clearInterval(timer2);
};
imgNum--;
if (imgNum < 0 ) {
imgNum = len;
};
timer = setInterval(move, 16);
timer2 = setInterval(autoMove, 3000);
}
conSpan[1].onclick = function (){
if (timer) {
clearInterval(timer);
};
if (timer2) {
clearInterval(timer2);
};
imgNum++;
if (imgNum == len ) {
imgNum = 0;
};
timer = setInterval(move, 16);
timer2 = setInterval(autoMove, 3000);
}
//綁定事件。添加移動效果
for (var i = 0; i < len; i++) {
btn[i].index = i;
btn[i].onmouseover = function(){
clearInterval(timer2);
imgNum = this.index;
if (timer) {
clearInterval(timer);
};
timer = setInterval(move, 16);
}
btn[i].onmouseout = function(){
timer2 = setInterval(autoMove, 2000);
}
};
//圖片緩動效果，原理是保持步數不變，改變距離的同時改變速度
function move(){
var starPos = imgView.scrollLeft,
speed;
endPos = imgNum * imgWidth[0].offsetWidth;
speed = (endPos - starPos) / 20;
if (speed == 0) {
clearInterval(timer);
} else if(speed > 0){
speed = Math.ceil(speed);
} else {
speed = Math.floor(speed);
}
imgView.scrollLeft = starPos + speed;

}
//控制圖片的自動滾動，通過控制索引值來控制圖片的自動滾動
function autoMove(){
imgNum++;
if(imgNum == len) {
imgNum = 0;
};
timer = setInterval(move, 20);
}timer2 = setInterval(autoMove, 2000);
</script>
</body>
</html>

『叄』 html怎麼實現當滑鼠經過一個圖片時顯示另一張圖片

1、准備切換圖片素材，一般是兩張，如圖，放入img文件夾，跟HTML同級。

『肆』 html如何調整圖片位置

1、可以使用background-position屬性設置脊悔高圖片位置前滲，具體的方法是，首先用hbuilder軟體新建一個html文件，文件的head標簽中設置輸入style標簽：

『伍』 html中如何滑鼠點擊更換背景圖片

html中滑鼠點擊更換背景圖片的方法：

1、html代碼：

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

2、css代碼：

ul.menu > li > a{

float:left;

width:265px;

height:50px;

margin-top:450px;

text-align:center;

line-height:50px;

color:#ddd;

background-color:#333;

letter-spacing:1px;

cursor:pointer;

text-decoration:none;

text-shadow:0px 0px 1px #fff;

}

ul.menu > li ul{

list-style:none;

float:left;

margin-top:-180px;

width:100%;

height:110px;

padding-top:20px;

background-repeat:no-repeat;

background-color:transparent;

}

ul.menu > li ul li{

display:none;

}

ul.menu > li ul.sub1 {

background-image: url('../img/bg1sub.png');

}

ul.menu > li ul.sub2 {

background-image: url('../img/bg2sub.png');

}

ul.menu > li ul.sub3{

background-image:url(../img/bg3sub.png);

}

ul.menu > li ul li a{

color:#fff;

text-decoration:none;

line-height:30px;

margin-left:20px;

text-shadow:1px 1px 1px #444;

font-size:11px;

}

ul.menu > li ul li a:hover{

border-bottom:1px dotted #fff;

}

ul.menu > li ul.sub1 li{

display:block;

}

3、js代碼：

if (!document.defaultView || !document.defaultView.getComputedStyle) { // IE6-IE8

var oldCurCSS = jQuery.curCSS;

jQuery.curCSS = function (elem, name, force) {

if (name === 'background-position') {

name = 'backgroundPosition';

}

if (name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[name]) {

return oldCurCSS.apply(this, arguments);

}

var style = elem.style;

if (!force && style && style[name]) {

return style[name];

}

return oldCurCSS(elem, 'backgroundPositionX', force) + ' ' + oldCurCSS(elem, 'backgroundPositionY', force);

};

}

var oldAnim = $.fn.animate;

$.fn.animate = function (prop) {

if ('background-position' in prop) {

prop.backgroundPosition = prop['background-position'];

delete prop['background-position'];

}

if ('backgroundPosition' in prop) {

prop.backgroundPosition = '(' + prop.backgroundPosition;

}

return oldAnim.apply(this, arguments);

};

function toArray(strg) {

strg = strg.replace(/left|top/g, '0px');

strg = strg.replace(/right|bottom/g, '100%');

strg = strg.replace(/([0-9.]+)(s|)|$)/g, "$1px$2");

var res = strg.match(/(-?[0-9.]+)(px|\%|em|pt)s(-?[0-9.]+)(px|\%|em|pt)/);

return [parseFloat(res[1], 10), res[2], parseFloat(res[3], 10), res[4]];

}

4、實現效果

『陸』 html怎樣實現圖片自動切換

1、首先，打開html編輯器，新建html文件，例如：index.html。

『柒』 html5點擊鏈接在框架內更換圖片

你好這種效果很簡單的採用jquery 然後假設另一張圖片名叫 a.gif 並且和 depart_info_close.gif存放在同一個文件夾下給a標簽新加一個屬性 id="a" 然後按照你提供的高襲 html結構代碼如戚謹兄下
$(function(){
$("#a").click(function(){
$(this).prev().attr({"src":"a.gif"});
});
})
這樣子就好了
代碼的晌拆意思是當點擊a標簽時尋找與他同級的並且在他之前的那一個元素也就是img標簽
並且改變 img標簽中的 src屬性為 a.gif
希望能幫到你謝謝

『捌』 html中的如何圖片切換如圖

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "團跡http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">帆胡
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
p,ul,li {
margin: 0;
padding: 0;
}

body,input {
font: 12px/ 1.5 Helvetica, Tahoma, Arial, \5b8b\4f53, sans-serif;
}

a {
text-decoration: none;
color: #000;
}

a:hover {
text-decoration: underline;
color: #000;
}

a img {
vertical-align: text-bottom;
}

.pic-news {
width: 295px;
}

.news-slider {
position: relative;
z-index: 88;
height: 200px;
padding: 3px 0 0 5px;
margin-bottom: 10px;
}

.news-slider .slides_container {
display: none;
position: relative;
width: 284px;
overflow: hidden;
}

.news-slider .slides_container div.slide {
display: block;
width: 284px;
height: 200px;
}

.news-slider .caption {
position: absolute;
bottom: -35px;
left: 0;
z-index: 500;
width: 204px;
height: 24px;
line-height: 24px;
_height: 30px;
overflow: hidden;
padding: 0 70px 0 10px;
border-top: 1px solid #000;
background: #000;
opacity: 0.8;
filter: alpha(opacity = 80);
color: #fff;
text-shadow: none;
}

.news-slider .pagination {
position: absolute;
bottom: 0;
right: 0;
z-index: 99;
height: 16px;
width: 70px;
}

.news-slider .pagination li {
float: left;
margin: 0 2px;
list-style: none;
}

.news-slider .pagination li a {
float: left;
display: block;
width: 8px;
height: 8px;
overflow: hidden;
background: url(../images/pagination.png);
_background: url(../images/pagination.gif);
font-size: 0;
}

.news-slider .pagination li.current a {
background-position: 0 -12px;
}
</style>
</head>
<body>
<div class="fl pic-news">
<div id="J_news_slider" class="news-slider">
<div class="slides_container">
<div class="slide">
<img src="images/slider/s1.jpg" width="態或攔300" height="206" alt="" />
<div class="caption" style="bottom: 0">
<p>
圖1
</p>
</div>
</div>
<div class="slide">
<img src="images/slider/s2.jpg" width="300" height="206" alt="" />
<div class="caption">
<p>
圖2
</p>
</div>
</div>
<div class="slide">
<img src="images/slider/s3.jpg" width="300" height="206" alt="" />
<div class="caption">
<p>
圖3
</p>
</div>
</div>
<div class="slide">
<img src="images/slider/s4.jpg" width="300" height="206" alt="" />
<div class="caption">
<p>
圖4
</p>
</div>
</div>
<div class="slide">
<img src="images/slider/s5.jpg" width="300" height="206" alt="" />
<div class="caption">
<p>
圖5
</p>
</div>
</div>
</div>
<ul class="pagination">
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
</ul>
</div>
</div>

<script type="text/javascript" src="js/libs/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/libs/slides.min.jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if($('#J_news_slider').length>0){
/*slides*/
$('#J_news_slider').slides({
preload: true,
preloadImage: 'images/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true,
generateNextPrev: false,
generatePagination: false,
animationStart: function(current){
$('.caption').animate({
bottom:-35
},100);
if (window.console && console.log) {
// example return of current slide number
console.log('animationStart on slide: ', current);
};
},
animationComplete: function(current){
$('.caption').animate({
bottom:0
},200);
if (window.console && console.log) {
// example return of current slide number
console.log('animationComplete on slide: ', current);
};
},
slidesLoaded: function() {
$('.caption').animate({
bottom:0
},200);
}
});
}
});
</script>
</body>
</html>
圖片放/image/slider/目錄下，最後,jquery-1.6.2.min.js與slides.min.jquery.js可在網上下載，放在/js/libs/目錄下

『玖』 HTML中如何做圖片切換效果，跪求代碼

1、首先輸入代碼：

<ul>

導航:首頁 > 動漫圖片 > html怎麼換圖片

html怎麼換圖片

與html怎麼換圖片相關的資料