老師求源碼
可以發(fā)源碼嗎？郵箱125061345@qq.com
an202
2015-06-10
3 回答
舉報(bào)
0/150
提交
取消
2016-07-21
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<link type="text/css" rel="stylesheet" href="sliders.css" />
</head>
<body>
<div class="slider">
? ? ? ? ? ? <div class="main" id="template_main">
? ? ? ? ? ? ? ? <div class="main-i {{css}}" id="main_{{index}}">
? ? ? ? ? ? ? ? ? ? <a class="img_a"><img src="{{index}}.jpg" class="picture"/></a>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? ? ??
? ? ? ? ? ? <div class="ctrl" id="template_ctrl">
? ? ? ? ? ? ? ? <a class="ctrl-i" id="ctrl_{{index}}" href="javascript:switchSlider({{index}});" onmouseover="switchSlider({{index}});">
? ? ? ? ? ? ? ? ? ? <img src="{{index}}.jpg"/>
? ? ? ? ? ? ? ? </a>
? ? ? ? ? ? </div>
</div>
<script type="text/javascript" src="sliders.js"></script>
</body>
</html>
------------------------------------------css-------------------------------------------------------
*{
? ? ? ? padding:0;margin: 0;border:0;
? ? }
? ? body{
? ? ? ? padding:50px 0;
? ? ? ? background-color: #FFF;
? ? ? ? font-size:14px;
? ? ? ? font-family: 'Avenir Next';
? ? ? ? color: #555;
? ? ? ? -webkit-font-smoothing: antialiased;
? ? ? ? position:relative;
? ? }
? ? ?.slider {
? ? ? ? width:100%;
? ? ? ? height:400px;
? ? ? ? position:relative;
? ? }
? ? .slider .main, .slider .main .main-i{
? ? ? ? width:100%;
? ? ? ? height:400px;
? ? ? ? position:relative; ? ? ?
? ? }
? ??
? ? .slider .main{
? ? ? ? overflow:hidden;
? ? ? ? }
? ? ? ??
? ? .slider .main .main-i{}
? ? .slider .main .main-i img{
? ? ? ? width: 100%;
? ? ? ? position: absolute;
? ? ? ? left: 0;
? ? ? ? top:0;
? ? ? ? z-index:1;
? ? ? ? }
? ? .slider .ctrl{
? ? ? ? width:100%;
? ? ? ? text-align:center;
? ? ? ? position:absolute;
? ? ? ? }
? ? .slider .ctrl .ctrl-i{
? ? ? ? display: inline-block;
? ? ? ? width: 14%;
? ? ? ? position: relative;
? ? ? ? }
? ? .slider .ctrl .ctrl-i img{
? ? ? ? width: 100%;
? ? ? ? position:absolute;
? ? ? ? left:0;
? ? ? ? bottom:0;
? ? ? ? z-index: 5;
? ? ? ? margin: 5px;
? ? ? ? opacity: 0.5;
? ? ? ? -webkit-transition:all .2s;
? ? ? ? }
? ? ? ? /*hover control*/
? ? ? ? .slider .ctrl .ctrl-i img:hover{
? ? ? ? ? ? bottom: 7px; ? ? ? ? ? ?
? ? ? ? ? ? opacity: 1;
? ? ? ? ? ? padding: 10px;
? ? ? ? ? ? z-index:9;
? ? ? ? ? }
? ? ? ? /*active*/
? ? ? ? .slider .ctrl .ctrl-i_active img{
? ? ? ? ? ? bottom: 7px; ? ? ? ? ? ?
? ? ? ? ? ? opacity: 1;
? ? ? ? ? ? padding: 10px;
? ? ? ? ? ? z-index:9;
? ? ? ? }
? ? ? ? .slider .ctrl .ctrl-i_active:hover img{}
? ? ? ? ? ??
? ? ? ? .slider .main .main-i{
? ? ? ? ? ? opacity: 0;
? ? ? ? ? ? position:absolute;
? ? ? ? ? ? right: 50%;
? ? ? ? ? ? top: 0;
? ? ? ? ? ? -webkit-transition:all .5s;
? ? ? ? ? ? z-index: 2;
? ? ? ? ? ? }
? ? ? ? .slider .main .main-i_right{
? ? ? ? ? ? right: -50%;
? ? ? ? }
? ? ? ? #main_background, .slider .main .main-i_active{
? ? ? ? ? ? right: 0;
? ? ? ? ? ? opacity: 1;
? ? ? ? ? ? z-index:2;
? ? ? ? }
? ? ? ? #main_background {
? ? ? ? ? ? z-index: 1;
? ? ? ? }
------------------------------------------------------------------js--------------------------------------------------
? ??
? ? //1.數(shù)據(jù)定義
? ? var data = [
? ? {img:1,h1:'Creative',h2:'DUET'},
? ? {img:2,h1:'Friendly',h2:'DEVIL'},
? ? {img:3,h1:'Tranquilent',h2:'COMPATRIOT'},
? ? {img:4,h1:'Insecure',h2:'HUSSLER'},
? ? {img:5,h1:'Loving',h2:'REBEL'},
? ? {img:6,h1:'Passionate',h2:'SEEKER'},
? ? {img:7,h1:'Crazy',h2:'FRIEND'}
? ? ];
? ? var _href = [
{href:'1'},
{href:'2'},
{href:'3'},
{href:'4'},
{href:'5'},
{href:'6'},
{href:'7'}
];
? ? //2. 定義通用函數(shù)
? ? var g = function (id) {
? ? ? ? if (id.substr(0,1) == '.') {
? ? ? ? ? ? return document.getElementsByClassName(id.substr(1));
? ? ? ? } else {
? ? ? ? return document.getElementById(id);
? ? ? ? }
? ? }
? ? // 3.添加幻燈片操作
function addhref() {
var arr = g('.img_a');
for (i=0;i<arr.length-1;i++){
arr[i].setAttribute("href",_href[i].href);
}
}
? ? function addSliders() {
? ? ? ? var tpl_main = g('template_main').innerHTML.replace(/^\s*/,'').replace(/\s*$/,'');
? ? ? ? var tpl_ctrl = g('template_ctrl').innerHTML.replace(/^\s*/,'').replace(/\s*$/,'');
? ? ? ? var out_main = [];
? ? ? ? var out_ctrl = [];
? ? ? ??
? ? ? ? for (i in data) {
? ? ? ? ? ? var _html_main = tpl_main.replace(/{{index}}/g,data[i].img)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? .replace(/{{h2}}/g,data[i].h1)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? .replace(/{{h3}}/g,data[i].h2)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? .replace(/{{css}}/g,['','main-i_right'][i%2]);
? ? ? ? ? ? var _html_ctrl = tpl_ctrl.replace(/{{index}}/g,data[i].img);
? ? ? ? ? ? out_main.push(_html_main);
? ? ? ? ? ? out_ctrl.push(_html_ctrl);
? ? ? ? ? ? }
? ? ? ? ? ? g('template_main').innerHTML = out_main.join('');
? ? ? ? ? ? g('template_ctrl').innerHTML = out_ctrl.join('');
? ? ? ? ? ? g('template_main').innerHTML += ?tpl_main.replace(/{{index}}/g,'{{index}}').replace(/{{h2}}/g,data[i].h1).replace(/{{h3}}/g,data[i].h2);
? ? ? ? ? ? g('main_{{index}}').id = 'main_background';
? ? }
? ? var cur_index;
? ? function switchSlider(n) {
? ? ? ? //獲得要展現(xiàn)的幻燈片&按鈕
? ? ? ? cur_index = n;
? ? ? ? var main = g('main_'+n);
? ? ? ? var ctrl = g('ctrl_'+n);
? ? ? ? //獲得所有的幻燈片&按鈕
? ? ? ? var clear_main = g('.main-i');
? ? ? ? var clear_ctrl = g('.ctrl-i');
? ? ? ? // 清除樣式
? ? ? ? for (i=0;i<clear_ctrl.length;i++) {
? ? ? ? ? ? clear_ctrl[i].className = clear_ctrl[i].className.replace(' ctrl-i_active', '');
? ? ? ? ? ? clear_main[i].className = clear_main[i].className.replace(' main-i_active', '');
? ? ? ? }
? ? ? ? //為當(dāng)前按鈕增加樣式
? ? ? ? main.className += ' main-i_active';
? ? ? ? ctrl.className += ' ctrl-i_active';
? ? ? ? //延遲展現(xiàn)背景
? ? ? ? setTimeout(function() {g('main_background').innerHTML = main.innerHTML;},1000);
? ? ? ??
? ? ? ? }
? ? window.onload = function() {
? ? ? ? addSliders();
switchSlider(1);
addhref();
? ? ? ? var pic_jud = g('.picture').length;
? ? ? ? var timer;
? ? ? ? var ind = 2;
? ? ? ? var flag = true;
? ? ? ? timer = setInterval(function(){
? ? ? ? ? ? switchSlider(ind);
? ? ? ? ? ? ind++;
? ? ? ? ? ? if (ind === pic_jud) {
? ? ? ? ? ? ? ? ind = 1;
? ? ? ? ? ? }}, 2000);
? ? ? ? document.getElementById("template_main").onmouseover = document.getElementById("template_ctrl").onmouseover = function () {
? ? ? ? ? ? clearInterval(timer);
? ? ? ? ? ? flag = false;
? ? ? ? }
? ? ? ? document.getElementById("template_main").onmouseout = document.getElementById("template_ctrl").onmouseout = function () {
? ? ? ? ? ? timer = setInterval(function(){
? ? ? ? ? ? if (!flag) {
? ? ? ? ? ? ? ? ind = cur_index;
? ? ? ? ? ? ? ? flag = true;
? ? ? ? ? ? }
? ? ? ? ? ? switchSlider(ind);
? ? ? ? ? ? ind++;
? ? ? ? ? ? if (ind === pic_jud) {
? ? ? ? ? ? ? ? ind = 1;
? ? ? ? ? ? }}, 3000);
? ? ? ? }
? ? }
---------------------------------------------------------------------------------------------------------------------按照老師的方法進(jìn)行了自己的改動(dòng)，刪除了倒影，居中等，增加了輪播，以及圖片上的鏈接，刪除了原來的控制條，換成了預(yù)覽圖
2015-07-07
自己打吧，這樣提高的才快
2015-06-15
一起求。