                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /焦點圖輪播特效

如果想做一個全屏的輪播，應(yīng)該怎么控制container這個div的大小或者圖片的大小，使之適應(yīng)不同瀏覽器不同電腦呢

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<head>

<title>以太工作室</title>

</head>

<body>

<div>

</div>

<ul>

<li><a href="html/gaikuang.html">工作室概況</a>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

<div>

<div>考生·在校生·教職工

<div>信息門戶

<div>OA系統(tǒng)

<div>信息公開

<div>

<form>

</div>

</a>

</a>

</a>

</a>

</div>

<ul>

<li>

</li><span>2015-5-13</span>

<li>

</li><span>2015-5-13</span>

<li>

</li><span>2015-5-13</span>

<li>

</li><span>2015-5-13</span>

<li>

</li><span>2015-5-13</span>

</ul>

</div>

</a>

</a>

</a>

</a>

</div>

</div>

</div>

<p>版權(quán)所有© 以太工作室地址: 長春市凈月大街2555號郵編130000</p>

</div>

</body>

</html>

以下是js部分

function gid(id) {

return document.getElementById(id);

}

window.onload = function() {

var container= gid("container");

var list = gid("list");

var prev = gid("prev");

var next = gid("next");

var timer;

//位移函數(shù),每次移動offset

function animate(offset) {

var newLeft = parseInt(list.style.left) + offset;

list.style.left = newLeft + 'px';

list.style.left = check(parseInt(list.style.left)) + 'px';

}

//檢測函數(shù) ?保證圖片輪播正常

function check(left) {

if (left > -1920) return -7680;

if (left < -7680) return -1920;

}

//點擊箭頭切換頁面，調(diào)用animate函數(shù)

prev.onclick = function() {

animate(1920);

}

next.onclick = function() {

animate(-1920);

}

// 定時器自動播放效果，3秒自動播放一次

function play() {

timer = setInterval(next.onclick, 3000);

}

function stop() {

clearInterval(timer);

}

container.onmouseover = stop;

container.onmouseout = play;

play();

}

以下是css：

* {

margin: 0px;

padding: 0px;

}

body {

margin: 0;

padding: 0;

font-family: "微軟雅黑";

height: 620px;

}

#container {

width: 100%;

height: 620px;

overflow: hidden;

position: relative;

top: -310px;

left: 0px;

z-index: -3;

}

#list img {

width: 1920px;

height: 620px;

float: left;

}

#list {

position: absolute;

width: 9600px;

}

.arrow {

height: 35px;

width: 35px;

/*opacity: 0.3;*/

background-color: rgba(0, 0, 0, 0.3);

display: none;

/*display: block;*/

color: white;

text-decoration: none;

font-size: 30px;

text-align: center;

position: absolute;

font-weight: bold;

z-index: 2;

}

#prev {

left: 5px;

top: 0;

bottom: 0;

margin: auto;

}

#next {

right: 5px;

top: 0;

bottom: 0;

margin: auto;

}

.arrow: hover {

background-color: rgba(0, 0, 0, 0.7);

}

#top {

height: 100px;

background: #333;

/*opacity: 0.3;*/

color: whitesmoke;

font-weight: bolder;

background-color: rgba(0, 0, 0, 0.5);

}

.logo {

float: left;

margin: 0;

z-index: 1000;

}

#top ul li {

float: left;

list-style: none;

height: 100px;

/*width:10%;*/

margin: 0;

border-right: 1px solid white;

text-align: center;

display: block;

line-height: 100px;

}

/*#top ul{

position: relative;

}*/

#top ul li ul {

/*position: absolute;*/

left: 276px;

/*height: 100px;*/

line-height: 0px;

text-align: center;

padding-left: 0px;

display: none;

}

#top ul li ul li {

float: none;

/*width: 100%;*/

height: 37px;

line-height: 25px;

}

#top ul li ul li a {

color: black;

}

#top ul li ul li a:hover {

/*width: 50px;*/

height: 31px;

color:blanchedalmond;

padding-top: 5px;

}

#top ul li:hover ul {

display: block;

background-color: rgba(255, 255, 255, 0.5);

}

#top a {

text-decoration: none;

color: black;

display: block;

padding: 0px 18px;

color: white;

}

#top a:hover {

color: white;

background-color: rgba(59, 160, 247, 0.5);

}

.Xss {

float: right;

margin-top: 12px;

}

.Xselect {

margin-top: 5px;

float: left;

border: 1px solid white;

height: 30px;

line-height: 30px;

margin: 0;

padding: 0 10px;

}

.select {

position: absolute;

top: 70px;

right: 20px;

}

#research {

color: #fffefe;

height: 20px;

width: 150px;

background: rgba(0, 0, 0, 0);

padding: 5px;

margin-bottom: -15px;

}

#wpic {

width: 815px;

height: 205px;

/*background-color: black;*/

position: relative;

top: 160px;

z-index: 2;

margin-left: auto;

margin-right: auto;

}

#wleft {

width: 204px;

/*margin-left: 10px;*/

text-align: center;

line-height: 100px;

color: white;

}

#wleft a {

color: white;

}

#wlxpic {

width: 100px;

height: 100px;

background-color: rgba(18, 169, 226, 0.7);

float: left;

margin-top: 2px;

margin-right: 2px;

}

#wlxpic:hover {

background-color: rgba(72, 68, 68, 0.6);

color: white

}

#wright {

width: 204px;

float: right;

margin-top: -102px;

line-height: 100px;

color: white;

text-align: center;

}

#wrxpic {

width: 100px;

height: 100px;

background-color: rgba(18, 169, 226, 0.7);

float: right;

margin-top: 2px;

margin-right: 2px;

}

#wright a {

color: white;

}

#wrxpic:hover {

background-color: rgba(72, 68, 68, 0.6);

color: white

}

#wmiddle {

width: 389px;

height: 202px;

margin: 1px;

background-color: rgba(255, 255, 255, 0.7);

float: left;

margin-top: -100px;

margin-left: 8px;

margin-right: 5px;

border-top: 2px solid #12A9E2;

}

#wmiddle p {

font-weight: bold;

color: #1C71CA;

font-size: 18px;

line-height: 25px;

margin-left: 10px;

margin-top: 5px;

}

#wmiddle ul {

list-style: none;

margin-left: 20px;

margin-top: 20px;

}

#wmiddle a {

display: block;

color: black;

line-height: 29px;

text-decoration: none;

}

#wmiddle a:hover {

color: #0A89D4;

}

.span2 {

display: block;

float: right;

color: blue;

margin-right: 10px;

line-height: 20px;

margin-top: -24px;

}

.span1 {

float: left;

font-weight: bolder;

margin-right: 5px;

line-height: 25px;

}

#footer {

height: 70px;

z-index: 2;

background-color: rgba(0, 0, 0, 0.7);

width: 100%;

position: fixed;

bottom: 0px;

}

#footer p {

text-align: center;

color: white;

line-height: 28px;

}

#footer a {

text-decoration: none;

color: white;

}

#footer a:hover {

color: #0A89D4;

}

加油學(xué)吧

2016-05-23

源自：焦點圖輪播特效 7-1

關(guān)注問題我要回答

1700

操作

收起

4 回答

餓了怎么辦
2016-07-21

設(shè)置container與圖片大小一致，也就是全屏寬度，list的寬度=圖片寬度*n張圖片

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

Sunnylincon
2016-06-10

其實我覺得你直接用corelDRAW或者其他圖片編輯的一些軟件直接把圖片拉大不是更省事么......

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

_張敏258zm_
2016-06-08

用百分比去控制

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

zusheng
2016-05-29

控制圖片大小不就行啦

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

舉報

0/150

提交

取消

焦點圖輪播特效

參與學(xué)習(xí) 65327 人
解答問題 634 個

通過本教程學(xué)習(xí)您將能掌握非常實用的焦點圖輪播特效的制作過程

進入課程

本課相似問答

1 回答輪播的圖片大小不一致怎么解決

3 回答輪播圖的自適應(yīng)怎么做

4 回答想要圖片滿屏的效果要怎么做呢？就是圖片自適應(yīng)鋪滿屏幕，而不是600px

1 回答老師，如果圖片是1920px的，在不同屏幕里怎么居中輪播，謝謝

2 回答在實際應(yīng)用中，如何動態(tài)改變圖片的數(shù)量呢？而且圖片的大學(xué)還必須是同樣大小的吧？

搜索更多本課相關(guān)問答

如果想做一個全屏的輪播，應(yīng)該怎么控制container這個div的大小或者圖片的大小，使之適應(yīng)不同瀏覽器不同電腦呢

我要回答關(guān)注問題

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

如果想做一個全屏的輪播，應(yīng)該怎么控制container這個div的大小或者圖片的大小，使之適應(yīng)不同瀏覽器不同電腦呢

4 回答

本課相似問答

如果想做一個全屏的輪播，應(yīng)該怎么控制container這個div的大小或者圖片的大小，使之適應(yīng)不同瀏覽器不同電腦呢

如果想做一個全屏的輪播，應(yīng)該怎么控制container這個div的大小或者圖片的大小，使之適應(yīng)不同瀏覽器不同電腦呢

如果想做一個全屏的輪播，應(yīng)該怎么控制container這個div的大小或者圖片的大小，使之適應(yīng)不同瀏覽器不同電腦呢