スライドショーを作りたいのですが分かりません教えて下さい

フォーラム(掲示板)ルール
フォーラム(掲示板)ルールはこちら　　※コードを貼り付ける場合は [code] と [/code] で囲って下さい。詳しくはこちら
閉鎖
フィリップ

スライドショーを作りたいのですが分かりません教えて下さい

#1

投稿記事 by フィリップ » 7年前

HTML

コード: 

 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Webサイト</title>
<link rel="stylesheet" type="text/css" href="css/style.css" media="all">
<link rel="stylesheet" type="text/css" href="style.css" media="all">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.4.min.js"  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="  crossorigin="anonymous"></script>
<script type="text/javascript" src="jscript.js"></script>
</head>

<body>
<div id = "pageBody">

<p id="slideshow">
<a href="#">
<img src="image/image.jpg" alt="トップイメージ" width="760" height="330" class="active" id="featureImage">
<img src="image/image2.jpg" alt="トップイメージ" width="760" height="330" class="active" id="featureImage">
<img src="image/image3.jpg" alt="トップイメージ" width="760" height="330" class="active" id="featureImage">
</a>
</p>

<header>
<nav>
<ul>
<li id="la"><a href="#Information">Informatio </a></li>
<li id="lb"><a href="#Schedule">Schedule</a></li>
<li id="lc"><a href="#Artist">Artist</a></li>
<li id="ld"><a href="#Event">Event</a></li>
<li id="le"><a href="#Ticket">Ticket</a></li>
<li id="lf"><a href="#Inquiry">Inquiry</a></li>
</ul>
</nav>
</header>

<section id="ima">
<div>
<dl id="ima_L">
<h3 id="l">インディーズシーンで話題の
DJ blAckが初参戦！</h3>
<p id="l2">今、インディーズシーンで話題沸騰の「DJ blAck」が初登場。メロウでアーバンなプレイスタイルの彼が、今回のために新しいサウンドを引っさげてくるらしい！このチャンスを見逃すな！</p>
</dl>

<dl id="ima_S">
<h3 id="s">ダンスユニット”Beats”と　　
サウンドのコラボレーション</h3>
<p id="s2">今回のFPNは音楽だけじゃない！DJの奏でるビートに合わせて、ダンスユニット「Beats」のメンバーが、ステージの上を縦横無尽に駆け回る。ここでしか見られない特別なコラボレーションだ！</p>
</dl>

<dl id="ima_R">
<h3 id="r">新進気鋭クリエイターによる
VJバトルロイヤル</h3>
<p id="r2">新進気鋭の若手クリエイター5組によるVJバトルロイヤルを開催。オーディエンスの指示を得られなかったチームは即失格！新鮮な感性がぶつかり合う情け無用の激しいバトルに酔いしれろ！</p>
</dl>
</div>

</section>

<footer>
<p>COPYRIGHT (c) NAME  ALL RIGHTS RESERVED.</p>
</footer>

</div>
</body>
</html>


CSS

コード: 

 
@charset "utf-8";
/* CSS Document */
* { margin: 0; padding: 0; }

a { text-decoration: none; }

/*#slideshow {
	position: relative;
	width: 760px;
	height: 330px;
}*/

img { 
      vertical-align: top;
	  padding-top: 20px;
	  padding-bottom: 20px;
	  padding-left: 20px;
	  padding-right: 20px;
	}
	
/*#slideshow img{
	position: absolute;
	z-index: 8;
	opacity: 0.0;	
}

#slideshow img.active{
	z-index: 10;
	opacity: 1.0;
}

#slideshow img.last-active {
	z-index: 9;
} */
	
featureImage{ 
    clear: both;
	
}

a:hover { color: #FFFFFF; }
a:active { color: #FFFFFF; }

a:link { color:#000000; }
a:visited { color: #EFEFEF; }
body {
	background-color: #272727;
	padding-top: 50px;
}

#pageBody {
	background-color: #FFFFFF;
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;
}

header{
    padding-bottom: 55px;
    padding-top: 20px;
}

nav {
	width: 760px;
	padding-left:20px;
}

nav ul {
	list-style-type: none;
	background: #B8B8B8;
	color: #FFFFFF;
	border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;
}

nav ul:after
{ content: "."; display: block; clear: both; height: 0; visibility: hidden; }

nav ul #la, #lb, #lc, #ld, #le{
	padding: 10px 0 10px 0;
	text-align: center;
	width: 125.6px;
	float: left;
	border-right-color: #626262;
	border-right-style: solid;
	border-right-width: 1px;
}

nav ul #lf{
	padding: 10px 0 10px 0;
	text-align: center;
	width: 125.6px;
	float: left;
}

#ima div:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }

div{
	width: 760px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
}

dl#ima_L {
    width: 248.3px;
	float: left;
	margin-top:20;
	border-right-color: #626262;
	border-right-style: dotted;
	border-right-width: 2px;
}

dl #l, #l2 {
	padding-bottom: 20px;
	padding-right:15px;
	
}

dl#ima_S {
    width: 258.3px;
	float: left;
	margin-top:20;
	border-right-color: #626262;
	border-right-style: dotted;
	border-right-width: 2px;
}

dl #s, #s2  {
	padding-bottom: 20px;
	padding-right:15px;
	padding-left: 15px;
}

dl#ima_R {
    width: 249.3px;
	float: left;
	margin-top:20;

}
dl #r, #r2 {
	padding-bottom: 20px;
	padding-left: 15px;
	
}

footer{
	clear: both;
	text-align: center;
	padding:15px 0 15px 0;
}

JavaScript

コード: 

 
$(function(){
     $('a img').hover(function(){
        $(this).attr('src', $(this).attr('src').replace('_off', '_on'));
          }, function(){
             if (!$(this).hasClass('currentPage')) {
             $(this).attr('src', $(this).attr('src').replace('_on', '_off'));
        }
   });
});
ページトップ
アバター
みけCAT
記事: 6734
登録日時: 13年前
住所: 千葉県
連絡を取る:
みけCAT に連絡する

Re: スライドショーを作りたいのですが分かりません教えて下さい

#2

投稿記事 by みけCAT » 7年前

具体的に何を教えてほしいのですか？

フォーラムルールより転載
どう質問していいか解らない時は、以下のテンプレをコピペして、

各項目に対して答える形で記載して下さい。

[hr]
[1] 質問文
　[1.1] 自分が今行いたい事は何か
　[1.2] どのように取り組んだか(プログラムコードがある場合記載)
　[1.3] どのようなエラーやトラブルで困っているか(エラーメッセージが解る場合は記載)
　[1.4] 今何がわからないのか、知りたいのか

[2] 環境
　[2.1] OS ： Windows, Linux等々
　[2.2] コンパイラ名 ： VC++ 2008EE, Borand C++, gcc等々

[3] その他
　・どの程度Ｃ言語を理解しているか
　・ライブラリを使っている場合は何を使っているか

[hr]
[1.1] → 「スライドショーを作りたい」
[1.2] → (ソースコードは提示されている)
それ以外の情報は無いようですね。
複雑な問題？マシンの性能を上げてOpenMPで殴ればいい！(死亡フラグ)
ページトップ
フィリップ

Re: スライドショーを作りたいのですが分かりません教えて下さい

#3

投稿記事 by フィリップ » 7年前

スライドするコードが分かりませんね
ページトップ
あんどーなつ
記事: 171
登録日時: 7年前
連絡を取る:
あんどーなつ に連絡する

Re: スライドショーを作りたいのですが分かりません教えて下さい

#4

投稿記事 by あんどーなつ » 7年前

FANKYにカッコよく決めてくれぃ　ｷﾘｯ


とか言われてもどうしようもない。

teratailにも同様の質問を投稿しているみたいですね
https://teratail.com/questions/59349

人に仕事を依頼するときはきちんと然るべき謝礼を支払ってやってもらってください。
ページトップ
metaphor

Re: スライドショーを作りたいのですが分かりません教えて下さい

#5

投稿記事 by metaphor » 7年前

thisを使ってDOM要素を制御されてますね。jQuery＋CSSは短いコードで色んなことができるので今勉強中です。大分進んでいるようですね。
JavaScipt（jQuery）は開発の有力な手段だと思います。https://matome.naver.jp/odai/2132616911530364801みたいなを作りたいですね。
（JavaSciptと言っても今は昔と全く違います。）
ページトップ
閉鎖

“C言語何でも質問掲示板” へ戻る