JQUERY实现六屛风车

古城微笑少年丶 2021-12-21 10:13 121阅读 0赞

#     JQuery实现六屛幻灯片 轮换特效 #

html布局代码：

<body>
    		<div class="main">
    			<div class="picture_show">
    				<div class="picture">
    					<ul>
    						<li><a href=""><img src="../img/image1.png"/></a></li>
    						<li><a href=""><img src="../img/image2.png"/></a></li>
    						<li><a href=""><img src="../img/image3.png"/></a></li>
    						<li><a href=""><img src="../img/image4.png"/></a></li>
    						<li><a href=""><img src="../img/image5.png"/></a></li>
    						<li><a href=""><img src="../img/image6.png"/></a></li>
    					</ul>
    				</div>
    				<div class="txt">
    				<ul>
    					<li>
    						<h3><a href="">如约而至</a></h3>
    						<p>“如果早知道那天是我们最后一面，我绝不会和你谈论琐事浪费时间
    					人生里看似偶然却又必经的告别，无约而至 ，无人可免。”</br>这首歌蕴含了，爱与生死和时间，深刻表现了对他的思念</p>
    					</li>
    					<li>
    						<h3><a href="">绝代风华</a></h3>
    						<p>《绝代风华》的基调是逍遥自在的：主人公曾“鲜衣怒马”、“征战杀伐”，有了所爱之人后便告别江湖、悠然归隐，与知己落棋听雨、朝夕为伴、互赏风华。特别之处是开篇以悬疑气氛入题，描摹不速之客在林间暗伏之景</p>
    					</li>
    					<li>
    						<h3><a href="">摄影艺术</a></h3>
    						<p>摄影艺术，曾经是只属于那些游走在暗房内外的摄影师们的，而现在，摄影，已成为你我他的一种生活方式，举起手机，或单反，人人都在记录生活，人人都做摄影师。在此次发表的新作《摄影艺术》里，许嵩站在当下信息爆炸的数码时代怀念胶片“慢”时代，以摄影作品的永恒对照情感的善变，字里行间埋伏绝妙隐喻，文火丛生，耐人寻味。</p>
    					</li>
    					<li>
    						<h3><a href="">流芳千古</a></h3>
    						<p>许嵩作品《千古》，由许嵩词曲创作及制作。有别于上张专辑里《山水之间》式的华丽古韵，许嵩在《千古》里擦除了年代感，以干净利落、清朗质朴的音乐语言，描摹对爱情的感伤与眷恋，也营造了更为开阔的赏味格局。词作方面，微微带有文言气息的现代文法，细腻与洒脱并存，字里行间满溢许嵩的个人风格，见字如面。</p>
    					</li>
    					<li>
    						<h3><a href="">青</a></h3>
    						<p>《青》是许嵩2006年演唱的一首国语歌曲。其曲调轻缓而温柔，但又夹杂着淡淡的忧伤，很符合许嵩当时的风格。这首歌描绘了一个暗恋的小故事，“永远飞不到微亮明天”道尽了暗恋的痛苦，蕴含着诉不尽的悲伤。但青春时期的爱恋是青涩的，是捉摸不定的，是让人倍感焦虑和惆怅的，但却是让人最容易感到满足而幸福的。</p>
    					</li>
    					<li>
    						<h3><a href="">不语</a></h3>
    						<p>《不速之客》片方听过歌曲小样后第一感觉邀请许嵩来演绎会极为合适，然而工作人员上网搜索资料发现许嵩几乎只演唱其自己原创的作品，于是就放弃了这个想法。
    随后的时间里，片方邀约了其他几位歌手试音，歌手不约而同表示这首歌写得看似简单，实则非常难于演绎：副歌不断重复追问，如何表达的有层次但不落俗套是个难题。试音后发现效果不太理想。抱着试试看的态度，片方联系了许嵩所属唱片公司，没想到许嵩素来对悬疑电影题材非常喜爱，愿意尝试演绎本影片主题曲，双方一拍即合。</p>
    					</li>
    				</ul>
    				</div>
    			</div>
    			<div class="select_img">
    				<ul>
    					<li><a href=""><img src="../img/image1.png"/></a><span class="select_biaoti">如约而至</span><span class="select_date">2018-1-1</span></li>
    					<li><a href=""><img src="../img/image2.png"/></a><span class="select_biaoti">绝代风华</span><span class="select_date">2018-1-1</span></li>
    					<li><a href=""><img src="../img/image3.png"/></a><span class="select_biaoti">摄影艺术</span><span class="select_date">2018-1-1</span></li>
    					<li><a href=""><img src="../img/image4.png"/></a><span class="select_biaoti">流芳千古</span><span class="select_date">2018-1-1</span></li>
    					<li><a href=""><img src="../img/image5.png"/></a><span class="select_biaoti">青</span><span class="select_date">2018-1-1</span></li>
    					<li><a href=""><img src="../img/image6.png"/></a><span class="select_biaoti">不语</span><span class="select_date">2018-1-1</span></li>
    				</ul>
    			</div>
    		</div>
    	</body>

**css代码：**

*{
    				padding: 0px;
    				margin: 0px;
    			}
    			body{
    				background-color: #CCCCCC;
    			}
    			ul{
    				list-style: none;
    			}
    			a{
    				text-decoration: none;
    			}
    			/*格式初始化完毕*/
    			.main{
    				margin:0px auto;
    				width:1050px;
    				overflow:hidden;
    			}
    			/*整体框架*/
    			.picture_show{
    				position:relative;
    			}
    			.picture_show,.picture{
    				width:800px;
    				height:400px;
    				overflow:hidden;
    				float:left;
    			}
    			.picture li{
    				width: 800px;
    				height: 400px;
    				overflow: hidden;
    				float: left;
    				display: none;
    			}
    			.picture img{
    				width: 800px;
    				height: 400px;
    			}
    			.txt{
    				left: 0;
    				width: 800px;
    				bottom:0;
    				height: 100px;
    				position: absolute;
    				margin-bottom: 0px;
    				overflow: hidden;
    			}
    			/*.txt ul{
    				height: 100px;
    				float: left;
    			}*/
    			.txt li{
    				background: url(../img/picshow_bg.png) repeat;
    				padding: 5px 10px;
    				height: 90px;
    				color: #FFF;
    				display: none;
    				/*z-index: 0;*/
    			}
    			.txt li a{
    				color: #FFF;
    			}
    			.txt li a:hover{
    				text-decoration: underline;
    			}
    			.txt li h3{
    				margin: 10px 0;
    			}
    			.txt li p{
    				color:#ccc;
    				line-height:14px;
    				height:32px;
    				font-size: 12px;
    				overflow:hidden;
    			}
    			.select_img{
    				width:249px;
    				height:400px;
    				color:#111;
    				float:right;
    				display:inline;
    				background-color:#f0f0f0;
    			}
    			.select_img li{
    				padding: 1px 1px 1px 1px;
        			width: 195px;
        			height: 66px;
        			border-top: 1px solid #474747;
        			cursor: pointer;
       				transition: all .7s ease 0s;
    			}
    			.select_img li:hover{
    				background-color: #292929;
    			}
    			.select_img li a:hover{
    				color: aliceblue;
    			}
    			.select_img li .current{
    				background-color: #1A1A1A;
    			}
    			.select_img li .current a{
    				color:aliceblue;
    			}
    			.select_img li .current:hover{
    				 background-color: #292929;
    			}
    			.select_img a{
    				color: #000000;
    			}
    			.select_img img{
    				padding:2px;
    				border:1px solid #ccc;
    				width:70px;
    				height:50px;
    				margin-right:10px;
    				float:left;
    			}
    			.select_img .select_biaoti{
    				height:20px;
    				font:bold 13px/16px 'Microsoft YaHei';
    				overflow:hidden;
    				display:block;
    			}
    			.select_img .select_biaoti:hover{
    				text-decoration: underline;
    			}
    			.select_img .select_date{
    				height:23px;
    				line-height:23px;
    				overflow:hidden;
    				display:block;
    			}
    			#foot_bm a, #foot_bm, p, p a {
    			color:#666;
    			}

**Javascript代码：**

$(function(){
    //				console.log("js正常");
    				$(".select_img li:first").css("border","none");//让第一个li上边框消失
    				if($(".main").length){
    					main();//调用main函数
    					$('#h_sns').find('img').click(function(){
    						$(this).fadeTo(200,0.5);
    					}, function(){
    						$(this).fadeTo(100,1);
    					});
    				}
    				console.log($('#h_sns'));
    				function main(class1,delay){
    					var class1=class1?class1:".main";
    					var delay=delay?delay:5000;
    					var currentEQ=0,picnum=$(".picture li").size(),autoScollFUN;
    //					console.log(picnum);
    					$(".select_img li").eq(currentEQ).addClass("current");
    					$(".picture li").eq(currentEQ).show();
    					$(".txt li").eq(currentEQ).show();
    					autoScrollFUN=setTimeout(autoScroll, delay);//设置五秒切换
    					function autoScroll(){
    						clearTimeout(autoScrollFUN);
    						currentEQ++;
    						if (currentEQ>picnum-1) currentEQ=0;
    						$(".select_img li").removeClass("current");
    						$(".picture li").hide();
    						$(".txt li").hide().eq(currentEQ).slideDown(400);
    						$(".select_img li").eq(currentEQ).addClass('current');
    						$(".picture li").eq(currentEQ).show();
    						autoScrollFUN = setTimeout(autoScroll, delay);	
    					}
    					$(".picture_show").click(
    						function(){
    							clearTimeout(autoScrollFUN);
    						},
    						function(){
    							autoScrollFUN = setTimeout(autoScroll, delay);
    						});
    					$(".select_img li").click(function(){
    						var picEQ=$(".select_img li").index($(this));
    						if (picEQ==currentEQ) return false;
    						currentEQ=picEQ;
    						$(".select_img li").removeClass("current");
    						$(".picture li").hide();
    						$(".txt li").hide().eq(currentEQ).slideDown(100);
    						$(".select_img li").addClass("current");
    						$("picture li").eq(currentEQ).show();
    						return false;
    					});
    				};
    			});
    		</script>