the following code is for image slider but it is not working it shows image's thumbnails .. plz sort this out
code
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage3.master.cs" Inherits="MasterPage3" %>
Online Shopping System
makro
<%--
Let's have a look to shop
--%>javascript.js
function slideShow() {
var $active = $('#s_show IMG.active');
if ($active.length == 0) $active = $('#s_show IMG:last');
var $next = $active.next().length ? $active.next()
: $('#s_show IMG:first');
$active.addClass('last-active');
$next.css({ opacity: 0.0 })
.addClass('active')
.animate({ opacity: 1.0 }, 1000, function () {
$active.removeClass('active last-active');
});
}
$(function () {
setInterval("slideShow()", 3000);
});
stylesheet.cs
body { background-image:url('../bck.jpg');
background-repeat:repeat-x;
}
h1 {
color:red;
text-align:center;
font-family:'Comic Sans MS';
}
div
{
border:4px dotted yellow;
border-radius:25px;
}
h3{
color:red;
height: 23px;
width: 947px;
}
h2
{
width:115px;
height:40px;
background:red;
position:relative;
font-family:Verdana;
font-size:xx-large;
color:white;
/* Chrome, Safari, Opera */
-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:1s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
/* Standard syntax */
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:1s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:red; left:200px; top:0px;}
50% {background:red; left:200px; top:200px;}
75% {background:red; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
/* Standard syntax */
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:red; left:200px; top:0px;}
50% {background:red; left:200px; top:200px;}
75% {background:red; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
/*slider code*/
#s_show {
position:absolute;
height:350px;
background-color:white;
border:5px groove Fuchsia;
}
#s_show IMG {
position:absolute;
top:10px;
margin-right:50px;
border-width:5px;
border-color:Fuchsia;
border-style:groove;
z-index:3;
opacity:0.0;
}
#s_show IMG.active {
z-index:10;
opacity:1.0;
left: 8px;
width: 14px;
height: 22px;
}
#s_show IMG.last-active {
z-index:9;
}
2 Replies
Know the answer? Post it — somebody with the same question will find it here.
Sign in to answer this question
It is the same account you read, post and publish with — and you will come straight back to this page.
romasha aliPosted May 30, 2014, 11:00 AM
Lakshmanan Sethu SankaranarayanPosted May 29, 2014, 10:02 PM
Whats the error message. Please check
this http://stackoverflow.com/questions/12068734/jquery-simple-image-slideshow-tutorial