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>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
