Динамическая смена фона на сайте
Доброго времени суток, есть такой блок на сайте:
<div id="style-switcher">
<span class="title">Фон сайта</span>
<ul>
<li><a class="bg-switcher" value="1" href="#">1</a></li>
<li><a class="bg-switcher" value="2" href="#">2</a></li>
<li><a class="bg-switcher" value="3" href="#">3</a></li>
<li><a class="bg-switcher" value="4" href="#">4</a></li>
</ul>
</div>
И к нему есть код:
jQuery(document).ready(function(){
$('.bg-switcher').click(
function() {
var bgNumber = $(this).attr("value");
$('body').css("background-image","url(http://render911.ru/textures/floor/floor_"+bgNumber+".jpg)");
});
});
Все работает все классно, но вот как видите ссылка картинки фона ведет на сайт с бесшовными текстурами. Так вот в коде html 4 кнопки (текстуры), хотелось бы сделать универсально, что бы не добавлять много кнопок, а просто две кнопки "вперед", "назад" ну и что бы номер каждой текстуры выводился. Так как на том сайте есть текстуры не только ламината, а и другие, хотелось бы сделать еще select с option каждого раздела (ведь ссылки на текстуры прямые, можно этим воспользоваться). |
На счет второго вопроса про select, сделал вот такое, не ругайте только синтаксиса не знаю.
<select class="type-switcher">
<option value="1">Ламинат</option>
<option value="2">Камень</option>
<option value="3">Дерево</option>
</select>
и такой вот код:
$('.type-switcher option').click(
function() {
var typeLink = "";
var typeNumber = $(this).attr("value");
if(typeNumber = "1") {
typeLink = "http://render911.ru/textures/floor/floor_";
}else if(typeNumber = "2") {
typeLink = "http://render911.ru/textures/stone/stone_";
}else {
typeLink = "http://render911.ru/textures/wood/wood_";
};
});
А в предыдущий код немного изменил:
$('.bg-switcher').click(
function() {
var bgNumber = $(this).attr("value");
$('body').css("background-image","url("+typeLink+bgNumber+".jpg)");
});
});
|
karakym,
$('.type-switcher').change
... var typeNumber = this.value |
Цитата:
jQuery(document).ready(function(){
$('.type-switcher').change(
function() {
var typeNumber = $(this).attr("value");
if(typeNumber == "1") {
typeLink = "http://render911.ru/textures/floor/floor";
}else if(typeNumber == "2") {
typeLink = "http://render911.ru/textures/stone/stone";
}else {
typeLink = "http://render911.ru/textures/wood/wood";
};
alert(typeLink);
});
$('.bg-switcher').click(
function() {
var bgNumber = $(this).attr("value");
alert(typeLink);
$('body').css("background-image","url("+typeLink+"_"+bgNumber+".jpg)");
});
});
Значит в первой функции нажатие выводит окошко alert(typeLink), а уже вторая функция не выводит это же окошко! Почему так? Что не правильно? И как правильно сцеплять 2 переменные? |
karakym,
обьявить нужные переменные в строке 2 а не в телах функций |
Хорошо, с этим разобрался. А как мне теперь убрать кучу кнопок (нажатие на каждую кнопку заменяет фон своей текстурой) и сделать только 2: назад, вперед (что бы по нажатию +1 к переменнай кнопки или -1) при этом для каждого option можно было указать максимальное число (что бы например выше чем 37 не добавляло +1 к переменной)
|
karakym,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
var typeLink = "http://render911.ru/textures/floor/floor",
bgNumber = 1;
$(".type-switcher").change(function() {
typeLink = {
1: "http://render911.ru/textures/floor/floor",
2: "http://render911.ru/textures/stone/stone",
3: "http://render911.ru/textures/wood/wood"
}[this.value];
fn()
});
$(".bg-switcher").click(function() {
bgNumber = $(this).attr("value");
fn()
});
function fn() {
$("body").css("background-image", "url(" + typeLink + "_" + bgNumber + ".jpg)")
}
fn()
});
</script>
</head>
<body>
<div id="style-switcher">
<span class="title">Фон сайта</span>
<ul>
<li><a class="bg-switcher" value="1" href="#">1</a></li>
<li><a class="bg-switcher" value="2" href="#">2</a></li>
<li><a class="bg-switcher" value="3" href="#">3</a></li>
<li><a class="bg-switcher" value="4" href="#">4</a></li>
</ul>
</div>
<select class="type-switcher">
<option value="1">Ламинат</option>
<option value="2">Камень</option>
<option value="3">Дерево</option>
</select>
</body>
</html>
|
рони,
Мерси:thanks: |
Ребят, хочу еще заменить это:
<ul>
<li><a class="bg-switcher" value="1" href="#">1</a></li>
<li><a class="bg-switcher" value="2" href="#">2</a></li>
<li><a class="bg-switcher" value="3" href="#">3</a></li>
<li><a class="bg-switcher" value="4" href="#">4</a></li>
<li><a class="bg-switcher" value="5" href="#">5</a></li>
<li><a class="bg-switcher" value="6" href="#">6</a></li>
<li><a class="bg-switcher" value="7" href="#">7</a></li>
<li><a class="bg-switcher" value="8" href="#">8</a></li>
<li><a class="bg-switcher" value="9" href="#">9</a></li>
<li><a class="bg-switcher" value="10" href="#">10</a></li>
<li><a class="bg-switcher" value="11" href="#">11</a></li>
<li><a class="bg-switcher" value="12" href="#">12</a></li>
</ul>
Этим:
<ul>
<li><a class="next" href="#">></a></li>
<li><a class="nuber" href="#">0</a></li>
<li><a class="prew" href="#"><</a></li>
</ul>
Но тут даже говнокод написать не могу(( |
<!DOCTYPE html>
<html lang="en">
<head>
<title>Untitled</title>
<meta charset="utf-8">
<link href="http://red-web.pp.ua/advo.dp.ua2/styles.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<span style="background: rgba(255,0,0,0.5);font-size: 36px;margin:auto;font-family: 'Didact Gothic', sans-serif;color:#fff;padding: 20px;">УРА!!! Товарищи!!!</span>
<script>
$(function() {
var typeLink = "http://render911.ru/textures/floor/floor",
bgNumber = 1;
numLink = 1;
maxNum = {
1: "73",
2: "61",
3: "116",
4: "36",
5: "300"
}
$(".type-switcher").change(function() {
numLink = $(this).attr("value");
typeLink = {
1: "http://render911.ru/textures/floor/floor",
2: "http://render911.ru/textures/stone/stone",
3: "http://render911.ru/textures/wood/wood",
4: "http://render911.ru/textures/leather/leather",
5: "http://server3d.ru/textures/wallpapers/wallpaper"
}[this.value];
$(this).append("("+maxNum[numLink]+")");
fn()
});
function fn() {
$("body").css("background-image", "url(" + typeLink + "_" + bgNumber + ".jpg)");
$(".nuber").html(bgNumber)
}
fn()
/*NEXT*/
$(".next").click(function() {
if(bgNumber > (maxNum[numLink]-1)) {
fn()
}else {
bgNumber++
fn()
}
$(".nuber").html(bgNumber)
fn()
});
$(".prew").click(function() {
if(bgNumber < 2) {
fn()
}else {
bgNumber--;
}
$(".nuber").html(bgNumber)
fn()
});
});
</script>
<div id="style-switcher">
<span class="title">Фон сайта</span>
<ul>
<li>
<select class="type-switcher">
<option value="1" selected="selected">Ламинат</option>
<option value="2">Камень</option>
<option value="3">Дерево</option>
<option value="4">Кожа</option>
<option value="5">Обои</option>
</select>
</li>
<li><input type="button" class="next" value=">"/></li>
<li><span class="nuber">0</span></li>
<li><input type="button" class="prew" value="<"/></li>
</ul>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 11:55. |